Guía de inicio de TimelineLite Ultimate control de reproducción

En la sesión anterior repasé cómo crear un TimelineLite básico. Hoy te mostraré los métodos y las propiedades que usarás para controlar la reproducción de tu TimelineLite. Al combinar estos métodos y propiedades, puede ampliar la funcionalidad incorporada de TimelineLite para crear controles de avance rápido y reproducción / pausa. También te mostraré lo fácil que es configurar un componente Slider para usar como un limpiador TimelineLite.

TimelineLite en acción

Echemos un vistazo al resultado final en el que trabajaremos:

Puede encontrar todos los archivos utilizados para crear el SWF anterior en los archivos de origen para este tutorial.

Mira el Screencast

Métodos de reproducción TimelineLite

Los siguientes métodos le brindan un control preciso sobre la reproducción de su TimelineLite

jugar() -Comienza a jugar hacia adelante desde la posición actual..
pausa() - Detiene la linea de tiempo.
marcha atrás() - Hace que la línea de tiempo vaya hacia atrás. Si desea invertir la dirección de la línea de tiempo solamente y no continuar la reproducción en la dirección invertida, puede pasar un parámetro forceResume de false, es decir,. revertir (falso).
currículum() - Inicia la reproducción desde la posición actual sin alterar la dirección (hacia adelante o hacia atrás).
reiniciar() - Reproduce la línea de tiempo desde el principio.

Controles de reproducción personalizados

Al combinar los métodos y propiedades incorporados, es fácil crear una funcionalidad avanzada:

Avance rápido - Puede crear un control de avance rápido aumentando la escala de tiempo propiedad y forzando la reproducción en una dirección hacia adelante.

 función privada fastForwardHandler (e: MouseEvent): void tl.timeScale = 4; tl.play ();

Reproducir / Pausa Toggle - Para alternar entre los estados de reproducción y pausa, simplemente niega la en pausa propiedad. Es importante asegurarse escala de tiempo y invertido las propiedades se establecen en los valores normales, ya que podrían modificarse mediante los botones de avance rápido y retroceso respectivamente.

 función privada playPauseHandler (e: MouseEvent): void resetTimeScale (); tl.reversed = falso; tl.paused =! tl.paused;

Desplazador de componentes deslizante - El componente Slider hace que sea bastante fácil de desplazar a través de la línea de tiempo alterando la progreso actual de la línea de tiempo. El control deslizante está configurado para generar valores entre 0 y 100. En el código, este valor se convierte en un número entre 0 y 1.

 importar fl.controls.Slider; import fl.events.SliderEvent; slider.addEventListener (SliderEvent.THUMB_DRAG, sliderChange); función privada sliderChange (e: SliderEvent): void tl.currentProgress = slider.value * .01; // obliga a la línea de tiempo a detenerse cuando se suelta el depurador. tl.pause ();

Deberes

¿Qué? ¿Me estás dando tarea? ¡Sí! Quiero que seas lo mejor que puedas. Flexiona el músculo de tu mente con este pequeño desafío..

Crear un TimelineLite que anima seis elementos
Crea botones de reproducción, pausa y retroceso como en el archivo de demostración anterior
Cree botones con funcionalidad compuesta como rebobinado rápido y avance lento

Para aprender realmente este material, nada es mejor que sumergirse y ensuciarse un poco las manos..

Conclusión

Hasta ahora te he dado una buena cantidad de información sobre cómo crear y controlar animaciones de TimelineLite. Aunque hay algunas similitudes obvias en la forma en que controlas las animaciones de la línea de tiempo de TimelineLite y Flash IDE, realmente me encanta cómo TimelineLite le da a los animadores mucho más control con el marcha atrás(), reiniciar(), y currículum() metodos los escala de tiempo y progreso actual Las propiedades abren algunas posibilidades realmente interesantes que se discutirán aún más en el futuro..

En el siguiente video, le mostraré cómo agregar etiquetas a las instancias de TimelineLite para que pueda navegar fácilmente a ciertas secciones de sus líneas de tiempo. Las etiquetas de TimelineLite funcionan de manera muy similar a las etiquetas de marco en el IDE de Flash pero con algunas funciones adicionales. Va a ser muy divertido.

Si tiene alguna pregunta o comentario sobre este tutorial, o su tarea;), no dude en publicar un comentario a continuación..

Gracias por ver!

Código