Scroll de imágenes en Flash
En esta entrada aprenderemos a realizar un scroll de imágenes (tira de imágenes) grandes delimitada por una máscara. Esta tira de imágenes se desplazará sobre un sólo eje (ya sea X en caso de una tira de imágenes horizontal, o sobre el eje Y para una tira de imágenes vertical) por medio de dos botones (uno para desplazarla a la derecha y otro para desplazarla hacia la izquierda).
Para este ejercicio presentaré la solución para Flash 8 (AS2) y Flash CS3 (AS3). El resultado final y los archivos para descargar los encontrarás al final de este post. Los pasos son los siguientes:
Tutorial
1. Crea un nuevo documento de Flash de 500 x 150 pixeles.
2. Renombra la única capa (layer) que existe, ponle de nombre Actions y bloqueala para no poner ningún elemento ahí.
3. Crea una nueva capa y llámala Scroll.
4. Para el scroll de imágenes usaremos las siguientes imágenes, guárdalas en tu disco duro para poder exportarlas al archivo de Flash:
 |
 |
 |
 |
 |
 |
 |
 |
5. Haz click en el menú File (Archivo) -> Import (Importar) -> Import to Library... (Importar a la Biblioteca).
6. Jala cada una de las imágenes al escenario y distribuyelas a lo ancho. No te preocupes si no quedan todas a la misma altura y si el espacio entre ellas no es el mismo.
7. Haz click en el menú Window (Ventana) -> Align (Alinear) o bien presiona Ctrl. + K. Selecciona todas las imágenes del escenario y dentro del panel Align asegúrate que no esté seleccionado el botón de "To stage:" (En escena). Haz click en el botón de "Align top edge" y después haz click en el botón "Distribute horizontal center".
8. Selecciona todas las imágenes del Escenario y presiona F8 para convertirlas en MovieClip. Ponle de nombre imagenes al MovieClip, y como nombre de instancia imagenes_mc.
9. Crea una nueva capa arriba de la capa Scroll. A la nueva capa ponle de nombre Mascara, dale click con el botón de derecho y haz click en la opción de Mask (Máscara).
10. Dentro de la capa Mascara crea un rectángulo del color y tamaño que tu quieras. En mi caso el tamaño del rectángulo es de tres imágenes, por lo que al correr la película sólo verás tres de las 8 imágenes que tenemos en el escenario. En la siguiente imagen se aprecia la máscara (rectángulo de color morado/rosa/camote/algo por el estilo). Además se puede observar la película ejecutada, en la cual sólo se observan las tres imágenes que están por debajo de la máscara.
11. Bloquea las capas Mascara y Scroll. Crea una nueva capa FUERA de la Máscara (puede quedar arriba o abajo de la capa Mascara, no importa, lo importante es que quede FUERA de la Máscara). Crea una nueva capa y llámala Botones.
12. Haz click en el menú Window -> Common Library -> Buttons, dentro del panel de esta librería encontrarás la carpeta playback flat. Arrastra al escenario el botón flat blue back y el botón flat blue forward.
Cambiales el tamaño de 25 x 25 a 50 x 50 y colócalos uno en cada lado del escenario, como se muestra en la siguiente imagen:
13. Al botón de la izquierda («) asígnale el nombre de instancia izquierda_btn, al botón de la derecha (») ponle de nombre de instancia derecha_btn.
14. Este paso es importante, es momento de definir las coordenadas máximas en las que se moverá la tira de imágenes. Queremos que cuando nos pongamos encima del botón de la derecha, la tira de imágenes se mueva hacia la izquierda y que se pare hasta que podamos ver la última imagen. Lo mismo para el botón de la izquierda. Para encontrar las coordenadas basta con mover la tira de imágenes hasta que la última foto esté en la orilla derecha de la máscara (no olvides desbloquear la capa de Scroll para que puedas ver la máscara):
En este caso le he puesto una transparencia (alpha) a la máscara para que puedas observar que la última imagen está pegada a la orilla derecha de la máscara. Aprieta Ctrl. + I (I de Info) para obtener información sobre la posición y tamaño de la tira de imágenes (observa, en la imagen de arriba, que está seleccionada la tira de imágenes). En el panel de Info se ve que el valor de X es -23.1 y de Y es 75.0 Fíjate bien que del lado izquierdo de estos valores hay una cuadrícula de nueve puntos que nos muestra la posición del elemento que tenemos seleccionado. Es importante, para obtener las coordenadas correctas, que si no está en negro el cuadrito de enmedio le des click para que se muestre en negro (como en la figura de arriba).
15. Para obtener la otra coordenada en X debemos hacer lo mismo que en el paso anterior pero ahora poniendo la primera imagen de la tira en la orilla izquierda de la máscara.
16. Es momento de poner el código. Da click en el primer frame de la capa Actions y anota lo siguiente:
-
var velocidad:Number = 10;
-
-
derecha_btn.onRollOver = function() { // Queremos que cuando nos pongamos encima del botón la tira comience a moverse a la izquierda
-
_root.onEnterFrame = function() {
-
if(imagenes_mc._x > -23.9) { // Esta es la coordenada límite que encontramos en el paso 14
-
imagenes_mc._x -= velocidad; // Como se debe mover a la izquierda, el valor de la propiedad _x debe disminuir
-
}
-
}
-
}
-
-
derecha_btn.onRollOut = function() {
-
delete _root.onEnterFrame; // Como ya nos hemos salido del botón debemos borrar la llamada a onEnterFrame
-
}
-
-
izquierda_btn.onRollOver = function() { // Queremos que cuando nos pongamos encima del botón la tira comience a moverse a la derecha
-
_root.onEnterFrame = function() {
-
if(imagenes_mc._x < 514.9) { // Esta es la coordenada límite que encontramos en el paso 15
-
imagenes_mc._x += velocidad; // Como se debe mover a la derecha, el valor de la propiedad _x debe aumentar
-
}
-
}
-
}
-
-
izquierda_btn.onRollOut = function() {
-
delete _root.onEnterFrame; // Como ya nos hemos salido del botón debemos borrar la llamada a onEnterFrame
-
}
La variable velocidad tiene el valor del número de pixeles que queremos que la tira se vaya moviendo cada momento. En este caso, el valor de velocidad es de 10, no olvides ajustarlo a tus necesidades.
 |
|
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
Ejemplo de mucha ayuda, te agradesco que compartas tus conocimientos y que mejor que de esta forma, gracias!!!!
Buenisimo el ejemplo y la explicación...
te hago unapregunta... si en el lugar de los botones quisiera que las imagenes se trasladen automaticamente en un bucle infinito... donde deberia aplicar la velocidad dentro del codigo?
Muchas Gracias!
Hola Martín,
Si te entendí bien... para que se muevan automáticamente deberás poner el código del onEnterFrame en el primer frame de tu aplicación y no ligado a los botones que tenemos ahorita. Además, tendrías que copiar dos o tres imágenes del inicio y pegarlas al final; y hacer lo mismo con las del final (dos o tres imágenes del final copiarlas y pegarlas al inicio). Posteriormente deberás encontrar dos puntos similares para que cuando toques uno de esos puntos brinques al otro y así hacer como si fuera constante el movimiento (como un carrusel).
Saludos.
saludos me gusto mucho este tutorial de galeria flash pero tengo una consulta si bien dices que para dar las coordenadas basta con mover la tira scaroll hacia la derecha o la izquierda segun sea el caso pues lo he hecho y no se ven completas las imagenes (claro que yo agregue unas cuantas mas) quisiera saber si me pueden ayudar muchas gracias Dios le bendiga
Hola José,
Hay que mover la tira de imágenes y copiar sus coordenadas (en este caso la coordenada X). Después hay que modificar las coordenadas que están en el código de los botones derecha e izquierda (-23.9 y 514.9).
También puedes probar cambiándole el número a estos valores hasta que logres ver todas las imágenes de tu tira.
Saludos.
este ejemplo es my bueno ya que te lleva paso a paso para los que andamos aventandono a hacer cosas en flash y no le entendemos bien al código espero sigas haciendo cosas como estas!!! saludos
lulaadi
Hola Carla:
Gracias por poner este tutorial a la mano de los que como yo, somos novatos en estas lindes del flash. He estado buscando tutoriales sobre este tema y sin duda este se lleva el Oscar a la explicación y claridad. Gracias de nuevo.
Ya para rematar me gustaria si a este scroll de imagenes se le puede añadir que cuando pinches en una imagen salga encima la foto en grande. Muchas gracias de antemano.
Hola Adrián,
Disculpa la tardanza.
Prácticamente tendrías que convertir cada una de las imágenes del scroll en MovieClips y ponerle la instrucción para cargar una imagen dentro de un MovieClip. Te dejo un ejemplo sencillo en está página y además te recomiendo que visites el tutorial de "Oscurecer página con ThickBox y LightWindow desde Flash".
Saludos.
Hola.. me llamo Paola y la verdad me gusto mucho tu ejemplo se entiende perfecto pero no se porque no me sirve mi pelicula... no se que pueda estar mal... no se mueven los botones... que podria ser?
Hola Paola,
Pueden ser dos cosas:
1. Que a tus botones les falte el código del enterFrame:
2. Que las coordenadas que le pusiste estén incorrectas. Si este es el caso te recomiendo que quites temporalmente los if de cada botón y hagas un trace de las coordenadas dentro de los enterFrame. Corre tu película y coloca el mouse encima de los botones (las imágenes se moverán sin que exista límite) cuando creas que tus imágenes están en el límite anota la posición o coordenada en la que está (haz lo mismo para el otro lado) y ahora sí ponle los if a cada botón con las coordenadas que anotaste.
Saludos.
hola me gustaría saver si hay una forma que la imagen se muevan solas e indifinidamente ... y que cuando uno acerque el puntero(cursor) se dasplace al lado requerido...
Hola Simón,
Lo más fácil sería quitar el código de los botones y poner un onEnterFrame general. Verificar si el cursor se encuentra del lado izquierdo del MovieClip (de la mitad para la izquierda) o si está del lado derecho. Similar a lo siguiente:
-
var velocidad:Number = 10;
-
-
_root.onEnterFrame = function() {
-
if(this._xmouse> 247)
-
imagenes_mc._x -= velocidad;
-
else
-
imagenes_mc._x += velocidad;
-
}
Importante: Como lo dije en un comentario anterior, para hacer que se muevan indefinidamente y sin pararse deberás:
"... copiar dos o tres imágenes del inicio y pegarlas al final; y hacer lo mismo con las del final (dos o tres imágenes del final copiarlas y pegarlas al inicio). Posteriormente deberás encontrar dos puntos similares para que cuando toques uno de esos puntos brinques al otro y así hacer como si fuera constante el movimiento (como un carrusel)"
Saludos.
Escribe un comentario
Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.
Excelente ejemplo. muy bien explicado, muchas gracias !!