Accentsconagua

TimelineLite Ultimate Starter Guide controllo della riproduzione

Codice
Share

Nella sessione precedente ho esaminato come creare un TimelineLite di base. Oggi vi mostrerò i metodi e le proprietà che userete per controllare la riproduzione del vostro TimelineLite. Combinando questi metodi e proprietà è possibile estendere le funzionalità incorporate di TimelineLite per creare controlli di attivazione rapida e riproduzione / pausa. Ti mostrerò anche quanto è facile impostare un componente Slider da usare come una lavasciuga TimelineLite.

TimelineLite in azione

Diamo un'occhiata al risultato finale su cui lavoreremo:

Puoi trovare tutti i file usati per creare il file SWF sopra nei file sorgente per questo tutorial.

Guarda lo Screencast

Metodi di riproduzione TimelineLite

I seguenti metodi ti danno un controllo preciso sulla riproduzione del tuo TimelineLite

  • giocare() -Inizia la riproduzione in avanti dalla posizione corrente.
  • pausa() - Arresta la cronologia.
  • inverso() - Rende la timeline andare indietro. Se vuoi invertire solo la direzione della timeline e non continuare la riproduzione nella direzione inversa, puoi passare un parametro forceResume di false - i.e. indietro (falso).
  • curriculum vitae() - Inizia la riproduzione dalla posizione corrente senza alterare la direzione (avanti o indietro).
  • ricomincia() - Riproduce la sequenza temporale dall'inizio

Controlli di riproduzione personalizzati

Combinando i metodi e le proprietà incorporati è facile creare funzionalità avanzate:

Avanti veloce - È possibile creare un controllo di avanzamento rapido aumentando il Orizzonte temporale proprietà e forzare la riproduzione in avanti.

 funzione privata fastForwardHandler (e: MouseEvent): void tl.timeScale = 4; tl.play ();

Attiva / Disattiva - Per passare tra gli stati di riproduzione e quelli in pausa basta annullare in pausa proprietà. È importante assicurarsi Orizzonte temporale e invertito le proprietà sono impostate sui valori normali in quanto potrebbero essere alterate rispettivamente dai pulsanti di avanzamento rapido e di inversione.

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

Slider Component Scrubber - Il componente Slider rende abbastanza facile scorrere la timeline modificando il progresso corrente della timeline. Il dispositivo di scorrimento è impostato su valori di uscita compresi tra 0 e 100. Nel codice questo valore viene convertito in un numero compreso tra 0 e 1.

 importare fl.controls.Slider; importare fl.events.SliderEvent; slider.addEventListener (SliderEvent.THUMB_DRAG, sliderChange); funzione privata sliderChange (e: SliderEvent): void tl.currentProgress = slider.value * .01; // forza la timeline a fermarsi quando viene rilasciata la scrubber. tl.pause ();

Compiti a casa

Che cosa? Mi stai dando i compiti? Sì! Voglio che tu sia il tuo migliore. Fletti la tua mente con questa piccola sfida.

  • Crea una linea temporaleLite che anima sei elementi
  • Crea pulsanti di riproduzione, pausa e inversione come nel file demo sopra
  • Crea pulsanti con funzionalità composte come il riavvolgimento rapido e l'avanzamento lento

Per imparare davvero questo materiale niente è meglio che immergersi e sporcarsi le mani.

Conclusione

Finora ti ho dato una discreta quantità di informazioni sulla creazione e sul controllo delle animazioni TimelineLite. Sebbene vi siano alcune ovvie somiglianze nel modo in cui controlli le animazioni della timeline di TimelineLite e Flash IDE, mi piace molto il modo in cui TimelineLite offre agli animatori un controllo molto più inverso(), ricomincia(), e curriculum vitae() metodi. Il Orizzonte temporale e progresso corrente le proprietà aprono alcune possibilità davvero interessanti che saranno discusse ancora di più in futuro.

Nel prossimo video ti mostrerò come aggiungere etichette alle istanze di TimelineLite in modo che tu possa facilmente navigare verso determinate sezioni delle tue timeline. Le etichette TimelineLite funzionano in modo molto simile alle etichette dei fotogrammi in Flash IDE ma con alcune funzionalità aggiuntive. Sarà molto divertente.

Se hai domande o commenti su questo tutorial - o sui tuoi compiti;) - sentiti libero di postare un commento qui sotto.

Grazie per la visione!

Codice
×