Embed Size (px)
DESCRIPTION
En este manual se detallan los pasos a seguir para construir un mapa de imagenes. Este documento es uno de los manuales que forman parte de la asignatura de Taller de Periodismo Digital que se imparte en la Carrera de Comunicaciones y Periodismo de la Universidad Peruana de Ciencias Aplicadas (UPC) en Lima, Perú.
Citation preview
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
Copyright Alberto Mejía, UPC, 2011 [email protected]
3
Taller de Periodismo Digital (PE 53) Macromedia Flash CS4 Professional (PC)
Semana 02 Sesión 02
Alberto Mejía Manrique ([email protected])
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 Seleccionar 5 fotos (640 por 480 pixeles). Resolución 72 ppp o Seleccionar las mismas 5 fotos anteriores a menor tamaño (64 por 48 pixeles). Resolución
72 ppp o 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 [email protected]
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 [email protected]
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 mariposa_chica_01 o mariposa_chica_02 o mariposa_chica_03 o mariposa_chica_04 o mariposa_chica_05 o mariposa_grande_01 o mariposa_grande_02 o mariposa_grande_03 o mariposa_grande_04 o mariposa_grande_05
Copyright Alberto Mejía, UPC, 2011 [email protected]
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 [email protected]
8visibilidad 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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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?
