An Introduksjon til Tweening med Actionscript 3.0
5
Del
674
Del
Dette Cyber Mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Flash er kjent for å levere rike interaktive opplevelser med mye "eye-candy". Ofte er dette eye-candy oppnås ved hjelp av animasjon og Flash har stor animere evner. I denne opplæringen vil vi diskutere tweening; Flash automatiserte animasjon
Innledning
I denne opplæringen vil jeg diskutere følgende:.
Bruke Tween klassen
Tips &.; triks for bruk av Tween klassen
Tredjeparts tweening klassene
Trinn 1:..? Hva er en Tween
Wikipedia forklarer tweening som følgende :
Inbetweening eller tweening er prosessen med å generere mellomliggende frames mellom to bilder for å gi inntrykk av at det første bildet utvikler seg greit inn det andre bildet. Inbetweens er tegningene mellom nøkkelbildene som bidrar til å skape en illusjon av bevegelse. Inbetweening er en viktig prosess i alle typer animasjon, inkludert dataanimasjon.
De fleste, som noensinne har brukt Flash, har møtt en tween før. Siden tidlig på begynnelsen av Flash, har det vært muligheten til å tween ved hjelp av tidslinjen.
Vi vil ikke diskutere hvordan lom bruker tidslinjen, vil vi diskutere hvordan lom bruker Actionscript 3.0!
Trinn 2: Tween Class
Tween klassen er den klassen som håndterer all animasjonen, og kan animere alle eiendommer som har en tallverdi. Disse egenskapene kan være:
x posisjon
y posisjon
alpha (opacity)
etc
Selv om Tween klassen er mest brukt til å animere visningsobjekter (objekter som kan sees), kan du bruke det like effektivt å tween (for eksempel) volumet av en lydkanal.
Trinn 3: Syntax av Tween Class
Konstruktøren av Tween klassen er ganske lang, men ikke bekymre deg, det er veldig enkelt
Var tween. Tween = new Tween (obj: Object, prop: String, func: Funksjon, begynner: Number, finish: Antall, varighet: Antall, useSeconds: Boolean = false)
La oss gå gjennom parametrene én etter én. Vi ønsker å visne i et filmklipp som heter torget Transitions har allerede blitt nevnt i trinn 3, men la oss gå mer i detalj. En overgang er en funksjon som beskriver hvordan en eiendom går mot en sluttverdien. . Disse overgangene kan også skape visse effekter, for eksempel en sprett, eller en elastisk effekt Det er massevis av overganger, og de har blitt delt inn i flere klasser som følger: Så hva gjør du hvis du don ' t vil gradvis akselerere, men gradvis avta? Alle overgangs klasser har tre funksjoner: Disse overgangene kan være tegnet som en funksjon (og med funksjon jeg mener en matematisk funksjon, en linje). Se på denne overgangen jukselapp for å få en idé om hva hver overgang gjør. Noen av overgangene ikke har blitt nevnt, er dette fordi disse overgangene er fra Tweener klassen, som jeg skal nevne i trinn 18. Bare prøv demoen og sjekke hvordan hver overgang påvirker en eiendom. Dette er den beste måten å få en idé om hva overganger gjøre til et tween Så la oss nå endelig få til å fungere! Vi kommer til å lage vår aller første tween. Tegn en firkant og konvertere den til et filmklipp, etterpå gir det en forekomst navn torget Nå som vi har vår filmklipp, la oss lage en tween! Først må vi importere de nødvendige klassene, fordi disse ikke er importert under kjøring Etterpå opprette en variabel som heter tween, av type Tween Nå sende parameterne til konstruktøren. Verdiene for våre parametere er: Vår koden vil se slik ut:.. Hvis du tester flash filmen (Control > Test Movie), vil du se følgende: Nå er det på tide å bygge vår demo. Som denne opplæringen handler om tweening, vil jeg ikke diskutere hvordan å lage grensesnitt, bare åpne step7.fla, som ligger i kildefilene. Før vi begynner å skrive en linje med kode, la oss se hvordan filen er bygget. Det er 4 lag: Handlinger, UI, Kanin og BG. Vi skal skrive all koden vår i laget Handlinger En god praksis er å først erklære alle de (Global) variabler som vi vil bruke. Koden har vært tungt kommentert, for å gi deg en idé om hva hver variabel gjør Red.anm. Som du kanskje har lagt merke til, bruker vi en to-dimensjonal array. Hvis du ikke ennå så erfaren med Arrays, sjekk Dru Kepple er utrolig tutorial om arrays - AS3 101: Arrays. Denne to-dimensjonal array inneholder alle mulige overganger Selv om vi har knapper, må vi legge hendelsen lyttere, ellers våre knapper vant ' t gjøre noe. Hvis du ikke forstår hvordan hendelsen lyttere fungere, eller ønsker å lære om hendelsen rammeverk, sjekk min andre tutorial ta en nærmere titt på Actionscript 3.0 Hendelseswork. Når tweenButton Når resetButton Hvis du gjorde alt riktig, så vil du ha lykkes bygget demoen. Gratulerer, du gjorde det Last ned hele koden og beundre alt det vi har skrevet! Selvfølgelig , å vite hvordan du tween er ikke nok. Vi trenger fortsatt å diskutere følgende:. Alle de følgende eksempler vil bli gjort med et filmklipp, med en forekomst navn torget Noen ganger er det fint å sette en startverdi for en tween, men de fleste ganger du ønsker å tween fra objektets nåværende posisjon. Bare bruk objektets eiendom som startverdien tweening flere eiendommer er veldig enkelt å gjøre, bare bruke konstruktøren flere ganger En kjede av tweens er at det er flere tweens, hver og en start når den forrige er ferdig. Vi må gjøre dette ved hjelp av hendelsen TweenEvent.MOTION_FINISH Du kan også bruke den hendelsen TweenEvent.MOTION_FINISH til andre formål enn å lage en kjede av ting tweens. Tenk på en flash område, etter at en side er tweened, vil en funksjon kalles, som vil laste teksten som skal vises Opprette en tween med en forsinkelse er svært lik til å skape en kjede av innsatte former. Vi bruker en timer, og når arrangementet TimerEvent.TIMER Tween klasse har ganske mange metoder, for eksempel yoyo funksjon Noen ganger Tween klassen er nok for prosjektet, men bruker Tween klassen kan være ganske problemfritt hvis du kommer til å tween mye av eiendommer, har mye forsinkelser etc. Heldigvis er det flere (gratis) tredjeparts klasser, som har mye mer avanserte tweening evner. La oss se på fordeler og ulemper med å bruke en tredjepart klasse Proffene:.. Cons:. De mest brukte tredjeparts tweening klassene er: Jeg vil ikke diskutere hvordan du bruker hver klasse, bare sjekk linkene og finne ut hva som fungerer best for deg. Takk for at du leser denne opplæringen., jeg håper det har gitt deg en grundig forståelse av hvordan du bruker Tween klassen. Det var en glede å skrive for Flashtuts +! Hvorfor ikke følge meg på Twitter,DanielApt?
som et eksempel. OK, la oss gjøre dette:
Den første parameteren er objektet som vi skal tweening, kan dette være et filmklipp som heter kvadrat
Den andre parameteren er eiendommen som. vi vil være tweening. Denne eiendommen må være en streng, så hvis vi tweening alfa av vår square vi skulle bruke "alpha".
Trinn 4:. Transitions
< li> Tilbake
overgangene gjøre objektet gå tilbake, før innsetting til sluttverdien. Tenk på en katapult, den starter på 0, trekker tilbake
til -20 og etterpå skyter frem til 200.
Bounce
overgangene gjøre objektet sprett .
Elastisk
overgangene gjøre objektet synes elastisk.
Ingen
overgangene gjør ingenting, når eiendommen sluttverdi i en konstant bevegelse.
Vanlig
overgangene har en liten bygge opp til en konstant hastighet. Tenk på en bil, må det først akselerere før de kommer til hastighet.
overgangene har en mye større bygge opp til en konstant hastighet. Tenk på en romferge, det også akselererer, men for mye lenger
Trinn 5:. EaseIn, easeOut og easeInOut
easeIn
overgangen påvirker eiendommen i begynnelsen
easeOut
easeInOut
overgangen påvirker eiendommen på begynnelsen og slutten.
Trinn 6:. Vår første Tween
.
//importere Tween classimport fl.transitions.Tween;. //Importere transitionsimport fl.transition.easing. *;
//importere Tween classimport fl.transitions.Tween; //importere transitionsimport fl.transition.easing *; //skape en VAR tweenvar tween:.. Tween;
Objektet vi tweening er firkantet
Eiendommen vi tweening er x
Overgangen funksjon vi.. vil være med er: Regular.easeInOut
startposisjon firkanten vil være 0.
Den sluttplassering av firkanten vil være 400.
tween vil vare. 1,5 sekunder
Så det betyr at useSeconds vil være sant
//importere Tween classimport fl.transitions.Tween; //importere transitionsimport fl.transitions.easing *; //skape en VAR tweenvar tween. Tween = new Tween (firkantet, "x", Regular.easeInOut, 0, 400, 1,5, true);
Trinn 7: Forstå vår App
. Grensesnittet lag har alle våre brukergrensesnittkomponenter. Ta en god titt på alle de eksempel navnet på alle komponentene. Kaninen laget inneholder et filmklipp med forekomstnavnet kanin
, vil vi tweening dette filmklippet. BG lag bare inneholder en bakgrunn, som vil rett og slett ikke gjøre noe. Vi har må gi vår herlige kaninen et fint sted hvor han kan gjøre hva han vil til, rett
Trinn 8: Erklærte Variabler
Jeg er redd Action i dette trinnet er årsaken vår syntax highlighter til turen Firefox opp (dette skjer noen ganger, og jeg har ingen anelse om hvorfor). For nå er det best du laste det ned å ta en titt. Beklager det inntrufne.
Trinn 9:. Legge tilstelninger Lyttere
//Når tweenButton klikkes, begynne å animere (brann funksjon animere) tweenButton.addEventListener (MouseEvent.CLICK, animere); //når resetButton klikkes, tilbakestille alle egenskapene til kanin (fyre av reset-funksjon) resetButton.addEventListener (MouseEvent.CLICK, reset);
Trinn 10: Opprette Animate Function
klikkes, vil vi begynne å animere. For å gjøre dette, må vi utføre mange oppgaver:
Hent alle verdiene fra alle komponenter
Angi riktige verdier for transitionPos Hotell og <. em> easePos
.
Angi overgangen riktig funksjon fra overganger array.
Gjør tween kaller sin konstruktør og tween kanin.
//kalles av hendelse lytteren festet til tweenButtonfunction animere (event: MouseEvent): void {//hente tidsverdien fra timeBox tid = timeBox.value; //hente begynne verdien fra beginBox beginValue = beginBox.value; //hente sluttverdien fra endBox endValue = endBox.value; //hente eiendommen fra propertyBox eiendom = propertyBox.value; //satt overgang til riktig verdi bryteren (transitionBox.value) {case "Back": transitionPos = 0; gå i stykker; case "Bounce": transitionPos = 1; gå i stykker; case "Elastic": transitionPos = 2; gå i stykker; case "Ingen": transitionPos = 3; gå i stykker; case "Regular": transitionPos = 4; gå i stykker; case "Strong": transitionPos = 5; gå i stykker; } //Satt letthet til riktig verdi bryteren (easeBox.value) {case "easeIn": easePos = 0; gå i stykker; case "easeOut": easePos = 1; gå i stykker; case "easeInOut": easePos = 2; gå i stykker; } //Satt overgang til den nøyaktige overgang i overganger rekke overgangs = overganger [easePos] [transitionPos]; //tween! tween = new Tween (kanin, eiendom, overgang, beginValue, endValue, tid, true);}
Trinn 11: Lage tilbakestillingsfunksjonen
klikkes ønsker vi å nullstille alle egenskapene til kanin
. Dette er heldigvis mye enklere enn å lage animere funksjon reset
funksjon (event: MouseEvent): void {//stille alle egenskapene til kanin rabbit.alpha = START_ALPHA;. rabbit.x = START_X; rabbit.y = START_Y; rabbit.rotation = START_ROTATION; rabbit.scaleX = START_SCALEX; rabbit.scaleY = START_SCALEY; rabbit.width = START_WIDTH; rabbit.height = START_HEIGHT;}
Trinn 12: Feel stolt av deg selv
Trinn 13: Vent, det er mer
Hvordan lage kjeder av tweens
Hvordan har en forsinkelse før dine tweens. .
Tredjeparts tweening klassene.
.
< hr>
Trinn 14: Starter Verdi
//import nødvendig classesimport fl.transitions.Tween, import fl.transitions.easing *; Var tween:.. Tween = new Tween (firkantet, "alpha", square.alpha , 0,75, 1, true);
Trinn 15:. flere eiendommer
//import nødvendig classesimport . fl.transitions.Tween, import fl.transitions.easing *; Var tween: Tween; tween = new Tween (firkantet, "x", Regular.easeOut, 0, 400, 1,5, true); tween = new Tween (firkant "y", Elastic.easeOut, 30, 200, 3,5, true); tween = new Tween (firkantet, "rotasjon", Bounce.easeOut, 0, 90, 3, true);
Trinn 16 : Chain of Tweens
. Denne hendelsen oppstår når en tween ferdig tweening
//import nødvendigste ting classesimport fl.transitions.Tween, import fl.transitions.easing *; import fl.transitions.TweenEvent; //oppretter tweensvar tween1:.. Tween = new Tween (square, "x", Strong.easeInOut, 0, 400, 1,5, true); Var tween2: Tween = new Tween (firkantet, "y", Bounce.easeOut, square.y, 200, 1, true); Var tween3: Tween = new Tween (firkantet, "alpha", None.easeNone, square.alpha, 0, 2, true); //hindre tween2 og tween3 å starte tweeningtween2.stop (); tween3.stop (); //legge hendelsen lyttere til tween1 og tween 2tween1.addEventListener (TweenEvent.MOTION_FINISH, startTween2); tween2.addEventListener (TweenEvent.MOTION_FINISH, startTween3); //skape funksjonene startTween2 og startTween3function startTween2 (event: TweenEvent): void {//gjør tween2 starte tween2.start ();} funksjon startTween3 (event: TweenEvent): void {//gjør tween3 starte tween3.start ();}
Trinn 17:. Tweens med Delay
skjer, så tween vil starte
//import nødvendigste ting classesimport fl.transitions.Tween;. Import fl.transitions.easing *.; //skaper vår timervar timer: Timer = new Timer (3000); //starte timertimer.start (); //skaper vår tweenvar tween: Tween = new Tween (firkantet, "x", Strong.easeInOut, firkantet. x, 300, 2, true); //hindre tween fra umiddelbart tweeningtween.stop (); //legge til en hendelse lytteren til timertimer.addEventListener (TimerEvent.TIMER, startTween); //oppretter funksjonen startTweenfunction startTween (event: Timerevent ): void {//gjør tween starte tween.start ();}
Trinn 18: Sjekk dokumentasjonen
gjør tween spille i revers. Så se på dokumentasjonen om Tween klassen
Trinn 19:. Tredjeparts tweening Classes
innsetting skjer mye mer effektivt enn Tween klassen. Ytelsen vil vanligvis bli bedre når du bruker tredjeparts klasser
liten.
Tweener
TweenLite
GTween
Tweensy
Takk