Avanzar y Retroceder MovieClip

Publicado por Carla Macías
24 Mayo, 2008

FlashEn 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.

Figura 1: Nuevo documento de Flash

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

Figura 2: Layers o Capas en Flash

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.

Figura 3: Convertir campo de texto en MovieClip

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.

Figura 4: Keyframes y campo de texto

Figura 4: Keyframes y campo de texto

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.

Figura 6: Botones de la librería de botones de Flash

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.

Figura 7: Asignándole un nombre de instancia al botón de forward

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:

Texto Plano
Actionscript:
  1. clipo_mc.stop(); // Para que el MovieClip no se reproduzca solo cuando se corra el SWF
  2. var _atras:Boolean = false; // Variable que nos permitirá determinar si vamos hacia adelante (false) o hacia atrás (true)
  3.  
  4. forw_btn.onRollOver = function() {
  5.      clipo_mc.play();
  6. }
  7. forw_btn.onRollOut = function() {
  8.      clipo_mc.stop();
  9. }
  10. back_btn.onRollOver = function() {
  11.      clipo_mc.onEnterFrame = function() {
  12.      if(clipo_mc._currentframe == 1)
  13.           clipo_mc.gotoAndStop(clipo_mc._totalframes);
  14.      else
  15.           clipo_mc.prevFrame();
  16.      }
  17. }
  18. back_btn.onRollOut = function() {
  19.      delete clipo_mc.onEnterFrame;
  20. }

Este archivo requiere Flash Player 8
Descargar Archivo

Tags: , , , , , , , ,
Flash

Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.

Comentarios
  Comentario por Fredy Arevalo el Julio 16, 2008 @ 10:17 am

el codigo esta super pero veo que solo funciona con animaciones de move clip de frame por frame, sabes alguna manera de sin animaciones con interpolacion de moviemiento

quedo al pendiente de tu respuesta gracias

  Comentario por Carla Macías el Julio 16, 2008 @ 11:04 am

Hola Fredy,

La finalidad del ejemplo al ponerlo frame por frame es para mostrar el número de frame en el que estamos y ver que también va en sentido contrario.
Si tu pregunta es si funcionará igual con Motion Tween, te dejo dos SWFs en la página de ejemplo de este tema:
http://www.codigometropoli.com/ejemplo-de-avanzar-y-retroceder-movieclip/

Saludos.

  Comentario por fredy el Julio 22, 2008 @ 2:22 pm

oye carla muchas gracias por tu codigo me sirvio mucho coloque los botones fuera de movieclip y dentro de este coloque dos botones para detener y reproducir una animacion...

  Comentario por Armando el Noviembre 15, 2008 @ 12:47 am

hola como le puedo hacer para que avance de frame pero al dar click y no solo al posisionar el cursor? gracias

  Comentario por Carla Macías el Noviembre 16, 2008 @ 3:25 pm

Hola Armando,

Sólo tienes que cambiar los onRollOver por onPress y los onRollOut por onRelease:

Texto Plano
Actionscript:
  1. clipo_mc.stop();
  2.  
  3. forw_btn.onPress = function() {
  4.     clipo_mc.play();
  5. }
  6. forw_btn.onRelease = function() {
  7.     clipo_mc.stop();
  8. }
  9. back_btn.onPress = function() {
  10.     clipo_mc.onEnterFrame = function() {
  11.         if(clipo_mc._currentframe == 1)
  12.             clipo_mc.gotoAndStop(clipo_mc._totalframes);
  13.         else
  14.             clipo_mc.prevFrame();
  15.     }
  16. }
  17. back_btn.onRelease = function() {
  18.     delete clipo_mc.onEnterFrame;
  19. }

Saludos.

Escribe un comentario

Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.

(requerido)

(requerido)