TimelineLite Ultimate Guide Starter: Styre avspilling
Del
Del
3
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I forrige økten gikk jeg over hvordan å skape en grunnleggende TimelineLite. I dag vil jeg vise deg de metoder og egenskaper som du vil bruke til å styre avspilling av din TimelineLite. Ved å kombinere disse metoder og egenskaper kan du forlenge den innebygde funksjonaliteten TimelineLite å skape hurtig fremover og spille /pause vippekontrollene. Jeg vil også vise deg hvor enkelt det er å sette opp en Slider komponent for å bruke som en TimelineLite skrubber.
TimelineLite in Action
La oss ta en ser på det endelige resultatet vi skal jobbe mot:
Du kan finne alle filer som brukes til å lage SWF ovenfor i kildefilene for denne opplæringen
Se Screencast <. br>
TimelineLite avspillings Metoder
Følgende metoder gi deg presis kontroll over avspilling av TimelineLite
play () -Starts spille fremover fra den aktuelle posisjonen .
pause () - Stopper tidslinjen.
reverse () - Gjør tidslinjen gå bakover. Hvis du ønsker å snu retningen av tidslinjen bare og ikke fortsette avspilling i motsatt rekkefølge du kan passere i en forceResume parameter av falsk -. Dvs. omvendt (falsk)
CV () - Starter avspilling fra gjeldende posisjon uten å endre retning (forover eller bakover)
restart (.) - Spiller av tidslinjen fra begynnelsen
Custom avspillingskontroller
Ved å kombinere innebygde metoder og egenskaper er det enkelt å lage avansert funksjonalitet.
Fast-Forward - Du kan lage en hurtig fremover kontroll ved å øke tidsskalaen eiendom og tvinge avspilling forover
privat funksjon fastForwardHandler (e: MouseEvent): void {tl.timeScale = 4; tl.play ();}
Play /Pause Toggle - For å veksle mellom å spille og pauset statene bare negere pauset eiendommen. Det er viktig å sørge for at tidsskalaen og reversert eiendommene er satt til normale verdier som de kunne endres ved hurtig fremover og bakover knappene henholdsvis
privat funksjon playPauseHandler (e: MouseEvent):. Void {resetTimeScale (); tl.reversed = false; tl.paused = tl.paused;}
Slider Component Scrubber - The Slider komponenten gjør det ganske enkelt å skrubbe gjennom tidslinjen ved å endre currentProgress av tidslinjen!. The Slider er satt til utgangsverdier mellom 0 og 100. I koden denne verdien blir konvertert til et tall mellom 0 og 1.
import fl.controls.Slider, import fl.events.SliderEvent; slider.addEventListener (SliderEvent. THUMB_DRAG, sliderChange); privat funksjon sliderChange (e: SliderEvent): void {tl.currentProgress = slider.value * 0,01; //tvinger tidslinjen for å stoppe når scrubber slippes. tl.pause ();}
Lekser
Hva? Du gir meg lekser? Ja! Jeg vil at du skal være din beste. Flex ditt sinn muskel med denne lille utfordringen.
Opprett play, pause og omvendt knapper som i demofilen ovenfor
Lag knapper med sammensatte funksjonalitet som fort bakover og sakte fremover
For å virkelig lære dette materialet ingenting er bedre enn dykking i og få hendene litt skitten.
< h2> Konklusjon
Så langt jeg har gitt deg en god del informasjon om oppretting og kontrollerende TimelineLite animasjoner. Selv om det er noen åpenbare likheter i måten du styrer TimelineLite og Flash IDE tidslinjeanimasjoner, jeg virkelig elsker hvordan TimelineLite gir animatører så mye mer kontroll med det motsatte (), restart (), og gjenoppta () metoder. Tidsskalaen og currentProgress egenskaper åpne opp noen virkelig interessante muligheter som vil bli diskutert enda mer i fremtiden.
I neste video jeg skal vise deg hvordan du legger etiketter til TimelineLite tilfeller, slik at du enkelt kan navigere til visse deler av dine tidslinjer. TimelineLite etiketter fungerer svært likt å ramme etiketter i Flash IDE, men med litt ekstra funksjonalitet. Det kommer til å bli mye moro
Hvis du har spørsmål eller kommentarer til denne opplæringen - eller lekser,.) - Gjerne legge inn en kommentar nedenfor
Takk for å se.!