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
31 de marzo de 2010
2
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
3
Taller de Periodismo Digital (PE 53) Macromedia Flash CS4 Professional (PC) Semana 02 Sesión 02 Alberto Mejía Manrique (alberto.mejia@upc.edu.pe)
Ejercicio Mapa de Imágenes: En este ejercicio utilizaremos los tres tipos de elementos que tiene Flash: símbolos gráficos, botones y movie clips (también conocidos como clips de películas).
Es necesario preparar algunas fotografías para iniciar este ejercicio para ello: o o o
Seleccionar 5 fotos (640 por 480 pixeles). Resolución 72 ppp Seleccionar las mismas 5 fotos anteriores a menor tamaño (64 por 48 pixeles). Resolución 72 ppp Se sugiere que los nombres asignados a cada una de las 10 imágenes sigan algún patrón nemotécnico, por ejemplo fotogrande01.jpg – fotochica01.jpg y así sucesivamente.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
4
Abrir una nueva película en Adobe Flash (recuerde seleccionar la opción ActionScript 2.0)
Cambiar el tamaño de la película (con la opción Modify > Document) a 800 pixel de ancho y 600 pixels de alto. La película utilizara un solo frame por lo que no es necesario preocuparnos por el Frame Rate.
Importar las 10 imágenes a la biblioteca (con la opción Import > Import to Library), es posible verificar que la importación fue realizada correctamente si observamos los 10 elementos en el panel Library.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
5
Ahora tenemos que colocar cada uno de los 10 elementos en un layer independiente, para ello vamos a utilizar la opción Distribute in Layers para que la separación la realice automáticamente el programa.
Ubicarse en el frame 1 del layer llamado layer 01, luego seleccione los 10 elementos que tiene en la biblioteca y arrástrelos en simultáneo hacia el stage. Observe que los 10 elementos se han copiado al mismo tiempo y todos están en el mismo frame y en el mismo layer (seguramente algunos los podrá ver y otros no, no se preocupe los 10 elementos están allí).
Con todos los elementos seleccionados escoja la opción Modify > Timeline > Distribute in Layers. Observe como los 10 elementos se han distribuido en igual numero de layers (en este caso 10), además el nombre de cada uno de estos nuevos layers coincide con el de la imagen que contiene. El layer original que contenía a los 10 elementos ahora está vacío y puede ser eliminado.
Ordene los 10 layers restantes de acuerdo a la siguiente secuencia en el Timeline y elimine el layer 1 donde originalmente estaban todos las imágenes:
o o o o o o o o o o
mariposa_chica_01 mariposa_chica_02 mariposa_chica_03 mariposa_chica_04 mariposa_chica_05 mariposa_grande_01 mariposa_grande_02 mariposa_grande_03 mariposa_grande_04 mariposa_grande_05
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
6
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
7
Distribuya los elementos de tal forma que las imágenes pequeñas se muestren alineadas en la parte superior del stage de izquierda a derecha y las imágenes grandes se coloquen una sobre otra en la misma posición en la parte central inferior del stage. Es conveniente activar la
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
8 visibilidad y bloquear cada layer confome organizamos la información, de esta manera no modificaremos el contenido de un layer de manera involuntaria. Es posible usar la opción de alineamiento.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
9
Luego seleccionar cada una de las imágenes pequeñas y convertirlas en botones con la opción Modify > Convert to Symbol > Boton en cada caso asignar a cada imagen pequeñas un nombre como el siguiente botonfoto01 y así sucesivamente.
Luego seleccionar cada una de las imágenes grandes y convertirlas en Movie Clips con la opción Modify > Convert to Symbol > Movie Clip en cada caso asignar a cada imagen grande un nombre como el siguiente mcfotogrande01, inmediatamente después observe el panel properties y colocar en el campo Instance Name el nombre de instancia correspondiente imcfotogrande01. Proceda de la misma con las otras 5 fotografías grandes.
Si ahora observa el contenido de la biblioteca deberá encontrar 20 elementos: las 10 imágenes originales, 5 botones y 5 movie clips.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
10
Antes de insertar los scripts sobre los botones tenemos que hacer invisibles las fotos grandes. Primero debemos ocultar y bloquear los layers fotogrande02, fotogrande03, fotogrande04 y fotogrande05, luego nos ubicamos en el frame 01 del layer fotogrande01.
Seleccionamos la fotogrande01 que se muestra en el stage, activamos el panel properties y vemos que aparece la opción Color Effects, seleccionar la opción Alpha y asignar 0%, de esta manera la fotogrande01 se hará invisible.
Luego ocultar y bloquear el layer fotogrande01, mostrar y desbloquear el layer fotogrande02 y hacer invisible la fotogrande02 desarrollando el proceso anterior. Repetir la operación con la fotogrande03, fotogrande04 y fotogrande05. De esta manera ahora ninguna de las fotos grandes será visible.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
11
Luego seleccione el botón botonfoto01 y active al panel Actions con la opción Window > Acciones. Observe que la barra de título del panel Actions debe mostrar las palabras Action Button, en caso de que muestre las palabras Action Frame haga un clic sobre el botón botonfoto01 una vez mas.
El titulo de la ventana Actions debe ser Actions Button.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
12
Luego active la opción que permite ingresar código (Script Assist) y digite el siguiente script de botón:
on (rollOver) { imcfotogrande01._alpha="100"; }
Este script de botón permite hacer visible la imagen fotogrande01 al colocar el cursor sobre el botón fotochica01, sin embargo cuando retiramos el cursor la imagen no desaparece, por lo cual tenemos que insertar otro script que genere el efecto contrario al final del anterior.
on (rollOut) { imcfotogrande01._alpha="0"; }
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
13
Este segundo script de botón permite hacer invisible la imagen fotogrande01 al retirar el cursor del botón fotochica01.
Observe que ambos scripts deben estar en una sola ventana. Finalmente repita la operación con los otros botones. ¿Qué parte del script debe ser cambiado para que funcione con las otras 4 fotografias?
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe