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;
-
}
 |
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
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.
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...
hola como le puedo hacer para que avance de frame pero al dar click y no solo al posisionar el cursor? gracias
Hola Armando,
Sólo tienes que cambiar los onRollOver por onPress y los onRollOut por onRelease:
-
clipo_mc.stop();
-
-
forw_btn.onPress = function() {
-
clipo_mc.play();
-
}
-
forw_btn.onRelease = function() {
-
clipo_mc.stop();
-
}
-
back_btn.onPress = function() {
-
clipo_mc.onEnterFrame = function() {
-
if(clipo_mc._currentframe == 1)
-
clipo_mc.gotoAndStop(clipo_mc._totalframes);
-
else
-
clipo_mc.prevFrame();
-
}
-
}
-
back_btn.onRelease = function() {
-
delete clipo_mc.onEnterFrame;
-
}
Saludos.
hola Carla, como puedo hacer que para q avanze pero se dentenga en el ultimo frame e igual para cuando retroceda se quede en el primer frame. Gracias
Hola Alonso,
Agregándole un if al botón de forward y modificando el if del botón back:
-
forw_btn.onRollOver = function() {
-
if(clipo_mc._currentframe != clipo_mc._totalframes)
-
clipo_mc.play();
-
}
-
back_btn.onRollOver = function() {
-
clipo_mc.onEnterFrame = function() {
-
if(clipo_mc._currentframe == 1)
-
clipo_mc.stop();
-
else
-
clipo_mc.prevFrame();
-
}
-
}
Saludos.
hola lo probe pero no funciona :S , porque cuando termina vuele a comenzar y cuando esta retrocediendo y llega al comienzo vuelve al final y sigue reproduciendoce, lo que quiero es que el clip avanse cuando hago click en los botones pero q se detenga en el primer frame y en el ultimo frame. gracias
Hola Alonso,
Pon un stop(); en el último frame de tu MovieClip, y considera el siguiente código:
-
forw_btn.onRelease = function() {
-
clipo_mc.play();
-
}
-
-
back_btn.onRelease = function() {
-
clipo_mc.gotoAndStop(clipo_mc._totalframes);
-
clipo_mc.onEnterFrame = function() {
-
clipo_mc.prevFrame();
-
}
-
if(clipo_mc._currentframe == 1)
-
delete clipo_mc.onEnterFrame;
-
}
Saludos.
Hola Carla, estan buenisimos tus datos, te queria consultar acerca del ejemplo de los numeros que das al principio de la pagina, lo que necesito hacer es que cuando haga un rollover en la flecha de avanzar me avance, pero cuando haga un rollout se detenga, pero cuando yo avance me llegue al ultimo frame y se detenga asi mismo cuando retroceda y llegue al primer frama y se detenga (ejemplo: del 1 al 25 pero k en el 25 se detenga, asi mismo a la inversa k retrocedo y en el 1 se detenga, ambos con rollover para avanzar y rollout para pausar)
hola Carla, una pregunta como puedo hacerlo pero solo con un boton, osease que en rollOver corriera el movie y en rollOut se detuviera en el frameen donde este y si se vuelve a posicionar el cursor continue d enuevo el movie
muchas gracias
Hola Daniel,
Pon un stop(); en el último frame del MovieClip y considera las siguientes modificaciones en el código:
-
clipo_mc.stop();
-
-
forw_btn.onRollOver = function() {
-
if(clipo_mc._currentframe != clipo_mc._totalframes)
-
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.prevFrame();
-
}
-
}
-
back_btn.onRollOut = function() {
-
delete clipo_mc.onEnterFrame;
-
}
Saludos.
Hola Elena,
Tal cual como está el código fuente es lo que necesitas.
Si no quieres que se pueda regresar el MovieClip sólo tendrías que quitar el botón de la flecha izquierda.
Saludos.
Hola Carla, de verdad te pasaste con todo, con el tuto y con la solucion que me diste MUCHAS GRACIAS.
Saludos
Hola Carla, de verdad te pasaste con todo, con el tutorial y con la solucion que me mandaste, MUCHAS GRACIAS.
Saludos
esta muy bueno felicidades Carla Macias pero la pregunta seria ke si se puede poner sustituir los botones por un scroll agradeseria tu ayuda gracias
hola carla genialllllllllll tu codigo ...una sola pregunta como puedo hacer que avanze mas rapido?? es que pongo fotos yo y la foto dura como nose 50 frames...entonces es muy lento para ver...si me puedes dar como cambiar el codigo para hacerlo mucho mas rapido seria genial...
Hola Álvaro,
Como la aplicación está realizada con frames y el evento onEnterFrame, para que pudiera verse más rápido tendrías que cambiar los frames por segundo (fps) de tu aplicación.
Saludos.
Hola Carla! talvez lo que te escribo no tiene nada que ver con el tutorial que presentas aqui, pero no encontre donde escribirte esta inquietud que tengo.
Estoy haciendo un material interactivo y necesito linkear un boton a una etiqueta de un swf externo.
Supongamos que tengo un archivo llamado m1.swf y otro llamado m2.swf.
dentro de m2 tengo varias etiquetas. Una de ellas se llama "datos".
en m1 tengo un boton que debería llamar la etiqueta "datos" que se encuentra dentro de m2. Espero puedas hecharme una mano con esto, bendiciones.
Evelin
hola Carla:
Antes de todo gracias....
Queria preguntarte que al hacer que los botones se activen solo con pulsar que es la opcion que les has comentado a Daniel... cuando pulso el botón y llega al último frame se para pero cuando pulso para retrocecer al botón va demasiado rápido y las imágenes que tengo puestas en cada frame pasan muy rapido. Es decir cuando pulso el botón va rápido, se salta por ejemplo al tercer frame y no deja ver el frame dos.... Me he explico...
muchas gracias de antemano....
un saludo
Hola Carlita =D super tu Blog saludos desde Lima-Peru =D...
Carla tengo un cierto problema een hacer un reproductor de flash flv... actualmente pase un archivo power point a formato .FLV con el motivo de reproducirla por un reproductor flash hasta ahi todo bien ,funciona bien dando play y stop con los botones , pero quisiera crear dos botones mas que avansen y retrocedan la pelicula flv ( en este caso avansar y retroceder cada diaspositivia del power point convertido a pelicula flv y no se como hacerlo no me sale e buscado y bajado miles de reproductores pero nada funciona porfa me podrias dar una ayuda solucion o un tutorial que talves servira para muchos con ese problema por favor =).
pd: el reproductor flash queria hacerlo pasando una url la cual enlaze con un xml que contiene la ruta del video flv .. pero lo mas importante es de los botones de avanzar y retroceder que me tienen loco y no se como darle solucion =/.. desde ya Gracias espero tu respuesta Carlita =)
Hola Mario,
Supongo que podrías utilizar los cue points para eso, los cuales te permiten hacer referencia a cierta parte del video.
Puedes crear botones para hacer que el video vaya a esos puntos o bien detectar el momento en que se pasó por ese punto.
Saludos.
Escribe un comentario
Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.
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