I denne opplæringen bruker vi tidslinje animasjon for å lage en tilpasset klasse. Vi vil da bruke klassen på to forskjellige og forskjellige MovieClips, som effektivt dupliserer animasjonen til disse symbolene.
Kort overblikk
En av de nye funksjonene som fulgte med i Flash CS3, sammen med ActionScript 3, var muligheten til å kopiere tidslinje animasjon som AS3-kode. I denne opplæringen vil vi lage en egendefinert klasse som kan brukes på et filmklipp du velger. Den resulterende klassen er for det meste XML-basert og er ikke noe du vil skrive for hånd - vel, ikke med mindre du er oppe for mye hardt arbeid og frustrasjon!
I eksempelet SWF ovenfor vokser vi bare og fader MovieClips, men du kan ha en veldig komplisert animasjon, og det ville også kopiere til ActionScript. Det beste ved å kopiere tidslinjeanimasjon til en klasse er gjenbrukbarhet. Du kan se at de to symbolene følger nøyaktig samme animasjonsmønster.
Trinn 1: Sette opp dokumentet
Åpne et nytt Flash-dokument og sett inn følgende egenskaper
Dokumentstørrelse: 400x200px
Bakgrunnsfarge: #FFFFFF
Trinn 2: Sette opp MovieClip
Fra verktøylinjen velger du Oval Tool og tegner en grønn sirkel på scenen. Du kan holde nede Shift-tasten når du drar sirkelen ut til formen samsvarer med en sirkel og ikke en utvidet ellipse.
I panelet Egenskaper gir sirkelen følgende dimensjoner
W: 27,00
H: 27,00
Høyreklikk på sirkelen du nettopp har opprettet, og velg "Konverter til symbol". Tast inn sirkel som navnet og pass på at Type er satt til Filmklipp.
Trinn 3: Legge til animasjonen til MovieClip
På tidslinjen, høyreklikk på ramme 60 og velg "Sett inn KeyFrame".
Pass på at du fortsatt er på rammen 60, og bruk verktøyet Gratis verktøy for å dra sirkelen til omtrent dobbelt så stor som originalstørrelsen.
Pass på at du fortsatt er på rammen 60 på sirkelen MovieClip. Velg "Fargeeffekt" i Egenskaper-panelet. I Style-rullegardinmenyen velger du "Alpha" og setter den til 0%.
Klikk på laget som sirkelen er på for å sikre at alle rammene er uthevet. Alternativt kan du klikke på den første rammen og deretter Skift-klikk på den siste rammen for å sikre at alle rammer er uthevet. Deretter høyreklikker du hvor som helst mellom de uthevede rammene og velger "Create Classic Tween".
Du kan nå teste animasjonen din ved å gå til Meny> Kontroll> Spill av. Du bør ha en voksende og fading MovieClip.
Trinn 4: Kopier animasjonen
Nå er vi klare til å kopiere vår tidslinje animasjon og kode vår klasse.
Kontroller at alle rammene er uthevet ved hjelp av teknikken ovenfor. Høyreklikk deretter tweenen på tidslinjen, og velg "Kopier bevegelse som ActionScript 3.0". I spørringen som kommer opp, gi den forekomstnavnet "GrowFade"
Kopier koden som vises på utklippstavlen.
Trinn 5: Koding av klassen
Opprett en ny ActionScript-fil ved å gå til Meny> Fil> Ny og deretter velge ActionScript-fil.
Her åpner vi vår pakke og gjør litt import. Animator-klassen er det som brukes til å gjøre animasjonen i vår klasse. Funksjonen growAndFade () er der vi vil lime inn den kopierte ActionScript fra trinnet ovenfor. Vi gjør dette neste.
Inne i growAndFade () funksjon lime inn ActionScript. Hvis du trenger å kopiere det igjen, følg bare trinnene ovenfor og sørg for at du gir den forekomstnavnet "GrowFade".
De growAndFade funksjonen burde nå se noe ut som dette
pakke offentlig funksjon growAndFade (): void import fl.motion.Animator; var GrowFade_xml: XML = ; var GrowFade_animator: Animator = ny animator (GrowFade_xml, GrowFade); GrowFade_animator.play ();
Vi må utføre noe opprydding på dette.
Først må vi fjerne importoppgaven siden vi allerede har gjort dette i begynnelsen av klassen.
Neste vil vi forklare GrowFade_animator som en lokal variabel til klassen, så flytter vi det til toppen og instantierer det innenfor growAndFade fungere som slik: GrowFade_animator = ny animator (GrowFade_xml, dette)
Du har kanskje lagt merke til at vi også har endret den andre parameteren til dette. Grunnen til at vi gjorde dette er at vi kan bruke denne klassen på noen MovieClip; hvis vi ikke hadde endret det til dette så vil kun klasser med forekomstnavnet "GrowFade" kunne bruke denne klassen.
Her er den komplette klassen med de nye endringene og ett lite tillegg. Vi vil diskutere dette tillegget neste.
pakke import flash.display.MovieClip; importere fl.motion.Animator; offentlig klasse GrowFade utvider MovieClip var GrowFade_animator: Animator offentlig funksjon GrowFade () // constructor code offentlig funksjon growAndFade (): void import fl.motion.Animator; var GrowFade_xml: XML = ; GrowFade_animator = ny animator (GrowFade_xml, dette); GrowFade_animator.play (); // Hvor mange ganger å gjenta animasjonen 0 = for alltid GrowFade_animator.repeatCount = 0;
Du vil legge merke til vi la til repeatCount eiendom. Innstillingen spesifiserer hvor mange ganger du vil gjenta animasjonen. Setter den til null betyr at den vil gjenta for alltid.
Trinn 6: Sette opp MovieClips
Tilbake i FLA, slett sirkelen fra scenen og fjern alle rammene fra tidslinjen.
I biblioteket høyreklikker du på sirkel filmklipp og velg "Egenskaper".
Gi sirkelen Klassenavnet "Sirkel" og sett grunnklassen til "GrowFade"; fordi GrowFade-klassen utvider MovieClip, kan vi bruke den som Base Class of the Circle. Vi har ikke opprettet en sirkelklasse, men fordi vi har angitt GrowFade som baseklassen, vil Flash automatisk lage en klasse for sirkelen som utvider GrowFade, når SWF er opprettet. Slik kan vi bruke så mange filmklipp som vi ønsker, alle deler GrowFade-klassen.
Deretter tegner du et blått rektangel på scenen.
I Egenskapspanelet gir dette rektangel følgende egenskaper:
W: 83,00
H: 30:00
Høyreklikk på rektangelet og velg "Konverter til symbol"; gi det navnet torget.
Slett rektangelet fra scenen. I biblioteket, høyreklikk på kvadratet MovieClip. Velg "Egenskaper" og gi det klassenavnet "Square" og sett grunnklassen til "GrowFade" som vi gjorde med sirkelen over.
Trinn 6: Bruk av klassen til filmklippet
Opprett en ny ActionScript-fil, og legg til følgende kode for det:
pakke import flash.display.MovieClip; offentlig klasse Main utvider MovieClip var sirkel: sirkel; var firkantet: kvadrat; offentlig funksjon Hoved () sirkel = ny sirkel (); circle.x = 50 circle.y = 50; addChild (sirkel); circle.growAndFade (); square = new square; square.x = 200; square.y = 50; addChild (firkant); square.growAndFade ();
Fordi vi setter baseklassen til sirkelen og torget til GrowFade, kan vi ringe til growAndFade () metode på dem.
Sett filmens dokumentklasse til Main og test filmen. Du bør ha to separate filmklipp med samme GrowAndFade-animasjon.
Konklusjon
Å kunne kopiere tidslinje animasjon er et flott tillegg til Flash. Uansett hvor komplisert en animasjon du kommer opp med, kan Flash håndtere det for deg, og det er en stor tidsbesparende å kunne dele samme animasjon over mange forskjellige filmklipp..
Jeg håper du har hatt denne opplæringen, takk for å lese!
Share
Accentsconagua
