TimelineLite Ultimate Starter Guide Kontrollerer avspilling

I forrige økt gikk jeg over hvordan du oppretter en grunnleggende TimelineLite. I dag vil jeg vise deg metodene og egenskapene du vil bruke til å kontrollere avspillingen av TimelineLite. Ved å kombinere disse metodene og egenskapene kan du utvide den innebygde funksjonaliteten til TimelineLite for å lage hurtigspoling og avspilling / pause veksle kontroller. Jeg vil også vise deg hvor lett det er å sette opp en Slider-komponent som skal brukes som en TimelineLite-skrubber.

TimelineLite in Action

La oss se på det endelige resultatet vi vil jobbe for:

Du kan finne alle filene som brukes til å opprette SWF ovenfor i kildefilene for denne opplæringen.

Se på Screencast

TimelineLite avspillingsmetoder

Følgende metoder gir deg presis kontroll over avspillingen av TimelineLite

spille() -Begynner å spille fremover fra gjeldende posisjon.
pause() - Stopper tidslinjen.
omvendt() - Gjør tidslinjen gå bakover. Hvis du bare vil reversere retningen til tidslinjen og ikke fortsette avspillingen i omvendt retning, kan du passere i en forceResume parameter for falsk - ie.e. omvendt (falsk).
gjenoppta() - Starter avspilling fra gjeldende posisjon uten å endre retning (fremover eller reversert).
omstart() - Spiller tidslinjen fra begynnelsen

Tilpassede avspillingskontroller

Ved å kombinere de innebygde metodene og egenskapene er det enkelt å lage avansert funksjonalitet:

Fast-Forward - Du kan opprette en hurtig fremoverkontroll ved å øke tidsskala eiendom og tvinge avspilling i fremoverretning.

 privat funksjon fastForwardHandler (e: MouseEvent): void tl.timeScale = 4; tl.play ();

Spill / Pause Skift - For å veksle mellom spill og pausede stater, nekter du bare pauset eiendom. Det er viktig å sørge for tidsskala og reversert Egenskapene er satt til de normale verdiene, da de kan endres med henholdsvis fremover og bakover-knappene.

 privat funksjon playPauseHandler (e: MouseEvent): void resetTimeScale (); tl.reversed = false; tl.paused =! tl.paused;

Slider Component Scrubber - Slider-komponenten gjør det ganske enkelt å skrubbe gjennom tidslinjen ved å endre currentProgress av tidslinjen. Skyvekontrollen er satt til utgangsverdier mellom 0 og 100. I koden blir denne verdien konvertert til et tall mellom 0 og 1.

 importere fl.controls.Slider; importere fl.events.SliderEvent; slider.addEventListener (SliderEvent.THUMB_DRAG, glidebryter) privat funksjon glidebryterEndre (e: SliderEvent): void tl.currentProgress = slider.value * .01; // tvinger tidslinjen til å stoppe når skrubberen slippes ut. tl.pause ();

Hjemmelekser

Hva? Du gir meg lekser? Ja! Jeg vil at du skal være din beste. Flekk hjernen din med denne lille utfordringen.

Opprett en TimelineLite som animerer seks elementer
Opprett spill, pause og reverser knapper som i demo-filen ovenfor
Lag knapper med sammensatt funksjonalitet som hurtigspoling og sakte fremover

For å virkelig lære dette materialet er ingenting bedre enn å dykke i og få hendene litt skitne.

Konklusjon

Så langt har jeg gitt deg en hel del informasjon om å skape og kontrollere TimelineLite-animasjoner. Selv om det er noen åpenbare likheter i måten du kontrollerer TimelineLite og Flash IDE tidslinje animasjoner, jeg virkelig elsker hvordan TimelineLite gir animatører så mye mer kontroll med omvendt(), omstart(), og gjenoppta() metoder. De tidsskala og currentProgress eiendommer åpne opp noen virkelig interessante muligheter som vil bli diskutert enda mer i fremtiden.

I neste video vil jeg vise deg hvordan du legger til etiketter i TimelineLite-forekomster, slik at du enkelt kan navigere til bestemte deler av dine tidslinjer. TimelineLite-etiketter fungerer på samme måte som rammemerker i Flash IDE, men med litt tilleggsfunksjonalitet. Det kommer til å bli mye moro.

Hvis du har spørsmål eller kommentarer til denne opplæringen - eller leksene dine;) - gjerne post en kommentar nedenfor.

Takk for at du så på!

Kode