I den här handledningen använder vi tidslinjeanimering för att skapa en anpassad klass. Vi ska sedan använda klassen på två olika och tydliga MovieClips, vilket effektivt duplicerar animeringen till dessa symboler.
Kort överblick
En av de nya funktionerna som kom med i Flash CS3, tillsammans med ActionScript 3, var möjligheten att kopiera tidslinjeanimering som AS3-kod. I den här handledningen skapar vi en anpassad klass som kan användas på valfritt filmklipp. Den resulterande klassen är mestadels XML-baserad och är inte något du vill skriva för hand - ja, inte om du inte är upptagen för mycket jobb och frustration.!
I exemplet SWF ovan växer vi bara och fader MovieClips, men du kan ha en väldigt komplex animering och det skulle också kopiera till ActionScript lika bra. Det bästa med att kopiera tidslinjeanimering till en klass är återanvändning. Du kan se att de två symbolerna följer exakt samma animationsmönster.
Steg 1: Ställa in dokumentet
Öppna ett nytt Flash-dokument och ställ in följande egenskaper
Dokumentstorlek: 400x200px
Bakgrundsfärg: #FFFFFF
Steg 2: Ställa in MovieClip
Från verktygspanelen välj det ovala verktyget och dra en grön cirkel på scenen. Du kan hålla ner Shift-tangenten när du drar cirkeln ut till formen överensstämmer med en cirkel och inte en utökad ellips.
I fältet Egenskaper ger cirkeln följande dimensioner
W: 27.00
H: 27,00
Högerklicka på den cirkel du just skapat och välj "Convert to Symbol". Stiga på cirkel som namn och se till att typen är inställd på Filmklipp.
Steg 3: Lägga till animationen till MovieClip
På tidslinjen högerklickar du på ram 60 och väljer "Insert KeyFrame".
Se till att du fortfarande är på ram 60 och i verktygspanelen använder verktyget Free Transform att dra cirkeln till ungefär dubbelt så stor som den ursprungliga storleken.
Se till att du fortfarande är på ram 60 på cirkeln MovieClip. På "Egenskaper" -panelen väljer du "Färgseffekt". I Style-rullgardinsmenyn väljer du "Alpha" och ställer in den till 0%.
Klicka på det lager som cirkeln är på för att se till att alla ramar är markerade. Alternativt kan du klicka på den första ramen och sedan Skift-klicka på den sista bilden för att se till att alla ramar är markerade. Högerklicka sedan någonstans mellan de markerade ramarna och välj "Skapa Classic Tween".
Du kan nu testa din animation genom att gå till Meny> Kontroll> Spela upp. Du borde ha en växande och blekande MovieClip.
Steg 4: Kopiera animationen
Nu är vi redo att kopiera vår tidslinjeanimering och koda vår klass.
Se till att alla ramar är markerade med hjälp av tekniken ovan. Högerklicka sedan på mellansidan i tidslinjen och välj "Kopiera rörelse som ActionScript 3.0". I den uppmaning som kommer upp, ge den förekomstnamnet "GrowFade"
Kopiera koden som visas på ditt urklipp.
Steg 5: Kodning av klassen
Skapa en ny ActionScript-fil genom att gå till Meny> Fil> Ny och sedan välja ActionScript-fil.
Lägg till följande kod i den nya AS-filen:
paket import flash.display.MovieClip; importera fl.motion.Animator; public class GrowFade utökar MovieClip var GrowFade_animator: Animator; offentlig funktion GrowFade () // konstruktörskod offentlig funktion growAndFade (): void
Här öppnar vi vårt paket och gör lite import. Animatorklassen är vad som används för att göra animeringen i vår klass. Funktionen growAndFade () är där vi klistrar in den kopierade ActionScript från steget ovan. Vi gör det här nästa.
Inuti growAndFade () funktionen klistra in ActionScript. Om du behöver kopiera det igen, följ bara stegen ovan och se till att du ger det förekomstnamnet "GrowFade".
De growAndFade funktionen ska nu se ut så här
paket public function growAndFade (): void import fl.motion.Animator; var GrowFade_xml: XML = ; var GrowFade_animator: Animator = ny animator (GrowFade_xml, GrowFade); GrowFade_animator.play ();
Vi behöver utföra vissa rengöringsarbeten på detta.
Först måste vi ta bort importdeklarationen eftersom vi redan har gjort det i början av klassen.
Nästa vill vi förklara GrowFade_animator som en lokal variabel till klassen, så flyttar vi det till toppen och instanserar det inom growAndFade funktion som så: GrowFade_animator = ny animator (GrowFade_xml, detta)
Du kanske har märkt att vi också har ändrat den andra parametern till detta. Anledningen till att vi gjorde detta är så att vi kan använda den här klassen på vilken som helst MovieClip; om vi inte hade ändrat det till detta då skulle endast klasser med förekomstnamnet "GrowFade" kunna använda den här klassen.
Här är komplett klass med de nya ändringarna och ett litet tillägg. Vi kommer att diskutera denna tillägg nästa.
paket import flash.display.MovieClip; importera fl.motion.Animator; public class GrowFade utökar MovieClip var GrowFade_animator: Animator public function GrowFade () // constructor code offentlig funktion growAndFade (): void import fl.motion.Animator; var GrowFade_xml: XML = ; GrowFade_animator = ny animator (GrowFade_xml, detta); GrowFade_animator.play (); // Hur många gånger för att upprepa animationen 0 = för evigt GrowFade_animator.repeatCount = 0;
Du kommer märka att vi lagt till repeat fast egendom. Om du anger detta anger du hur många gånger du vill upprepa animeringen. Om det ställs in till noll betyder det att det kommer att upprepas för alltid.
Steg 6: Ställa in MovieClips
Tillbaka i FLA, ta bort cirkeln från scenen och ta bort alla ramar från tidslinjen.
Högerklicka på biblioteket i biblioteket cirkel filmklipp och välj "Egenskaper".
Ge cirkeln klassnamnet "Circle" och sätt basklassen till "GrowFade"; Eftersom GrowFade-klassen utökar MovieClip kan vi använda den som basklassen i cirkeln. Vi har inte skapat en cirkelklass, men för att vi angett GrowFade som basklass, skapar Flash automatiskt en klass för cirkeln som utvidgar GrowFade, när SWF är skapad. Så här kan vi använda så många filmklipp som vi vill, alla delar GrowFade-klassen.
Dra sedan en blå rektangel på scenen.
I fönstret Egenskaper ger denna rektangel följande egenskaper:
W: 83,00
H: 30:00
Högerklicka på rektangeln och välj "Convert to Symbol"; ge det namnet fyrkant.
Ta bort rektangeln från scenen. I biblioteket högerklickar du på torget MovieClip. Välj "Egenskaper" och ge det klassnamnet "Square" och sätt basklassen till "GrowFade" som vi gjorde med cirkeln ovan.
Steg 6: Applicera klassen till filmklippet
Skapa en ny ActionScript-fil och lägg till följande kod:
paket import flash.display.MovieClip; public class Main utökar MovieClip var cirkel: Circle; var kvadrat: kvadrat; allmän funktion Main () circle = new Circle (); circle.x = 50 circle.y = 50; addChild (cirkel); circle.growAndFade (); kvadrat = nytt kvadrat; kvadrat.x = 200; kvadrat.y = 50; addChild (kvadrat); square.growAndFade ();
Eftersom vi ställer in basklassen i cirkeln och torget till GrowFade, kan vi ringa growAndFade () metod på dem.
Ställ in filmens dokumentklass till Main och testa filmen. Du bör ha två separata filmklipp med samma GrowAndFade-animering.
Slutsats
Att kunna kopiera tidslinjeanimering är ett bra komplement till Flash. Oavsett hur komplicerad en animation du kommer med kan Flash hantera det för dig och att kunna dela samma animering över många olika filmklipp är en enorm tidsbesparare.
Jag hoppas att du har haft den här handledningen, tack för att du läste!
Share
Accentsconagua
