Taller de Periodismo Digital - Scrolling de Fotografias (Manual 12 Adobe Flash - PE53)

FACULTAD DE COMUNICACIONES Y PERIODISMO TALLER DE PERIODISMO DIGITAL

MATERIALES DE TRABAJO DISEÑO DE PORTAFOLIOS MULTIMEDIA (ADOBE FLASH CS4 PROFESSIONAL) SEMESTRE 2009 02

ING. ALBERTO MEJÍA MANRIQUE

08 de noviembre de 2009

2

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

3

Taller de Periodismo Digital (PE 53) Macromedia Flash CS4 Professional (PC) Semana 12 (Parte 01) Alberto Mejía Manrique (amejia@upc.edu.pe)

Ejercicio Scrolling de Fotografías: En este ejercicio mostraremos la construcción de un Scrolling de Fotografías que podrá ser utilizado como uno de los módulos de información complementaria del reportaje multimedia.

01) Iniciar Adobe Flash CS4 Profesional y seleccionar una película AS 2.0 02) En la película nueva insertar un movie clip usando la opción Insert > New Symbol y en el campo Type seleccionamos Movie Clip y en el campo Name colocamos el nombre mcfoto.

03) Luego pulsar el botón OK. Observaremos que nos encontraremos dentro del movie clip mcfoto “en el mundo del movie clip”. El Timeline que observamos no es el Timeline principal es un Timeline secundario que esta dentro del movie clip mcfoto.

04) Las fotografías que usaremos deben estar en una carpeta llamada recurso listas para ser importadas a la biblioteca, en este caso los nombres son: arbol_chico.jpg, arbol_grande.jpg, arco_chico.jpg, arco_grande.jpg, castillo_chico.jpg, castillo_grande.jpg, erizo_chico.jpg, erizo_grande.jpg, falsorelive_chico.jpg, falsorelive_grande.jpg, isla_chica.jpg, isla_grande.jpg, luz_chico.jpg, luz_grande.jpg, olimpia_chico.jpg, olimpia_grande.jpg, vaticano_chico.jpg, vaticano_grande.jpg, ventanas_chico.jpg y ventanas_grande.jpg 05) El tamaño de las fotos chicas es de 80 pixels de ancho y 60 pixels de alto, las fotos grandes es de 640 pixels de ancho y 480 pixels de alto. Se recomienda que las fotos pequeñas tengan todas el mismo tamaño entre si, del mismo modo que las fotos grandes.

06) Por otro lado en un caso real, normalmente el tamaño de las fotos grandes y pequeñas se determina luego de determinar el tamaño de la película (tamaño del stage). En este caso para efectos de mantener la simplicidad lo hemos hecho al revés. No olvide grabar esta película como scrolling_fotos.fla.

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

4

07) Para el presente ejemplo crearemos un scrolling que debe mostrar un total de 10 fotografías pero que sólo puede mostrar 5 fotografías por vez.

08) Para ello crearemos 12 layers, tendremos 10 layers para las fotografías, un layer para la máscara y un layer para las acciones. Los nombres serán los indicados en la figura y las fotos se colocaran de izquierda a derecha en los layers correspondientes.

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

5

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

6 09) Observe que nos hemos ubicado en el frame 01 del layer mascara y hemos dibujado un rectángulo que cubre las primeras cinco fotografías (arbol_chico.jpg, arco_chico.jpg, castillo_chico.jpg, erizo_chico.jpg, falsorelive_chico.jpg). Este rectángulo es el área de visualización y representa el tamaño visible del scrolling de fotografías.

10) Con la idea de que la máscara no nos moleste vamos a volverla invisible, activando el ícono del ojo en el layer mascara.

11) Vamos a cambiar el Frame Rate de la película a 12 fps usando la opción File > Document …

12) Luego seleccionamos cada una de las fotos chicas y las convertimos en botones, por ejemplo para la fotografia arbol_chico.jpg usaremos el nombre boton_arbol y así con las otras 9 fotografías. De esta manera en la biblioteca aparecerán 10 elementos adicionales.

13) Ahora aunque la animación que moverá las fotos de izquierda a derecha no será una animación con control de tiempo (es decir con un tiempo definido), si será controlada por los botones que acompañan al scrolling. Por ello con la idea de que los movimientos no sean tan bruscos estimamos que todo el scrolling deberá ser recorrido si pulsamos consecutivamente los botones que lo acompañan durante 3 segundos.

14) Para conseguir este efecto, nos ubicamos en el frame 3*12 = 36 del layer acciones e insertamos un frame, nos ubicamos en el frame 36 del layer mascara e insertamos un frame, finalmente deberíamos colocar un Keyframe en el frame 36 de cada uno de los layers correspondientes a las fotografías.

15) Para realizar esta última tarea vamos a recordar un método que nos permita realizarla con los 10 layers de una sola vez. Seleccionamos el frame 36 del layer arbol_chico.jpg, luego pulsamos la tecla shift y seleccionamos con el botón izquierdo del mouse el frame 36 del último layer (ventanas_chico.jpg). Observaremos que el frame 36 de todos esos layers están seleccionados, luego insertar un Keyframe en todos con la opción Insert > Timeline > Keyframe (F6).

16) Ahora seleccionamos un frame intermedio del layer arbol_chico.jpg (entre el frame 2 y el frame 35) por ejemplo el frame 30, luego pulsamos la tecla shift y seleccionamos con el botón izquierdo del mouse el frame 30 del último layer (ventanas_chico.jpg). Observaremos que el frame 30 de todos esos layers están seleccionados, luego colocamos el cursor sobre esta columna de frames seleccionados, pulsamos el botón derecho y activamos la opción Create Classic Tween.

17) Ahora hacemos visible el layer mascara para poder visualizar el área de visualización, luego seleccionamos el frame 36 de los layers de las 10 fotografías. A continuación movemos el “tren de fotografías” hacia la derecha de tal forma que la última fotografia (ventanas_chico.jpg) quede debajo de la parte izquierda del área de visualización.

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

7

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

8

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

9

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

10 18) Para hacer el desplazamiento más rápido además de usar la tecla de la flecha derecha si la combinamos con tecla shift los tramos avanzarán mucho más.)

19) Ubicarse en el frame 01 del layer acciones, activar el panel de Acciones e insertar el script de frame stop();

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

11 20) Ubicarse sobre el nombre del layer máscara, pulsar el botón derecho del mouse y activar la opción Mask. En ese momento observarás que sólo se enmascara la primera foto. Esto se puede verificar porque solo dos layers tienen el “candado” activo: el layer mascara y el layer arbol_chico.jpg.

21) Es necesario mover cada uno de los 9 layers que corresponden con las fotografías que están debajo del layer arbol_chico.jpg dentro de la máscara. Esta acción la debe realizar moviendo uno a uno los layers indicados manteniendo el orden dentro de la máscara tal como lo muestra la figura de la siguiente página.

22) Finalmente para que se vea la máscara de forma correcta es necesario activar el “candado” en los layers que movimos correspondientes a las 9 fotografías. Nuestro trabajo dentro del movie clip mcfoto ha terminado, para salir del “mundo del movie clip” debemos activar la pestaña Escena 1.

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

12

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

13

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

14 23) Al salir a la Escena 1 (Timeline principal) observarás que allí aún no existe nada. Ahora crearemos 4 layers. Dos para los botones que controlaran el scrolling de fotografías, uno para el panel (movie clip) sobre el cual se reemplazarán las fotos grandes y otro para colocar la instancia (imcfoto) del movie clip mcfoto.

24) Ubicarse en el frame 01 del layer mcfoto y arrastrar de la librería el movie clip mcfoto a la parte inferior del stage. Colocarle como nombre de instancia imcfoto.

25) Modificar el tamaño de la película a 800 pixels de ancho y 600 pixels de alto. Luego ubicarse 26) 27)

en el frame 01 del layer panel foto grande y dibujar un rectángulo (de color rojo) del tamaño de las fotos grandes (640 x 480).

Seleccionar este panel rojo y convertirlo en movie clip con el nombre mcpanel, darle un nombre de instancia imcpanel.

Ahora colocarse en el frame 01 del layer boton derecha y dibujar un circulo azul sin borde y convertirlo en botón, use el nombre botonazul. Luego colocarse en el frame 01 del layer boton izquierda y arrastrar de la biblioteca el botón botonazul al lado izquierdo del scrolling de fotografías.

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

15

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

16

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

17 28) Ahora debemos construir 10 películas adicionales de 640 pixeles por 480 pixeles, es decir del tamaño de cada una de las fotos grandes. En cada película debemos insertar cada foto grande por separado.

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

18 29) En este caso a la película que hemos creado con la fotografia arbol_grande.jpg la llamaremos arbol.fla, la debemos grabar en la misma carpeta donde esta grabada scrolling_fotos.fla y además debemos crear el archivo arbol.swf usando la combinación de teclas Control + Enter.

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

19 30) Nos ubicamos en el frame 01 del layer boton izquierda de la película scrolling_fotos.jpg, seleccionamos el botón que esta a la izquierda del scrolling y luego activamos el panel de Actions e ingresamos el siguiente script de botón (asegúrese que en la barra de título de la ventana diga Actions – Button):

31) Nos ubicamos en el frame 01 del layer boton derecha de la película scrolling_fotos.jpg, seleccionamos el botón que esta a la derecha del scrolling y luego activamos el panel de Actions e ingresamos el siguiente script de botón (asegúrese que en la barra de título de la ventana diga Actions – Button):

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

20 32) Los botones a la izquierda y derecha del scrolling deberían estar funcionando correctamente.

33) Ahora deberemos ingresar al movie clip mcfotos y programar sobre el botón boton_arbol un script de botón que permita cargar en la instancia imcpanel la película arbol.flv

34) Ingresar al movie clip mcfotos por medio de la biblioteca, desbloquear el layer mascara y ocultarla, desbloquear también el layer arbol_chico. Lo que nos toca hacer ahora es programar el boton boton_arbol ubicado en el frame 01 y en el frame 36 con el siguiente script de botón (asegúrese que en la barra de título de la ventana diga Actions – Button):

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

21 35) Finalmente volver a bloquear tanto el layer arbol_chico como el layer mascara y hacerla visible nuevamente.

36) Finalmente probar que todo este funcionando correctamente.

Observaciones: •

• • • •

Los botones a la izquierda y derecha del scrolling están programados del mismo modo que como funcionan las barras scroll de los programas de computadora (lo que no aparece es justamente la barra scroll que permite entender mejor la metáfora del movimiento). En mi concepto mantener la programación sin la barra scroll genera confusión.

El ejercicio debe culminarse creando las otras 9 películas con las 9 fotografías restantes y programando los otros botones.

Se debe cambiar el color del movie clip mcfotos (o eliminar el recuadro rojo) para evitar que aparezca un recuadro rojo forzado en la pantalla.

Es posible empezar el scrolling con la primera foto precargada para evitar la sensación de vacío en caso de que se elimine el recuadro rojo del movie clip mcfotos. ¿Qué cambios se debería realizar si deseamos que la entrada de cada foto sea con fade in y cada salida sea con un fade out?

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe

22

Copyright

 Alberto Mejía, UPC, 2009

amejia@upc.edu.pe