Taller de Periodismo Digital - Menu Desplegable (Manual 13 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 2011 01

ALBERTO MEJÍA MANRIQUE

14 de junio de 2011

2

Copyright

 Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

3

Taller de Periodismo Digital (PE 53) Adobe Flash CS4 Professional (PC) Semana 13 (Sesión 01) Alberto Mejía Manrique (alberto.mejia@upc.edu.pe)

Ejercicio Menu Desplegable: En este ejercicio mostraremos la construcción de un menú desplegable que deberá ser utilizado en para activar los módulos del reportaje multimedia así como la información complementaria

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 mcmenudesplegable.

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

Copyright

 Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

4

04) Para el presente ejemplo crearemos un menú desplegable cuyo botón principal sea la opción Menú y las opciones secundarias sean Opción 01, Opción 02, Opción 03 y Opción 04.

05) Para ello crearemos 6 layers adicionales, es decir tendremos 7 layers. Los nombres serán los siguientes (de arriba hacia abajo): acciones, menú, opción 01, opción 02, opción 03, opción 04 y área de toque.

06) Ahora en el frame 01 deberá aparecer el menú sin desplegar y en otro frame el menú desplegado. En realidad el frame donde aparecerá el menú desplegado puede ser cualquiera que este ubicado a la derecha del primero. En nuestro caso tomaremos el frame 05 como el frame donde aparecerá el menú desplegado.

07) Ubicarse en el frame 01 del layer menú y dibujar un rectángulo de color (convertirlo en botón con el nombre botonrectangular y luego escribir sobre el la palabra Menú en letras negras.

Copyright

 Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

5 Seleccionar un tamaño de botón dentro del cual quepa cualquiera de los 5 textos. (es recomendable que el rectángulo tenga un borde de color diferente)

08) Observe que para escribir el texto es necesario volver a cambiar el color de la herramienta Fill Color (en este caso a negro) y seleccionar el tipo de letra Verdana. Escribir el texto fuera del área del botón y luego arrastrarlo para que el texto se ubique sobre el botón rectangular. Es decir el texto no forma parte del botón.

Copyright

 Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

6

09) Ubicarse en el frame 05 del layer menú e insertar un Keyrframe (F6), luego ubicarse en el frame 05 del layer opcion 01 e insertar un Blank Keyframe (F7). Proceder del mismo modo con los layers opcion 02, opcion 03, opcion 04 y area de toque.

10) Luego ubicarse en el frame 05 del layer menú y activar la opción Edit > Copy luego ubicarse en el frame 05 del layer opción 01 y activar la opción Edit > Paste in Center y aparecerá una copia del botón junto con una copia del texto. Ubicar el segundo boton a la derecha del primero (sin que queda ningún espacio entre ellos), luego editar el texto Menú y cambiarlo por el texto Opción 01.

11) Luego ubicarse en el frame 05 del layer opción 02 y activar la opción Edit > Paste in Center y aparecerá una copia del botón junto con una copia del texto. Ubicar el tercer botón debajo del segundo botón (sin que queda ningún espacio entre ellos), luego editar el texto Menú y cambiarlo por el texto Opción 02.

12) Luego ubicarse en el frame 05 del layer opción 03 y activar la opción Edit > Paste in Center y aparecerá una copia del botón junto con una copia del texto. Ubicar el cuarto botón debajo del tercer botón (sin que queda ningún espacio entre ellos), luego editar el texto Menú y cambiarlo por el texto Opción 03.

13) Luego ubicarse en el frame 05 del layer opción 04 y activar la opción Edit > Paste in Center y aparecerá una copia del botón junto con una copia del texto. Ubicar el quinto botón debajo del cuarto botón (sin que queda ningún espacio entre ellos), luego editar el texto Menú y cambiarlo por el texto Opción 04.

Copyright

 Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

7

Copyright

 Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

8 14) Luego ubicarse en el frame 05 del layer area de toque y dibujar un rectángulo de color verde (mas adelante nos daremos cuenta que no importa el color ni si tiene borde) que cubra generosamente la zona alrededor de los 5 botones, tal como lo muestra la figura.

15) Luego ubicarse en el frame 05 del layer area de toque y seleccionar dicho rectángulo y convertirlo en botón, use el nombre areadetoque.

16) Luego haga doble click sobre el botón areadetoque para ingresar al mundo del botón. Observe que el rectángulo que dibujo originalmente esta ocupando sólo el frame UP en el timeline del botón. Ubicarse en el frame UP dentro del timeline del botón, seleccionar dicho rectángulo y arrastrarlo hasta colocarlo en el frame HIT. Es decir el único frame que tendrá alguna imagen es el frame HIT los tres frames precedentes deben estar totalmente vacíos. Lo que estamos haciendo es convirtiendo el botón areadetoque en un botón invisible.

17) Observe también que en este momento esta dentro del botón areadetoque, que a su vez esta dentro del movie clip mcmenudesplegable y que todavía no existe nada en la Scene 01 ni en el timeline principal.

18) Para regresar al movie clip mcmenudesplegable debemos activar la pestañana mcmenudesplegable. En ese momento reconocerá que los botones invisibles siempre tienen un color verde agua y aunque su presencia se rebela en el stage por dicho color característico, cuando publiquemos la película en formato *.exe ó *.swf dicho botón será invisible.

19) Luego ubicarse en el frame 05 del layer acciones e insertar un Blank Keyframe. Ubicado en esa misma posición activa el panel de acciones e inserte un script de frame: stop(); 20) Luego ubicarse en el frame 01 del layer acciones e inserte otro script de frame: stop();

Copyright

 Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

9

Copyright

 Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

10

Copyright

 Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

11

21) Ahora ubicarse en el frame 05 del layer area de toque, seleccionar el boton invisible luego activar el panel de acciones y programar el siguiente script de botón:

Copyright

 Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

12 22) Lo que nos tocaría hacer ahora es programar cada uno de los botones llamados Opción 01, Opción 02, Opción 03 y Opción 04, pero eso lo haremos en la siguiente clase.

23) En este momento hemos concluido todo el trabajo interno con el movie clip mcmenudesplegable. Activamos la pestaña Scene 01 para salir del mundo del movie clip mcmenudesplegable e ingresar al timeline principal.

24) En la escena principal debemos tener dos layers, el primero se llamara boton menu y el segundo se llamará menú desplegable.

25) Ingresar al movie clip mcmenudesplegable, ubicarse en el frame 05 del layer menu, activar la opción Edit > Copy, luego salir del movie clip mcmenudesplegable, ubicarse en el frame 01 del layer boton menu y activar la opción Edit > Copy in Center, aparecerá en el stage de la escena principal el botón con la palabra Menú. Para evitar modificar la posición de este botón activar el candado.

26) Ubicarse en el frame 01 del layer menú desplegable, seleccionar el movie clip mcmenudesplegable del Library y arrastrarlo hacia el stage, colocarlo momentáneamente debajo del botón anterior tal como se muestra en la figura de la página siguiente.

27) Seleccionar el movie clip mcmenudesplegable que acabamos de ubicar en el stage y activar la pestaña del panel Properties y asignarle como nombre de instancia imcmenudesplegable.

Copyright

 Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

13

Copyright

 Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

14 28) Luego seleccionar el botón Menú que esta en el layer boton menú, activar el panel de acciones y programar el siguiente script de botón:

29) Podemos modificar el script de botón para que el menú se despliegue al colocar el mouse sobre el botón Menú sin necesidad de pulsar el botón izquierdo del mouse:

Copyright

 Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

15 30) Al final solo falta colocar la instancia imcmenudesplegable exactamente debajo del botón Menú, de tal forma que uno se confunda con el otro y así percibiremos que es el mismo menú el que se despliega.

31) Finalmente grabar el ejercicio como menudesplegable.fla

Copyright

 Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe