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 
 
			 
        

