En este tutorial usaremos la animación de la línea de tiempo para crear una clase personalizada. Luego usaremos la clase en dos MovieClips diferentes y distintos, duplicando efectivamente la animación a estos símbolos.
Breve descripción
Una de las nuevas características que se incluyeron en Flash CS3, junto con ActionScript 3, fue la capacidad de copiar la animación de la línea de tiempo como código AS3. En este tutorial, crearemos una clase personalizada que se puede utilizar en cualquier clip de película que elija. La clase resultante está basada en su mayoría en XML y no es algo que quieras escribir a mano, bueno, no a menos que estés preparado para un montón de trabajo duro y frustración!
En el SWF de ejemplo anterior, solo estamos creciendo y desvaneciendo los MovieClips, pero podría tener una animación muy compleja y se copiaría en ActionScript también. Lo mejor de copiar una animación de línea de tiempo en una clase es la reutilización. Puedes ver que los dos símbolos siguen exactamente el mismo patrón de animación..
Paso 1: Configuración del documento
Abra un nuevo documento de Flash y establezca las siguientes propiedades
Tamaño del documento: 400x200px
Color de fondo: #FFFFFF
Paso 2: Configuración del clip de película
Desde el Panel de herramientas, seleccione la herramienta Óvalo y dibuje un círculo verde en el escenario. Puede mantener presionada la tecla Mayús mientras arrastra el círculo hacia la forma que se ajusta a un círculo y no a una elipse extendida.
En el panel de propiedades del círculo damos las siguientes dimensiones.
W: 27.00
H: 27.00
Haga clic con el botón derecho en el círculo que acaba de crear y elija "Convertir a símbolo". Entrar circulo como nombre y asegúrese de que el Tipo esté configurado en Clip de pelicula.
Paso 3: Agregar la animación al MovieClip
En la línea de tiempo, haga clic con el botón derecho en el fotograma 60 y elija "Insertar fotograma clave".
Asegúrate de seguir en el cuadro 60 y en el Panel de herramientas usa la herramienta Transformación libre para arrastrar el círculo hasta aproximadamente el doble de su tamaño original.
Asegúrate de estar en el fotograma 60 del clip de película del círculo. En el panel Propiedades, seleccione "Efecto de color". En el menú desplegable Estilo, selecciona "Alfa" y configúralo en 0%..
Haga clic en la capa en la que se encuentra el círculo para asegurarse de que todos los marcos estén resaltados. Alternativamente, puede hacer clic en el primer cuadro y luego presionar Mayús mientras hace clic en el último cuadro para asegurarse de que todos los cuadros estén resaltados. Luego haga clic derecho en cualquier lugar entre los marcos resaltados y elija "Crear interpolación clásica".
Ahora puedes probar tu animación yendo a Menú> Control> Jugar. Deberías tener un MovieClip en crecimiento y desvanecimiento..
Paso 4: Copiando la animación
Ahora estamos listos para copiar nuestra animación de la línea de tiempo y codificar nuestra clase.
Asegúrate de que todos los cuadros estén resaltados usando la técnica anterior. Luego, haga clic con el botón derecho en la interpolación en la línea de tiempo y elija "Copiar movimiento como ActionScript 3.0". En el indicador que aparece, dale el nombre de instancia de "GrowFade"
Copia el código que aparece en tu portapapeles..
Paso 5: Codificando la Clase
Crea un nuevo archivo ActionScript yendo a Menú> Archivo> Nuevo y luego elegir Archivo ActionScript.
Agregue el siguiente código al nuevo archivo AS:
paquete import flash.display.MovieClip; importar fl.motion.Animator; la clase pública GrowFade extiende MovieClip var GrowFade_animator: Animator; función pública GrowFade () // código del constructor función pública growAndFade (): void
Aquí abrimos nuestro paquete y hacemos algunas importaciones. La clase de animador es lo que se usa para hacer la animación en nuestra clase. La función growAndFade () es donde pegaremos el ActionScript copiado del paso anterior. Hacemos esto siguiente.
Dentro de growAndFade () Función de pegar el ActionScript. Si necesita volver a copiarlo, simplemente siga los pasos anteriores y asegúrese de darle el nombre de instancia "GrowFade".
los crecerAfundir La función ahora debería verse algo como esto.
package public function growAndFade (): void import fl.motion.Animator; var GrowFade_xml: XML = ; var GrowFade_animator: Animator = new Animator (GrowFade_xml, GrowFade); GrowFade_animator.play ();
Tenemos que realizar un trabajo de limpieza en este.
Primero necesitamos eliminar la declaración de importación ya que ya hemos hecho esto al principio de la clase.
A continuación querremos declarar el GrowFade_animator como una variable local para la clase, así que lo movemos a la parte superior y lo creamos en la crecerAfundir funciona como tal: GrowFade_animator = nuevo animador (GrowFade_xml, esto)
Puede que hayas notado que también cambiamos el segundo parámetro a esta. La razón por la que hicimos esto es para que podamos usar esta clase en cualquier MovieClip; Si no lo hubiéramos cambiado a esta entonces solo las clases con el nombre de instancia "GrowFade" podrían usar esta clase.
Aquí está la clase completa con los nuevos cambios y una pequeña adición. Discutiremos esta adición a continuación..
paquete import flash.display.MovieClip; importar fl.motion.Animator; la clase pública GrowFade extiende MovieClip var GrowFade_animator: animador función pública GrowFade () // código constructor función pública growAndFade (): void import fl.motion.Animator; var GrowFade_xml: XML = ; GrowFade_animator = nuevo animador (GrowFade_xml, this); GrowFade_animator.play (); // ¿Cuántas veces para repetir la animación 0 = para siempre GrowFade_animator.repeatCount = 0;
Usted notará que hemos añadido el repetir cuenta propiedad. Al establecer esto se especifica cuántas veces se repetirá la animación. Ponerlo a cero significa que se repetirá para siempre.
Paso 6: Configurando los MovieClips
De vuelta en la FLA, elimine el círculo del escenario y elimine todos los marcos de la línea de tiempo.
En la Biblioteca, haga clic derecho en el circulo clip de película y elija "Propiedades".
Asigne al círculo el Nombre de la clase "Círculo" y establezca la Clase base en "GrowFade"; Debido a que la clase GrowFade amplía MovieClip, podemos usarla como la Clase Base del Círculo. No hemos creado una clase de círculo, pero debido a que ingresamos a GrowFade como la clase base, Flash creará automáticamente una clase para el círculo que amplía GrowFade, cuando se crea el SWF. Así es como podemos usar tantos clips de película como queramos, todos compartiendo la clase GrowFade.
A continuación, dibuja un rectángulo azul en el escenario..
En el panel Propiedades, asigne a este rectángulo las siguientes propiedades:
W: 83.00
H: 30:00
Haga clic con el botón derecho en el rectángulo y elija "Convertir a símbolo"; dale el nombre cuadrado.
Eliminar el rectángulo del escenario. En la biblioteca, haga clic derecho en el clip de película cuadrado. Elija "Propiedades" y póngale el Nombre de la clase "Cuadrado" y establezca la Clase base en "GrowFade" como hicimos con el círculo de arriba.
Paso 6: aplicando la clase a los clips de película
Cree un nuevo archivo de ActionScript y agregue el siguiente código:
paquete import flash.display.MovieClip; Clase pública Principal extiende MovieClip var circle: Circle; var cuadrado: cuadrado; función pública Main () circle = new Circle (); circle.x = 50 circle.y = 50; addChild (círculo); circle.growAndFade (); square = new Square; square.x = 200; square.y = 50; addChild (cuadrado); square.growAndFade ();
Debido a que establecemos la clase base del círculo y el cuadrado en GrowFade, podemos llamar a la growAndFade () método en ellos.
Establezca la clase de documento de la película en Principal y pruebe la película. Debería tener dos clips de película separados usando la misma animación de GrowAndFade.
Conclusión
Ser capaz de copiar la animación de la línea de tiempo es una gran adición a Flash. No importa cuán compleja sea la animación que creas, Flash puede manejarlo por ti, y poder compartir la misma animación en muchos clips de película diferentes es un gran ahorro de tiempo..
Espero que hayas disfrutado este tutorial, gracias por leerlo.!
Share
Accentsconagua
