Share
En la primera parte de esta serie analizamos las capacidades de TimelineLite. En este video, te mostraré cómo ponerte en marcha con tu primera animación de TimelineLite. Aprenderá acerca de los diversos métodos y propiedades que serán la base para todas las lecciones que se van desarrollando..
Puede encontrar todos los archivos utilizados para crear el SWF anterior en los archivos de origen para este tutorial.
Los siguientes métodos se utilizan para agregar interpolaciones a un TimelineLite. Es muy importante entender las diferencias sutiles que se tratan en el video..
insertar() - Agrega interpolaciones a una línea de tiempo en un momento específico. Si no se especifica el tiempo de inserción, la interpolación se insertará a una hora de inicio de cero segundos.
// esta interpolación se insertará al principio de la línea de tiempo tl.insert (TweenLite.to (mc, 1, x: 100)); // esta interpolación se insertará 2 segundos en la línea de tiempo tl.insert (TweenLite.to (mc, 1, x: 100), 2);
adjuntar() - Agrega interpolaciones a una línea de tiempo relativa al final de la línea de tiempo. El valor de compensación puede ser positivo o negativo. Un desplazamiento negativo permitirá que las interpolaciones se superpongan.
// esta interpolación lo hará directamente después de que todas las interpolaciones anteriores hayan terminado tl.append (TweenLite.to (mc, 1, x: 100)); // esta interpolación se reproducirá 1 segundo antes de que todas las interpolaciones anteriores hayan terminado tl.append (TweenLite.to (mc, 1, x: 100), -1);
anteponer () - Agrega interpolaciones al comienzo de una línea de tiempo y empuja todas las interpolaciones existentes en el tiempo.
// esta interpolación ocurre antes de cualquier otra interpolación que exista en la línea de tiempo tl.prepend (TweenLite.to (mc, 1, x: 100));
Las siguientes propiedades son muy útiles para agregar funcionalidad a sus líneas de tiempo y para la depuración:
Al construir un TimelineLite puede pasar una cantidad de "propiedades especiales" al constructor. El video muestra onUpdate, onComplete y paused. Las propiedades especiales están todas contenidas en un objeto vars.
// esta línea de tiempo se pausará inicialmente y cuando termine // llamará a una función llamada completeHandler tl = new TimelineLite (onComplete: completeHandler, paused: true);
TimelineLite tiene muchos más métodos, propiedades y "propiedades especiales" que son demasiado numerosos para enumerarlos aquí. Le insto a que investigue todo lo que hay que ofrecer en la documentación oficial de TimelineLite. Los que se enumeran más arriba son los más importantes para comprender al comenzar. A medida que avanza esta serie, presentaré más herramientas que utilizará para obtener un control avanzado sobre la configuración y la reproducción de sus secuencias de animación..
El siguiente video de esta serie se enfocará en controlar un TimelineLite mientras se está reproduciendo. Cubrirá todo desde lo básico. jugar() y marcha atrás() a agregar un control de restregador interactivo.
A continuación se muestra un ejemplo del código utilizado en el video para ilustrar la estructura básica de un TimelineLite.
// constructor tl = new TimelineLite (); // Tweens que introducen el coche. // insert () los pone todos a la vez de 0 segundos tl.insert (TweenMax.from (gti_mc, .5, x: -500, blurFilter: blurX: 140)); tl.insert (TweenLite.from (gti_mc.wheel1_mc, .5, rotación: -180)); tl.insert (TweenLite.from (gti_mc.wheel2_mc, .5, rotación: -180)); // append () agrega interpolaciones relativas al final de la línea de tiempo //.5 segundos después de que las interpolaciones anteriores terminen, este texto se mostrará durante 1 segundo y luego desaparecerá tl.append (TweenMax.from (hello_mc, .5, alpha: 0, repita: 1, repeatDelay: 1, yoyo: true), .5); // introducir el segundo texto .5 segundos después de que la interpolación anterior termine tl.append (TweenMax.from (colors_mc, .5, alpha: 0), .5); // secuencia de tinte tl.append (TweenMax.to (gti_mc.body_mc, .2, tint: blue), .5); tl.append (TweenMax.to (gti_mc.body_mc, .2, tint: red), .5); tl.append (TweenMax.to (gti_mc.body_mc, .2, tint: black), .5); // último texto tl.append (TweenMax.from (black_mc, .5, alpha: 0), 1); // opcional: inserta el recuadro negro al principio de la línea de tiempo tl.prepend (TweenLite.from (cover_mc, .5, y: 0));
Accentsconagua