TimelineLite Ultimate Starter Guide Styrning av uppspelning

I föregående session gick jag över hur man skapar en grundläggande TimelineLite. Idag visar jag vilka metoder och egenskaper du ska använda för att styra uppspelningen av din TimelineLite. Genom att kombinera dessa metoder och egenskaper kan du förlänga den inbyggda funktionaliteten i TimelineLite för att skapa snabbspolning och spela / pausa växlingskontroller. Jag visar också hur lätt det är att skapa en Slider-komponent som ska användas som TimelineLite-skrubber.

TimelineLite in Action

Låt oss ta en titt på det slutliga resultatet vi ska arbeta för:

Du kan hitta alla filer som används för att skapa SWF ovan i källfilerna för denna handledning.

Titta på Screencast

TimelineLite uppspelningsmetoder

Följande metoder ger dig exakt kontroll över uppspelningen av din TimelineLite

spela() -Börjar spela framåt från den aktuella positionen.
paus() - Stoppar tidslinjen.
omvänd() - Gör tidslinjen gå bakåt. Om du bara vill vända tidslinjens riktning och inte fortsätta uppspelning i omvänd riktning kan du passera i en forceResume-parameter för falsk - dvs. omvänd (falsk).
återuppta() - Börjar spela från den aktuella positionen utan att ändra riktning (framåt eller bakåt).
omstart() - Spelar tidslinjen från början

Anpassade uppspelningskontroller

Genom att kombinera de inbyggda metoderna och egenskaperna är det enkelt att skapa avancerad funktionalitet:

Snabbspola - Du kan skapa en snabbspolningskontroll genom att öka tidsskala egenskap och tvinga uppspelning i framåtriktning.

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

Spela / Pausa Växla - För att växla mellan de spelande och pausade tillstånden negerar du bara pausas fast egendom. Det är viktigt att se till tidsskala och omvänd Egenskaperna är inställda på normala värden, eftersom de kan ändras med respektive framåt och bakåt-knapparna.

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

Slider Component Scrubber - Slider-komponenten gör det ganska lätt att skrubba genom tidslinjen genom att ändra nuvarande framsteg av tidslinjen. Slider är inställd på utgångsvärden mellan 0 och 100. I koden blir detta värde omvandlat till ett tal mellan 0 och 1.

 importera fl.controls.Slider; importera fl.events.SliderEvent; slider.addEventListener (SliderEvent.THUMB_DRAG, sliderChange); privatfunktionsreglagetÄndra (e: SliderEvent): void tl.currentProgress = slider.value * .01; // tvingar tidslinjen att sluta när skrubbaren släpps. tl.pause ();

Läxa

Vad? Du ger mig läxor? ja! Jag vill att du ska vara ditt bästa. Flex din hjärnan med denna lilla utmaning.

Skapa en TimelineLite som animerar sex saker
Skapa uppspelning, paus och omvänd knappar som i demoversikten ovan
Skapa knappar med sammansatt funktionalitet som snabbspolning och långsam framåtriktning

För att verkligen lära sig detta material är inget bättre än att dyka i och få händerna lite smutsiga.

Slutsats

Hittills har jag gett dig en hel del information om hur man skapar och kontrollerar TimelineLite-animationer. Även om det finns några uppenbara likheter i hur du kontrollerar TimelineLite och Flash IDE tidslinjeanimationer, älskar jag verkligen hur TimelineLite ger animatörer så mycket mer kontroll med omvänd(), omstart(), och återuppta() metoder. De tidsskala och nuvarande framsteg egenskaper öppnar några riktigt intressanta möjligheter som kommer att diskuteras ännu mer i framtiden.

I nästa video kommer jag att visa dig hur man lägger till etiketter i TimelineLite-instanser så att du enkelt kan navigera till vissa delar av dina tidslinjer. TimelineLite-etiketter fungerar på samma sätt som rammärken i Flash IDE men med lite extra funktionalitet. Det kommer att bli mycket roligt.

Om du har några frågor eller kommentarer till denna handledning - eller dina läxor;) - var god att skicka en kommentar nedan.

Tack för att du tittade!

Koda