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
29 de marzo de 2011
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 01 Alberto Mejía Manrique (alberto.mejia@upc.edu.pe)
Ejercicio Secuencia de Fotografías: Secuencias fotográficas (uso de difuminaciones y máscaras). En el ejercicio anterior hemos realizado nuestra primera animación usando un símbolo gráfico en forma de cuadrado. Ahora animaremos una fotografía para que siga cierta secuencia de ingreso y de salida en el escenario. Para ello
Abra el programa Inicio > Programas > Adobe Web Premium CS4 > Adobe Flash CS4 Professional. Seleccione la opción Crear nuevo > Archivo de Flash (AS 2.0)
Active la pestaña de la Biblioteca (Library) para ser conciente en todo momento de la cantidad y el tipo de personajes que tenemos en la animación. Para ello seleccione la opción Ventana > Biblioteca (Window > Library)
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
4
Importar la foto mariposa_01.jpg de la carpeta Recursos a la biblioteca (library) activando la opción Archivo > Importar > Importar a la Biblioteca … (File > Import > Import to Library …) Aparecerá la siguiente ventana en la cual debe seleccionar la imagen mencionada, luego pulsar el botón Open. Observe que en el panel Library aparece la imagen importada.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
5
Observar que aparece un elemento nuevo en la biblioteca (library) Cambiar el nombre de la capa 1 (layer 1) a Mariposa 01 Ahora bien la idea es que la imagen desarrolle la siguiente animación: Ingresará desde la izquierda durante 1 segundo hasta colocarse en el centro del escenario (stage). Cuando la imagen ingresa lo hace totalmente transparente y conforme se coloca en el centro del escenario (stage) la imagen consigue su full color. Luego en el centro se queda estática para ser visionada durante un segundo a full color, a continuación inicia su viaje de salida hacia la derecha del escenario (stage) durante 1 segundo. Conforme la imagen se va desplazando hacia la derecha se va volviendo transparente, para desaparecer completamente cuando alcanza el extremo derecho del stage. Recuerde que la velocidad (Frame Rate) de la película será de 15 fotogramas por segundo (frames per second - fps). Condiciones de diseño de la animación: a. b. c. d.
Frame Rate = 15 frames per second (fps) Tiempo de ingreso = 1 segundo Tiempo de visionado = 1 segundo Tiempo de salida = 1 segundo
Como el ingreso de la imagen toma 1 segundo entonces dicha animación tomara 1 segundo *15 fotogramas (frames) por segundo = 15 fotogramas (frames). Cuando la imagen se queda quieta 1 segundo, esto significa que en ese tramo la imagen debe estar en la línea de tiempo (Timeline) durante 1 segundo por 15 frames por segundo = 15 fotogramas (frames). La salida de la imagen como dura 1 segundo, debe ocupar los últimos 15 fotogramas (frames) de la animación. Ahora a partir de estos planteamientos podemos determinar en que posición debemos insertar los fotogramas claves (Keyframes): a saber en el fotograma (frame) 1 existe uno por defecto, los demás deben ser insertados en los fotogramas 15, 30 y 45. Es decir hemos identificado tres tramos en los cuales la imagen tiene un comportamiento diferente: Primer tramo compuesto por 15 fotogramas (frames) donde existe una animación es decir los fotogramas (frames) deben estar enlazados con una flecha continua negra y están teñidos de color azul, el segundo tramo no tiene animación por lo que sus fotogramas (frames) siguen siendo plomos y finalmente un tercer tramo en el cual existe una animación, en donde los fotogramas (frames) están enlazados con una flecha negra y están teñidos de color azul. Con este plan claro, iniciamos la construcción de la animación : Ubicarse en el fotograma 1 (frame 1) de la capa (layer) mariposa 01. Seleccionar la imagen mariposa_01.jpg de la Biblioteca (Library) con el cursor y arrástrala hacia el centro del escenario (stage) tal como lo muestra la figura: Ubicar la fotografía de tal forma que el borde derecho de la foto este sobre el borde externo izquierdo del escenario (stage), es decir la fotografía estará fuera del escenario (stage) al lado izquierdo tal como lo muestra la figura: Con la foto seleccionada, activar la opción para convertirla en símbolo grafico Modificar > Convertir en Símbolo … (Modify > Convert to Symbol …) puede usar el shorcut F8. Colocarle como nombre mariposa_01 (es importante no dejar espacios en blanco en el nombre del símbolo gráfico). Luego pulsar la tecla Aceptar.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
6
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
7
Observar el panel Biblioteca (Library):
Notar que ahora tiene otro elemento: el símbolo gráfico mariposa_01 (Graphic). Ahora si podemos crear una animación con dicha fotografía. Observe que el fotograma (frame) 1 ahora esta plomo y el punto que inicialmente estaba vacío ahora esta lleno y es de color negro. Esto significa que ese fotograma clave (Keyframe) ya no esta vacío sino que existe un elemento que esta contenido en el. Luego ubicarse en el fotograma (frame) 15 de la capa (layer) Mariposa 01 e insertar un fotograma clave (Keyframe) puede usar el shortcut F6, observe como automáticamente se generan 15 copias adicionales de la misma fotografía. Esto lo puede reconocer porque los primeros 15 fotogramas (frames) se ponen plomos como lo muestra la figura. Luego ubicarse en algún fotograma (frame) intermedio entre el 2 y el 14, activar el botón derecho del mouse y seleccionar la opción Crear Interpolación Clásica (Create Classic Tween). Observe como los fotogramas cambian de color y aparece una flecha que los conecta del fotograma 1 al fotograma 15. A continuación ubicarse en el fotograma (frame) 15 de la capa (layer) mariposa 01, seleccionar con un clic la foto que aparece en el escenario (stage) y arrastrarla al centro del escenario (stage). El primer tramo de la animación: el ingreso de la foto al centro del escenario (stage) ya esta hecho. Ubicarse en el fotograma (frame) 30 de la capa (layer) mariposa 01 e insertar nuevamente un fotograma clave (keyframe) usando el shortcut F6. Recuerde que este segundo tramo no tiene animación (tiempo de visionado) Ubicarse en el fotograma (frame) 45 de la capa (layer) mariposa 01 e insertar nuevamente un fotograma clave (keyframe) usando el shortcut F6.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
8
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
Luego ubicarse en algún fotograma (frame) intermedio entre el 31 y el 44, activar el botón derecho del mouse y seleccionar la opción Crear Interpolación Clásica (Create Classic Tween). Observe como los fotogramas cambian de color y aparece una flecha que los conecta del fotograma 31 al fotograma 44. A continuación ubicarse en el fotograma (frame) 45 de la capa (layer) mariposa 01 y seleccionar la foto que aparece en el centro del escenario (stage) y arrastrarla de tal manera que el borde izquierdo de la fotografia este sobre el borde externo derecho del escenario (stage), es decir la fotografía estará fuera del escenario (stage) al lado derecho. Observe que estamos moviendo la última foto hacia la derecha, y que la foto 30 esta fija en el centro. Lo que ocurrirá es que la foto inicia la salida partiendo del centro y luego de 15 fotogramas (frames) sale completamente del escenario (stage). Para verificar que todo funciona correctamente activar la opción Control > Reproducir (Control > Play). Ahora vamos a repetir el ejercicio de tal forma que armemos una secuencia que muestren 5 fotografías entrando y saliendo del escenario una tras otra.
Lo que nos falta es que la foto entre difuminada y salga difuminada, aquí debemos tener cuidado por que también siempre se comenten errores. Ubicarse en el fotograma 1 (frame 1) de la capa (layer) mariposa 01, seleccionar con un clic la foto que aparece en el escenario (stage). Al lado derecho de la pantalla aparecen una serie de pestañas, activar la pestaña propiedades. (properties) Al desplegarse el panel correspondiente seleccionar la opción Alfa (Alpha) del campo Estilo (Style).
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
12
Luego de seleccionar la opción Alpha seleccionar el valor 0%. En ese momento se observa que la imagen desaparece (se volvió transparente) En el fotograma 15 (frame 15) el valor de Alpha se mantiene en 100% (su valor por defecto) En el fotograma 30 (frame 30) el valor de Alpha se mantiene en 100% (su valor por defecto) Sin embargo en el fotograma 45 el valor Alpha vuelve a cambiar. Ubicarse en el fotograma 45 (frame 45) de la capa (layer) mariposa 01, seleccionar con un clic la foto que aparece en el escenario (stage). Al lado derecho de la pantalla aparecen una serie de pestañas, activar la pestaña propiedades. Al desplegarse el panel correspondiente seleccionar la opción Alpha del campo propiedades. Luego de seleccionar la opción Alpha seleccionar el valor 0%. En ese momento se observa que la imagen desaparece (se volvió transparente)
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
13
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
14
Para verificar que en la primera capa (layer) todo funciona correctamente activar la opción Control > Reproducir. Es posible verificar el fade in de ingreso y el fade out de salida. Grabe esta película con el nombre ejercicio_secuenciafotografica_fade.fla con la opción Guardar como … (Save As ...) Recuerde que si en casa tiene una versión anterior (como Flash CS3) debe grabar su trabajo en dicho formato. Si cuenta en casa con una Mac, existe total compatibilidad de archivos entre Mac y PC, siempre y cuando sea la misma versión.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe