Quick Tips: Kopiere Tidslinje Animation inn i en klasse
Del
Del
Del
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil vi bruke tidslinjen animasjon for å lage en egendefinert klasse. Vi vil da bruke klassen på to forskjellige og distinkte movieclips, effektivt duplisere animasjonen til disse symbolene.
kort oversikt
En av de nye funksjonene som kom sammen i Flash CS3, sammen med Actionscript 3, var muligheten til å kopiere tidslinje animasjon som AS3 kode. I denne opplæringen vil vi være å skape en egendefinert klasse som kan brukes på alle filmklipp du velger. Den resulterende klassen er for det meste XML-basert og er ikke noe du ønsker å skrive for hånd - vel, ikke med mindre du er opp for mye hardt arbeid og frustrasjon!
I eksempelet SWF ovenfor er vi bare vokser og falming de movieclips, men du kan ha en svært kompleks animasjon og det ville kopiere over til Action like well.The beste med å kopiere tidslinje animasjon inn i en klasse er gjenbruk. Du kan se at de to symbolene som følger nøyaktig samme mønster av animasjon
Trinn 1:. Klardokument
Åpne en ny Flash dokument og angi følgende egenskaper
Dokumentstørrelse: 400x200px
Bakgrunnsfarge: #FFFFFF
Trinn 2: Sette opp MovieClip
Fra Verktøy Panel velge Oval Tool og tegne en grønn sirkel på scenen. Du kan holde nede Skift-tasten mens du flytter sirkelen ut til formen samsvare med en sirkel og ikke en utvidet ellipse.
I Egenskaper-panelet gir sirkelen følgende dimensjoner
W: 27.00
H: 27.00
Høyreklikk på sirkelen du nettopp opprettet, og velg "Konverter til Symbol". Skriv inn sirkel Pass på at du fortsatt er på ramme 60 og i Verktøy Panel bruke Free Transform verktøyet for å dra sirkelen til omtrent to ganger sin opprinnelige størrelse. Pass på at du fortsatt er på ramme 60 på sirkelen MovieClip. I panelet Egenskaper velge "Color Effect". I stil nedtrekk velg "Alpha" og sett den til 0%. Klikk på laget at sirkelen er på å sørge for at alle rammer er uthevet. Alternativt kan du klikke på det første bildet deretter Skift-klikk på den siste rammen for å sørge for at alle rammer er uthevet. Deretter høyreklikker du hvor som helst mellom de markerte rammer og velg "Create Classic Tween" Du kan nå teste animasjonen ved å gå til Meny >.; Control > Spill Nå er vi klare til å kopiere vår tidslinje animasjon og kode klassen vår Sørg for at alle rammer er markert ved hjelp av teknikken ovenfor. Deretter høyreklikker du på tween i tidslinjen og velg "kopier Motion Som Actionscript 3.0". I meldingen som kommer opp, gi den forekomsten navnet "GrowFade" Kopier koden som vises på utklippstavlen Legg til følgende kode i det nye AS-filen. Her åpner vi vår pakke og gjøre noen import. The Animator klassen er det som brukes til å gjøre animere i klassen vår. Funksjonen growAndFade () er hvor vi skal lime inn den kopierte Action fra trinnet over. Vi gjør dette neste. Inne i growAndFade () -funksjonen lim Actionscript. Hvis du trenger å kopiere det igjen bare følge trinnene ovenfor og sørge for at du gir den forekomsten navnet "GrowFade". growAndFade funksjonen skal nå se omtrent slik ut Vi trenger å utføre noen oppryddingsarbeidet på denne Først må vi fjerne import uttalelse siden vi allerede har gjort dette i begynnelsen av klassen. Neste vi vil ønske å erklære GrowFade_animator som en lokal variabel til klassen, så vi flytte det til toppen og instantiate det innenfor growAndFade funksjon slik: GrowFade_animator = new Animator (GrowFade_xml, dette) Du har kanskje merket vi også endret den andre parameteren til dette. Grunnen til at vi gjorde dette er, slik at vi kan bruke denne klassen på noen MovieClip; hvis vi ikke hadde endret det til dette da kun klasser med forekomstnavnet "GrowFade" ville være i stand til å bruke denne klassen. Her er den komplette klasse med de nye endringene og ett lite tillegg. Vi vil diskutere dette tillegg neste Du vil merke vi lagt repeatCount eiendommen. Sette dette angir hvor mange ganger for å gjenta animasjon. Sette den til null betyr at det vil gjenta evig Tilbake i FLA, slette sirkelen fra scenen og fjerne alle rammer fra tidslinje. I biblioteket, høyreklikk på sirkel Gi sirkelen klassenavnet "Circle" og sett Base Class til «GrowFade"; fordi GrowFade klassen strekker MovieClip vi kan bruke det som Base Class of the Circle. Vi har ikke laget en sirkel klasse, men fordi vi kom inn GrowFade som Base Class, vil Flash automatisk opprette en klasse for Circle som strekker GrowFade, når SWF er opprettet. Dette er hvordan vi er i stand til å bruke så mange filmklipp som vi ønsker, alle deler GrowFade klassen. Neste, tegne en blå firkant på scenen. I Egenskaper-panelet gir dette rektangel følgende egenskaper: Høyreklikk på rektangelet og velg "Konverter til Symbol"; gi den navnet torget Slett rektangelet fra scenen. I biblioteket, høyreklikk på torget MovieClip. Velg "Properties" og gi den klassen navnet "Square" og sett Base Class til «GrowFade" som vi gjorde med sirkelen ovenfor Opprett en ny Actionscript-fil, og legge til følgende kode i det: Fordi vi satt base klassen av sirkelen og firkanten til GrowFade, kan vi kalle det growAndFade () metoden på dem. Sett filmens dokumentet klasse til hoved og teste filmen. Du bør ha to separate filmklipp som bruker samme GrowAndFade animasjon. Å kunne kopiere tidslinje animasjon er et flott tillegg til Flash. Uansett hvor kompleks en animasjon du kommer opp med, kan Flash håndtere det for deg, og å kunne dele den samme animasjonen over mange forskjellige filmklipp er et enormt tidsbesparende. Jeg håper du har hatt denne opplæringen takk for lesing!
som navnet og sørge for at Type er satt til Movie Clip
Trinn 3:. Legge animasjons til MovieClip
< p> På tidslinjen, høyreklikker du på ramme 60 og velg "Insert keyframe".
. Du bør ha en voksende og falming MovieClip
Trinn 4:.. Kopiering animasjons
Trinn 5:. Coding klasse
< p> Opprett en ny Actionscript-fil ved å gå til Meny > Fil > New Hotell og deretter velge Action File
Pakke {import flash.display.MovieClip; import fl.motion.Animator; public class GrowFade strekker MovieClip {var GrowFade_animator: Animator; offentlig funksjon GrowFade () {//konstruktør kode} offentlig funksjon growAndFade (): void {}}}
pakken {offentlig funksjon growAndFade () : void {import fl.motion.Animator; Var GrowFade_xml:; ". fl.motion *": ". flash.geom *" XML = < Motion varighet = "60" xmlns = xmlns geom = xmlns: filtre = "flash. filtre * ">. < kilde > < Kilde framerate = "24" x = "167,5" y = "116,5" scaleX = "1" Scaley = "1" rotasjon = "0" element = "filmklipp" symbolName = "circle" > < dimensjoner > < geom: rektangel igjen = "0" top = "0" width = "27" height = "27" /> < /dimensjoner > < transformationPoint > < geom: Point x = "0.5" y = "0.5" /> < /transformationPoint > < /Source > < /kilde > < Keyframe index = "0" tweenSnap = "true" > < tweens > < SimpleEase lette = "0" /> < /tweens > < /nøkkel > < Keyframe index = "59" tweenSnap = "true" scaleX = "2,407" Scaley = "2.63" > < farge > < Color alphaMultiplier = "0" /> < /farge > < tweens > < SimpleEase lette = "0" /> < /tweens > < /nøkkel > < /Motion >; Var GrowFade_animator. Animator = new Animator (GrowFade_xml, GrowFade); GrowFade_animator.play ();}
pakke {import flash.display.MovieClip, import fl.motion.Animator; public class GrowFade strekker MovieClip {var GrowFade_animator. Animator offentlig funksjon GrowFade () {//konstruktør kode} offentlig funksjon growAndFade (): void {import fl.motion.Animator; Var GrowFade_xml: XML = < Motion varighet = "60" xmlns = ". fl.motion *" xmlns: geom = ". flash.geom *" xmlns: filtre = " flash.filters * ">., < kilden > < Kilde framerate = "24" x = "167,5" y = "116,5" scaleX = "1" Scaley = "1" rotasjon = "0" element = "filmklipp" symbolName = "circle" > < dimensjoner > < geom: rektangel igjen = "0" top = "0" width = "27" height = "27" /> < /dimensjoner > < transformationPoint > < geom: Point x = "0.5" y = "0.5" /> < /transformationPoint > < /Source > < /kilde > < Keyframe index = "0" tweenSnap = "true" > < tweens > < SimpleEase lette = "0" /> < /tweens > < /Keyframe > < Keyframe index = "59" tweenSnap = "true" scaleX = "2,407" Scaley = "2.63" > < farge > < Color alphaMultiplier = "0" /> < /farge > < tweens > < SimpleEase lette = "0" /> < /tweens > < /Keyframe > < /Motion >; GrowFade_animator = new Animator (GrowFade_xml, dette), GrowFade_animator.play (); //Hvor mange ganger for å gjenta animasjonen 0 = foreverGrowFade_animator.repeatCount = 0; }}}
Trinn 6:. Sette opp movieclips
filmklipp og velg "Properties".
W: 83.00
H: 30:00
.
Trinn 6:. Anvendelse av klasse til Filmklipp
pakke {import flash.display.MovieClip; public class Hoved strekker MovieClip {var sirkel: Circle; Var torget: Square; offentlig funksjon main () {sirkel = new Circle (); circle.x = 50 circle.y = 50; addChild (sirkel); circle.growAndFade (); square = new Square; square.x = 200; square.y = 50; addChild (firkant); square.growAndFade (); }}}
Konklusjon