27 marzo 2007

Deslizando imágenes en Flash

Para aprovechar el área de tu animación Flash al máximo (recuerda que la resolución mínima de un usuario vil y mortal es de 800x600 por lo que deberías hacer tus animaciones para esta resolución para que todo el mundo lo pueda ver), existen componentes diferentes que te pueden servir de ayuda.

En este ejemplo voy a usar el componente ScrollPane para mostrar una imágen bastante grande. Estos son los pasos que seguí para hacerlo (acompañado de algunas imágenes chiroliras):
  1. Hice un nuevo documento Flash. Lo "bauticé" scrollpane.fla.
  2. Importé a la biblioteca (library) 3 archivos JPG: foto1.jpg, foto2.jpg y foto3.jpg.
  3. En el primer fotorama de la capa Layer1 le inserté un símbolo Clip de película (movie clip) llamado fotos la cual contiene las tres imágenes todas alineadas en fila. Nótese que el punto de registro (registration mark) está en la esquina superior izquierda. Para alinearlas, usé las herramientas del ventana de alineación (Window-Align). Chécate la figura 1 que está hasta abajo de este post (en esta ocasión se me ocurrió poner todas las imágenes hasta abajo, espero que no te sea inconveniente).
  4. Agrupo las 3 imágenes (Modify-Group o CTRL+G).
  5. Abro la ventana de componentes y abro los componentes de interfaz (Window-Components). Esto lo puedes ver abajo en la figura 2.
  6. Arrastré una copia del componente ScrollPane al escenario de mi animación. Ve la figura 3. Le cambié el ancho a 448 y el alto a 296 (para adecuarse al tamaño del símbolo fotos) y lo centré en la escena pa' que se vea chuvidubis.
  7. Di click con el botón derecho del mouse sobre el icono del símbolo fotos en la ventana de la biblioteca (library) y selecciona la opción Linkage (no sé como se tradujo a la versión en español, será ¿vinculación?). Esto viene en la figura 4.
  8. Aparece la ventana que puedes ver en la figura 5. Aquí selecciono la opción Export for ActionScript (lo cual me permite accesarlo desde otras partes de mi animación como son los controles). Ahora le puedo poner un nombrecito con el que lo puedo vincular al ScrollPane. Yo le puse fotos0, pero, como te has de imaginar, puede ser el nombre que sea.
  9. Ahora selecciono mi ScrollPane y altero sus propiedades, en la parte de parámetros. Hago los siguientes cambios: al parámetro contentPath le escribo fotos0 (el nombre de la "liga" de mi clip de película fotos) para asignar el contenido de fotos al ScrollPane y al parámetro scrollDrag le pongo valor verdadero lo cual me permite arrastrar las imágenes dentro del fotos con mi mouse. Esto se ve en la figura 6.
  10. Ahora todo lo que resta hacer es presionar Ctrl+Enter y ser feliz. El resultado lo muestro en la figura 7.
Espero que esto te haya servido para iluminar tu vasto entendimiento. Seguimos en contacto...

Figura 1. El símbolo fotos

Figura 2. La ventana de componentes

Figura 3. Scene1 con el ScrollPane.

Figura 4. Menú contextual del símbolo fotos

Figura 5. Ventana "linkage" (¿será vinculación?)

Figura 6. Parámetros del ScrollPane

Figura 7. La animación terminada

3 comentarios:

Estefanie Valdés dijo...

Very useful...Thank iup!

Unknown dijo...

gracias tony!! ya pude :D

Tony Valderrama dijo...

¡Qué bueno! ¿Qué rea lo que estaba fallando?

El Tony y sus ondas...

Related Posts Plugin for WordPress, Blogger...