Avanzar y Retroceder MovieClip

En este post aprenderemos cómo avanzar y retrodecer un MovieClip por medio de código ActionScript y mediente dos botones (Avanzar/Forward y Retroceder/Backward). Como ejemplo haremos un archivo en Flash en donde cada frame tiene dibujado el número de frame actual.

Para este ejercicio estaremos usaremos Flash 8. El resultado final y el archivo para descargar los encontrarás al final de este post. Los pasos son los siguientes:

Tutorial

1. Crea un nuevo documento de Flash de 150 x 150 pixeles.

2. A la Capa (Layer) existente ponle el nombre de Actions. Además, crea una Capa (Layer) y nombrala MovieClip.

3. En la capa MovieClip pon un campo de texto estático con un tamaño de fuente de 65 y color de fuente blanco. Ponle de texto el número 1 y conviértelo a MovieClip (Selecciona la caja de texto y presiona F8, selecciona el botón de radio Movie clip en la parte de Type -tipo-). Ponle el nombre que gustes, en este caso le puse Clipo.

4. Abre el MovieClip haciendo doble click en él, selecciona el frame 25 y aprienta F5 para crear frames del 1 al 25. Selecciona de nuevo el frame 2 y crea KeyFrames apretando F6 hasta llegar al frame 25.

5. En el segundo frame cambia el 1 del campo de texto por el número 2 y así sucesivamente hasta llegar al frame 25.

6. Salte del MovieClip haciendo doble click afuera del rectángulo azul o bien dando click en el botón de Scene 1 que está al lado del botón de Timeline (arriba de la zona de las capas). Este botón lo puedes observar en las dos imágenes anteriores.

7. Abre la librería de Botones predeterminados en Flash. Para eso dale click en WIndow (Ventana) -> Common Libraries (Librerías Comunes o algo parecido) y después en Buttons (Botones).

8. De la lista de botones abre la carpeta que dice playback flat. Arrasta al escenario los botones de flat blue black y flat blue forward.

9. Selecciona el botón de la izquierda (<<) y en sus propiedades asígnale el nombre de instancia back_btn. Haz lo mismo para el otro botón y asígnale el nombre de instancia forw_btn. Además, selecciona el MovieClip Clipo y ponle como nombre de instancia clipo_mc.

10. En la capa de Actions da click en el primer frame y presiona F9 para ver el panel de Acciones. En el panel de acciones coloca el siguiente código:

clipo_mc.stop(); // Para que el MovieClip no se reproduzca solo cuando se corra el SWF
var _atras:Boolean = false; // Variable que nos permitirá determinar si vamos hacia adelante (false) o hacia atrás (true)

forw_btn.onRollOver = function() {
     clipo_mc.play();
}
forw_btn.onRollOut = function() {
     clipo_mc.stop();
}
back_btn.onRollOver = function() {
     clipo_mc.onEnterFrame = function() {
     if(clipo_mc._currentframe == 1)
          clipo_mc.gotoAndStop(clipo_mc._totalframes);
     else
          clipo_mc.prevFrame();
     }
}
back_btn.onRollOut = function() {
     delete clipo_mc.onEnterFrame;
}