En introduksjon til tweening med Action 3.0

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:.

  • Hva er en tween?

    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
    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".

  • Den tredje parameteren er overgangen som tween vil bruke. En overgang gir oss mer kontroll om hvordan tween vil animere egenskapen (f.eks.) At det gradvis raskere. Vi vil diskutere overganger i neste trinn.
  • Den fjerde parameter er den verdien som eiendommen starter kl. Hvis vi skulle visne noe i, så alfa starter på 0 (ellers ville vi allerede se plassen).
  • Den femte parameter er den verdien som eiendommen ender med. Vi falming vår torget i, så på slutten alfa vil være en (1 alpha = 100% opacity).
  • Den sjette parameter er varigheten av tween. Dette kan være i rammer, eller i løpet av sekunder. Som standard varigheten er målt i rammer.
  • Den syvende og siste parameter er en boolsk. Dette boolsk definerer hvis vi ønsker å bruke sekunder som måling av varighet. Hvis det er sant, så varigheten er målt i sekunder. Som standard er dette parameter er falsk


    Trinn 4:. Transitions

    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:
    < 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.

  • Sterk
    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

    Så hva gjør du hvis du don ' t vil gradvis akselerere, men gradvis avta? Alle overgangs klasser har tre funksjoner:

    easeIn
    overgangen påvirker eiendommen i begynnelsen

    easeOut
    overgangen påvirker eiendommen på slutten.

    easeInOut
    overgangen påvirker eiendommen på begynnelsen og slutten.

    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



    Trinn 6:. Vår første 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
    //importere Tween classimport fl.transitions.Tween;. //Importere transitionsimport fl.transition.easing. *;

    Etterpå opprette en variabel som heter tween, av type Tween
    //importere Tween classimport fl.transitions.Tween; //importere transitionsimport fl.transition.easing *; //skape en VAR tweenvar tween:.. Tween;

    Nå sende parameterne til konstruktøren. Verdiene for våre parametere er:

    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

    Vår koden vil se slik ut:..
    //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);

    Hvis du tester flash filmen (Control > Test Movie), vil du se følgende:



    Trinn 7: Forstå vår App

    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
    . 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

    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.
    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.

    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



    Trinn 9:. Legge tilstelninger Lyttere

    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 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

    Når tweenButton
    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

    Når resetButton
    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

    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!



    Trinn 13: Vent, det er mer

    Selvfølgelig , å vite hvordan du tween er ikke nok. Vi trenger fortsatt å diskutere følgende:.

  • Hvordan tween flere eiendommer

    Hvordan lage kjeder av tweens

    Hvordan har en forsinkelse før dine tweens. .

    Tredjeparts tweening klassene.

    Alle de følgende eksempler vil bli gjort med et filmklipp, med en forekomst navn torget
    .
    < hr>
    Trinn 14: Starter Verdi

    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
    //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

    tweening flere eiendommer er veldig enkelt å gjøre, bare bruke konstruktøren flere ganger
    //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

    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
    . 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 ();}

    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



    Trinn 17:. Tweens med Delay

    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
    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

    Tween klasse har ganske mange metoder, for eksempel yoyo funksjon
    gjør tween spille i revers. Så se på dokumentasjonen om Tween klassen



    Trinn 19:. Tredjeparts tweening Classes

    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:..

  • er utviklingstiden mye raskere

    innsetting skjer mye mer effektivt enn Tween klassen. Ytelsen vil vanligvis bli bedre når du bruker tredjeparts klasser

    Cons:.

  • Som disse klassene ikke er bygget inn, må du importere dem. Dette tar plass og din flash prosjektet vil trenge å laste mer (Gjør oppmerksom på at tiden disse klassene er ekstremt
    liten.
  • gjøre noen klasser ikke har en god dokumentasjon.

    De mest brukte tredjeparts tweening klassene er:

    Tweener

    TweenLite

    GTween

    Tweensy

    Jeg vil ikke diskutere hvordan du bruker hver klasse, bare sjekk linkene og finne ut hva som fungerer best for deg.



    Takk

    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?