TimelineLite Ultimate Guide Starter Controlul redării

În sesiunea anterioară am trecut peste modul de a crea o bază de date TimelineLite. Astăzi vă voi arăta metodele și proprietățile pe care le veți folosi pentru a controla redarea fișierului dvs. TimelineLite. Prin combinarea acestor metode și proprietăți, puteți extinde funcționalitatea built-in a TimelineLite pentru a crea controale de comutare rapide înainte și redare / pauză. De asemenea, vă voi arăta cât de ușor este să configurați o componentă Slider pentru a fi folosită ca o scruber TimelineLite.

TimelineLite în acțiune

Să aruncăm o privire la rezultatul final la care vom lucra:

Puteți găsi toate fișierele utilizate pentru a crea SWF de mai sus în fișierele sursă pentru acest tutorial.

Urmăriți ecranul

TimelineLite Playback Methods

Următoarele metode vă oferă un control precis asupra redării fișierului dvs. TimelineLite

Joaca() -Începe redarea din poziția curentă.
pauză() - Oprește cronologia.
inversa() - Face ca linia temporală să meargă înapoi. Dacă doriți să inversați numai direcția liniei temporale și să nu continuați redarea în direcția inversă, puteți trece într-un parametru forceResume de fals - adică. invers (fals).
relua() - Începe redarea din poziția curentă fără a modifica direcția (înainte sau invers).
repornire() - Redă linia temporală de la început

Comenzi personalizate de redare

Prin combinarea metodelor și a proprietăților încorporate, este ușor de creat funcționalitate avansată:

Repede inainte - Aveți posibilitatea să creați un control rapid înainte, prin mărirea Grafic de timp proprietate și forțând redarea într-o direcție înainte.

 funcția privată fastForwardHandler (e: MouseEvent): void tl.timeScale = 4; tl.play ();

Redare / Pauză Comutare - Pentru a comuta între starea de redare și cea întreruptă, doar anulați întrerupte proprietate. Este important să vă asigurați Grafic de timp și inversat proprietățile sunt setate la valorile normale, deoarece acestea ar putea fi modificate prin butoanele rapid înainte și respectiv invers.

 funcția privată playPauseHandler (e: MouseEvent): void resetTimeScale (); tl.reversed = false; tl.paused =! tl.paused;

Dispozitiv de curățare a componentelor pentru glisante - Componenta Slider face destul de ușor să se curăță prin cronologie prin modificarea currentProgress din cronologie. Slider-ul este setat la valori de ieșire între 0 și 100. În cod, această valoare devine convertită la un număr între 0 și 1.

 import fl.controls.Slider; import fl.events.SliderEvent; slider.addEventListener (SliderEvent.THUMB_DRAG, sliderChange); funcția privată sliderSchimba (e: SliderEvent): void tl.currentProgress = slider.value * .01; // forțează cronologia să se oprească atunci când scruber-ul este eliberat. tl.pause ();

Teme pentru acasă

Ce? Îmi dai temele? Da! Vreau să fii cel mai bun. Flex-vă musculare mintea cu această mică provocare.

Creați un TimelineLite care animă șase elemente
Creați butoane de redare, pauză și inversă ca în fișierul demo de mai sus
Creați butoane cu funcții complexe, cum ar fi derularea rapidă și derularea înainte

Pentru a învăța cu adevărat acest material, nimic nu este mai bun decât scufundarea și obținerea mâinilor puțin murdare.

Concluzie

Până acum v-am dat o cantitate destul de mare de informații despre crearea și controlul animațiilor TimelineLite. Deși există unele asemănări evidente în felul în care controlați animațiile TimelineLite și Flash IDE cronologie, îmi place foarte mult modul în care TimelineLite oferă animatorilor un control mult mai inversa(), repornire(), și relua() metode. Grafic de timp și currentProgress proprietățile deschid câteva posibilități interesante care vor fi discutate și mai mult în viitor.

În următorul videoclip, vă voi arăta cum să adăugați etichete în instanțele TimelineLite, astfel încât să puteți naviga cu ușurință la anumite secțiuni ale liniilor dvs. de timp. Etichetele de timp TimelineLite funcționează foarte asemănător cu etichetele de cadre din Flash IDE, dar cu unele funcționalități adăugate. Va fi foarte distractiv.

Dacă aveți întrebări sau comentarii cu privire la acest tutorial - sau temele dumneavoastră;) - nu ezitați să postați un comentariu de mai jos.

Multumesc pentru vizionare!

Cod