Carrousel

Código Metrópoli
Programación para Super Héroes

* Inicio
* Acerca de…
* Generadores
* Lista de Ejemplos
* Proyectos
* Software Recomendado

Scroll de imágenes en Flash
Publicado por Carla Macías
29 Mayo, 2008
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á sobreun 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. Lospasos 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 instanciaimagenes_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 quetenemos 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 semuestra 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 laizquierda 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...