88 besökare, 1 medlem och 1 Student är online nu
Loopia

Flash

Lägga till en rörelse till en Knapp

En Knapp kan tilldelas olika egenskaper när muspekaren förs över eller vid klickning på Knappen. I det här exemplet används ett Filmklipp för att ge knappen rörelse (motion).

Exempel 1 - testa knapparna nedan:

Exempel 2 - testa knappen nedan:

Innan du börjar med övningen kan det vara bra att kunna grunderna i Flash »

 

Skapa Knappen

Gör en ny knapp enligt exemplet nedan eller använd en knapp som du gjort tidigare. Det viktiga i den här övningen är inte att göra knappen utan att skapa en händelse när knappen används. Läs mer om hur du kan skapa Knappar i övningen "Knappar - Buttons" »

  1. Skapa knappens form. I exemplet nedan en vanlig rektangel med grå fyllning och svart kantlinje:


  2. Markera hela objektet (se mer i övningen grunderna i Flash »). Konvertera din rektangel till en symbol med menyn "Infoga/Konvertera till Symbol" (Insert-Convert to Symbol) eller snabbkommando F8:

    Markera hela knappen:


    ...och konvertera den till en symbol:


    Välj beteendet "Button" och döp den till "Knapp":

 

Skapa en händelse

En Knapp-symbol kan tilldelas fyra egenskaper:

Up (Up): anger hur knappen ser ut när muspekaren inte befinner sig över knappen. Detta är alltså utgångsläget när knappen är "orörd"
Over (Tvärs över): anger hur knappen ser ut när muspekaren har placerats över knappen. Jämför med "rollover" eller "OnMouseOver" på webbsidor som normalt styrs av javascript.
Down: anger hur knappen ser ut när man klickar på den, "OnMouseDown" eller "OnClick"
Hit (Träff): anger vilket område som reagerar på musklickningen. OBS! Detta område syns inte i filmen och kan alltså göras större eller mindre än symbolen.

  1. Dubbelklicka på knappen så du kan editera den. Det första läget "Up" är redan klart. Högerklicka på nästa läge "Over" och välj att infoga en Nyckelbildram (Keyframe):


  2. Gör samma sak med de övriga lägena "Down" och "Hit" . Alla lägen ska alltså innehålla samma objekt om du markerar läget:


  3. Välj läget "Over" ändra fyllningsfärgen. Detta för att knappen senare ska ändra färg när man håller muspekaren över den:

    Markera läget "Over":


    ...och välj en annan fyllningsfärg:


    Prova knappen nedan:

    Exempel:


  4. Gå tillbaka till scenen genom att klicka på scenens namn:

Testa din knapp genom att köra Flashfilmen med CTRL+Enter!

 

Göra en rörelse (motion)

När muspekaren förs över knappen så ska en händelse ske och enklast är om händelsen skapas som ett eget Filmklipp (Movie Clip). I exemplet ska några cirklar stråla ut från knappen:

 

  1. Skapa ett nytt Filmklipp med menyn "Infoga/Ny Symbol" (Insert/New Symbol):



    När du visar Biblioteket (CTRL+L) kan det se ut så här:


  2. Se till att du befinner dig i Filmklippet och rita en Cirkel utan fyllning:


  3. Markera Cirkeln och gör den till en Symbol men menyn "Infoga/Konvertera till Symbol" (Insert/Convert to Symbol):

       
  4. Lägg till en ny Nyckelbildruta (Keyframe) i bildruta 5:


  5. Skapa en Rörelseinterpolering genom att högerklicka på bildruta 1 och välja "Skapa rörelseinterpolering" (Create Motion Tween):


  6. Markera bildruta 5 och använd verktyget "Omforma fritt" (Free Transform Tool) för att förstora cirkeln:



    ...den förstorade cirkeln:


    Testa ditt Filmklipp genom att trycka Enter!

    Exempel:


  7. Infoga ett nytt Lager:


  8. Markera de första fem bildrutorna i det första Lagret. Använd SHIFT+klick för att markera och högerklicka på bildrutorna och välj att kopiera dem:


  9. Högerklicka i bildruta 3 i det översta Lagret och välj att klistra in bildrutorna där:


  10. Upprepa momenten i punkt 7-9 för de antal Cirklar du vill ha i ditt Filmklipp. I exemplet nedan används 5 Lager som visar samma Cirkel men med 3 bildrutors förskjutning:


    Exempel:

 

ActionScript som stoppar Filmklippet

Ett Filmklipp upprepas oberoende av vad som händer i själva Filmen. I vårt exempel ska Filmklipet bara köras en gång när muspekaren förs över Knappen. För att stoppa filmklippet används ett ActionScript i den bildruta som ska avlsluta Filmklippet.

  1. Infoga ett Lager som ska användas till ActionScriptet:


  2. Genom att stoppa Filmklippet en bildruta efter den sista bildrutan som innehåller en cirkel så syns inte någon cirkel när Filmklippet stoppas. I exemplet är bildruta 15 den sista bildrutan med innehåll och vi infogar då en extra Nyckelbildruta i bildruta 16:


  3. Välj paletten "Åtgärder" (Actions). Du visar den med snabbkommando F2. Välj gruppen "Movie Control" och åtgärden "Stop":




    Ett stopp är nu infogat i den sista bildrutan:

 

Lägg till Filmklippet i Knapphändelse

Filmklippet ska placeras så att det visas när muspekaren förs över Knappen. Det gör du genom att placera filmklippet i Symbolen i läget "Over".

  1. Dubbelklicka på Knappen i Biblioteket:


  2. Skapa ett nytt Lager och placera det underst genom att dra det nedåt:


  3. Infoga en Nyckelbildruta (Keyframe) i läget "Over"


  4. Dra Filmklippet från biblioteket och placera det på Knappen:




    Filmklippet ska nu aktiveras när muspekaren förs över Knappen då läget "Over" aktiveras. Testa din Flashfilm med CTRL+Enter!

Prova knappen nedan:

Exempel: