Animering (interpolering): Grunderna

Animering är egentligen poängen i Flash. Med begreppet "animering" menas inte enbart att objekt förflyttas eller har andra rörelser. Även effekter som transparens, zoom och färgändring innefattas i begreppet "Interpolering" (Tweening). I Flash kan du i huvudsak utföra två typer av interpolering: rörelseinterpolering och forminterpolering. I den här övningen lär du dig grunderna.

Rörelseinterpolering (Motion Tween)

Filmerna i Flash byggs upp av bildrutor (frames). Ju fler rutor som används desto längre blir filmen. Animering kan bara ske mellan minst två nyckelbildrutor (keyframes). När du animerar använder du symboler som kan bestå av tex objekt och bitmappbilder. Rörelseinterpolering innebär att du placerar ett objekt i den första nyckelbildrutan och i nästa keyframe ändrar du positionen på den. Flash skapar sedan de bildrutor som krävs för att symbolen ska göra en förflyttning.

Exemplet nedan visar en symbol (fisken) som rör sig mellan fyra keyframes. Själva vändningen sker på den tredje nyckelbildrutan och återgången till startläget sker på den fjärde och sista nyckelbildrutan.

Exempel:

Nyckelbildram 1 (ram 1) Här börjar fisken (symbolen) simma...

Nyckelbildruta 2 (bildruta 25) Här är fisken framme i höger kant...

Nyckelbildruta 3 (ruta 26) Här vänder fisken och börjar simma till vänster igen...

Nyckelbildruta 4 (ruta 50) Sista rutan i animationen och fisken har simmat tillbaka!

Tidslinjen (Timeline) går åt höger och blir längre ju fler bildrutor filmen består av. I exemplet ovan krävs alltså 4 st keyframes: för start vänster, stopp höger, vändning, och åter till vänster. Hela animeringen körs i en "slinga" (Loopar) vilket ger effekten av att fisken simmar fram och tillbaka om och om igen.

 

Grunderna till all animering i Flash

OK, då är det dags för dig att börja animera. Exemplet nedan är grunden till all animering i Flash så häng med från början!

Exempel:

1. Börja med ett nytt dokument. Vill du återställa menypaletternas visning väljer du även menyn "Fönster/Paneluppsättningar/Standardutseende" (Window/Panel Sets/Default Layout)
   
2. Rita ett nytt objekt på scenen. I exemplet använder vi en vanlig oval. Markera ditt objekt med verktyget "Pil" (Arrow). Se till att även eventuell kantlinje blir med i markeringen (läs mer om markering och objekt i "Grunderna om objekt" »)
   
   
3. De objekt som ska ingå i en Rörelseinterpolering (Motion Tween) måste konverteras till Symboler. Det gör du med menyn "Infoga/Konvertera till symbol..." (Insert/Convert to Symbol). I dialogrutan "Egenskaper för symbol" väljer du "Grafik". En bra idé är att redan nu namnge alla Symboler, Lager , Scener mm. Det kommer att bli en hel del att hålla reda på framöver...
   
   
4. När du konverterat ditt objekt till en Symbol så finns den tillgänglig i fönstret "Bibliotek" (Library) som du visar med menyn "Visa Bibliotek" längst ned till höger i Scenens fönster:
   
   Öppna Biblioteket (Library)
   
   
   ...där kommer alla Symboler som hör till din Flashfilm att samlas:
   
5. För att skapa en en animation krävs att det finns två sk "Nyckelbildrutor" (Keyframes) att utföra rörelsen/effekten emellan. Den ena rutan har du redan, det är ruta nr 1 som du befann dig i när du ritade ditt objekt. Skillnaden jämfört med de övriga rutorna är att det är en "prick" i en keyframe:
   
   Keyframe på ruta nummer 1:
   
   
   Skapa ytterligare en keyframe genom att högerklicka på tex ruta nr 20 och välja "Infoga nyckelbildruta" (Insert Keyframe).
   
   
   
   Mellan den nya nyckelbildrutan skapas vanliga statiska bildrutor (grå rutor) för att Symbolen ska synas hela filmen mellan ruta 1 till ruta 20.
   
   Keyframe på ruta 1 och ruta 20:
   
6. Se till att du har markerat ruta 20 (svart ruta, vit prick) i Tidslinjen (Timeline). Flytta nu din Symbol till en ny position på Scenen. Den nya positionen gäller enbart för ruta 20 än så länge.
   
   
   
   Kolla att Symbolen nu befinner sig i två olika positioner när du klickar på ruta 1 och ruta 20 i Tidslinjen (Timeline):
   
   Klicka på ruta 1 så syns symbolen i utgångspositionen:
   
   
   ...och klicka på ruta 20 så syns symbolen i den nya positionen:
   
7. För att Flash ska skapa nya rutor där Symbolen rör sig lite i taget så ska du skapa en Rörelseinterpolering (Motion Tween) från ruta 1 till ruta 20. (OBS! viktigt att animeringen sker framåt från en keyframe till nästa keyframe). Högerklicka på den första nyckelbildrutan (ruta 1) och välj i menyn "Skapa rörelseinterpolering" (Create motion Tween)
   
   
   
   
   Mellan de två nyckelbildrutorna ska det nu visas en pil över de blå rutor som animeringen nu sträcker sig över.
   
8. Testa din animering genom att dra i det röda reglaget ovanför tidslinjen.
   
   Dra i reglaget från startläget...
   
   
   ...till mitten av tidslinjen. Nu är du mitt i animationen.
   
   
   ...och här är slutläget, alltså den andra nyckelbildrutan.
   

Lär dig mer om animering i övningen "Animering: skala" »

 

Testa din animation

Du kan testa din animation i Flash ruta för ruta eller genom att se den i ett eget fönster. Spara först din Flashfilm, den får då filtillägget .FLA och är ditt "originaldokument". När du sedan testar den så skapas automatiskt en FlashPlayerfilm med filtillägget .SWF och det är den som är slutprodukten som tex kan infogas i HTML-koden på en webbsida.

Flashfilm = originalfilmen som du kan redigera och ändra (.FLA)
FlashPlayerfilm = den färdiga slutprodukten som kan visas med Flashplayer eller i en webbläsare med FlashPlayer plugin (.SWF)

Kör animeringen på scenen

När du har flera Scener och massor av Symboler som ska synkroniseras tillsammans kommer du att ha behov av att stega framåt och bakåt ruta för ruta. För enklare filmer räcker det med att köra hela filmen med Enter. (se Referens och Lathund ») Här är de olika testmetoderna:

Punkt = framåt en bildruta
Kommatecken = bakåt en bildruta
Enter = kör filmen från första till sista bildrutan.
CTRL+ALT+R = Backa tillbaka till första rutan

Kör animeringen i FlashPlayer

Kör animeringen som en testfilm i eget fönster och generera samtidigt en FlashPlayerfilm som sparas i samma mapp som du sparat din originalfilm (.FLA)

CTRL+Enter = Testa Flashplayerfilmen i eget fönster och generera .SWF
CTRL+ALT+Enter = Testa endast aktiv scen i eget fönster
CTRL+Shift+Enter = Felsök filmen med felsökningsrapport

Copyright © www.webdesignskolan.se
Materialet får skrivas ut och användas för personligt bruk.
Användning i undervisningssyfte är ej tillåten utan vårt tillstånd - läs mer här »