Flash y AS3 básico: Crea un loop controlando la línea del tiempo con Actionscript 3.
Escrito por Revista NeoPixel Jueves, 01 de Abril de 2010 13:34
Entender y usar Actionscript3 es sin duda una de las más grandes herramientas para los diseñadores o desarrolladores web, obviamente para aquellos que utilizan Flash en sus proyectos.
Actionscript3 nos permitirá realizar y hacer cosas que con la línea del tiempo nos llevaría el doble, triple o más tiempo y en la mayoría de los casos sería imposible realizar.
Anteriormente hemos publicado algunos artículos con respecto al tema, profundizando poco más sobre Actionscript3. En esta ocasión haremos un pequeño tutorial para controlar la línea de tiempo y comprender además el concepto y funciones básicas de una variable.
Creamos un nuevo documento que sea compatible con Actionscript3. Creamos una animación en este caso de 25 frames que es a la que queramos dar el loop, después de estos 25 frames creamos una disolvencia u otra animación que termine en el frame 35. Puedes descargar el archivo adjunto para seguir el tutorial.
En tu línea del tiempo, en un layer nuevo que nombraremos como Acciones, nos colocamos en el primer frame y abrimos el panel de Actions, aqui tecelamos lo siguiente:
var contador:Number = 1;
Lo que estamos haciendo es declarar una variable (var) y a continuación le asignamos un nombre, en este caso contador, en realidad puede ser el nombre que desees pero es preferible que vaya de acuerdo a la tarea que realizara o está pensada la variable, esto para una mejor organización. El parámetro Number, después de los dos puntos está declarando el tipo de información que será almacenada en la variable, en este caso de tipo numérico. Ya para finalizar, con el =1 se le está asignando el valor numérico a dicha variable.
Crea otro layer que nombraremos como "Etiquetas". En el frame 20 presionamos F6 o desde el menu Insert - Timeline - Keyframe. Haremos lo mismo en el frame 25. Nos situamos en el frame 25 y, en el panel de "Propiedades" en "label" o etiqueta lo nombramos con "final". Ahora regresamos al frame 20 y lo nombramos "loop". Una vez más regresamos al frame 2 y lo nombramos "inicio".
En el layer de "Acciones" damos click en F6 o Insert - Timeline - Keyframe en el frame 20, vamos al panel de acciones y tecleamos lo siguinte:
if (contador>4) {
gotoAndPlay("final");
}else{
gotoAndPlay("inicio");
}
contador++;
Lo que estamos haciendo es decirle que si la variable llamada "contador" es mayor a 4 pase al frame 25 (al que previamente etiquetamos con "final"). Con "else" especificamos que, de no ser así regrese al frame con la etiqueta "inicio".
Con contador++ estamos diciendo que cada que pase por este frame (por esta instrucción) se incremente el valor de nuestra variable (contador) en una unidad. De no ponerle esta acción se creará un loop infinito ya que contador siempre tendrá el valor de 1 y nunca llegará a ser mayor de 4.
Insertamos un keyframe en el cuadro 35 y ponemos un stop:
stop();
Probamos la película con Control-TestMovie o ctr+enter y vemos lo que sucede. La animación se repetirá 4 veces y a la quinta saltará al final de la animación para detenerse. Con solo cambiar el valor "4" a otro número podemos determinar el número de veces que deseamos que haga loop la animación.
Si queremos podemos ver el valor que se le está asignando a la variable "contador" y cómo es que va cambiando cada que pasa por el frame 20. Esto simplemente poniendo en el layer de acciones en el frame 2 lo siguiente:
trace (contador);
Es muy básico este tutorial pero nos invita a pensar el potencial que tiene poder controlar nuestra línea del tiempo desde AS3, por poner un ejemplo este es el principio de los "preloaders" o precargas, que ejecutarán una acción o iran a algun punto en la línea de tiempo solamente cuando una acción se cumpla.
RSS feed Comments
