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
12 de abril 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 04 Sesión 01 Alberto Mejía Manrique (alberto.mejia@upc.edu.pe)
Mascaras: En este ejercicio utilizaremos 4 ejercicios básicos para ilustrar la aplicación del uso de máscaras: ¿Cómo se construye una máscara?
Es necesario preparar una fotografía para iniciar este ejercicio para ello: o
Seleccionar 1 foto (640 por 480 pixeles). Resolución 72 ppp
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 la imagen seleccionada a la biblioteca (con la opción Import > Import to Library), es posible verificar que la importación fue realizada correctamente si observamos los elementos en el panel de la bibliteca.
Agregar al Timeline un layer mas y nombralos como Mascara y Fotografia de acuerdo con el siguiente orden:
Ubicarse en el frame 1 del layer Fotografia, luego seleccione la imagen de la biblioteca y arrástrela hacia el stage.
Ubicarse en el frame 1 del layer Mascara y dibujar usando la herramienta Circulo un circulo rojo con borde negro sobre la imagen anterior, tal como lo muestra la figura:
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
4
Luego colocar el cursor sobre el nombre del layer Mascara, pulsar el botón izquierdo del Mouse y activar la opción Mascara (Mask). En ese momento veremos parte de la imagen a través del circulo, observe que no interesa el color del circulo
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
5
Observe que el layer Fotografia al ser enmascarado se identa hacia la derecha y su icono cambia de color, del mismo modo que cambia de color el layer Mascara. Además ambos layers automáticamente se bloquean, si deseo desactivar la mascara repito la operación anterior pero esta vez quitando el check de la opción Mascara (Mask)
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
6
Cuando uno desactiva la opción Mascara observe que los layers permanecen bloqueados por lo que es necesario desbloquear el layer mascara (si deseo alterar la forma de la mascara) o desbloquear el layer Fotografia (si deseo alterar la imagen).
Grabar la película con el nombre mascara01.fla
Efecto Obturador Fotográfico:
Abrir una nueva película en Adobe Flash (recuerde seleccionar la opción ActionScript 2.0)
En este segundo ejercicio volvemos a crear dos layers y los nombramos del mismo modo que en el ejercicio anterior (Mascara y Fotografia). Colocamos en el primer frame del layer Mascara y del layer Fotografia un circulo rojo y una fotografía respectivamente. En este ejercicio mantendremos el tamaño de la película en 800 x 600 pero esta vez configuramos un Frame Rate igual a 20 fps.
En este caso el circulo rojo se moverá (tendrá animación) por lo que es necesario convertirlo en símbolo gráfico (Modify > Convert to Symbol > Graphic) con el nombre mascara.
En este caso la animación durara dos segundos por lo tanto usaremos 2*20 = 40 frames. Nos ubicamos en el frame 40 del layer Mascara e insertamos un Keyframe (F6 en PC). Por un instante perdemos de vista la fotografía, eso es normal porque la fotografía solo esta en el primer frame mientras que el circulo rojo esta en 40 frames.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
7
Nos ubicamos en el frame 40 del layer Fotografia e insertamos un Frame (F5 en PC).
Luego nos ubicamos en algún punto intermedio entre el frame 2 y 39 del layer Mascara y seleccionamos Classic Tween.
Luego nos ubicamos en el frame 40 del layer Mascara y seleccionamos el círculo rojo del Stage y lo movemos a su posición final. En este caso una vez que hemos realizado el movimiento,
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
8 usando la herramienta Free Transform reducimos el tamaño del círculo rojo original. Observaremos que Flash no solo interpola las posiciones de los 38 círculos intermedios sino también sus tamaños.
Finalmente colocamos el cursor sobre el nombre del layer Mascara, pulsar el botón izquierdo del Mouse y activar la opción Mascara (Mask).
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
9
Para verificar lo que hemos hecho activamos la opción File > Publish Settings > Flash y podremos ver la animación del efecto creado.
Grabar la película con el nombre mascara02.fla
Efecto Ventana de Tren:
Abrir una nueva película en Adobe Flash (recuerde seleccionar la opción ActionScript 2.0)
La diferencia conceptual entre este ejercicio y el anterior es que en el caso del efecto “Ventana de Tren” lo que se mueve es la fotografía, mientras que en el efecto “Obturador Fotográfico” lo que se mueve es la mascara.
En este tercer ejercicio volvemos a crear dos layers y los nombramos del mismo modo que en el ejercicio anterior (Mascara y Fotografia). Colocamos en el primer frame del layer Mascara y del layer Fotografia un circulo rojo y una fotografía respectivamente. En este ejercicio el tamaño de la película será de 1600 x 600 y también configuramos un Frame Rate igual a 20 fps.
Para que el efecto se mas vistoso usaremos una fotografía tipo “Advantic” llamada partenon.jpg de 1478 x 480 pixeles.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
10
En este caso la posición inicial del círculo es casi tangente al borde interno derecho de la fotografía.
Seleccionar la fotografía ubicada en el primer frame del layer Fotografia y convertirla en Graphic con el nombre de fotografía.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
11
En este caso también la animación durara dos segundos por lo tanto usaremos 2*20 = 40 frames. Nos ubicamos en el frame 40 del layer Fotografia e insertamos un Keyframe (F6 en PC). Por un instante perdemos de vista el circulo rojo, eso es normal porque el circulo rojo solo esta en el primer frame mientras que la fotografia esta en 40 frames.
Nos ubicamos en el frame 40 del layer Mascara e insertamos un Frame (F5 en PC).
Luego nos ubicamos en algún punto intermedio entre el frame 2 y 39 del layer Fotografia y seleccionamos Classic Tween.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
12
Luego nos ubicamos en el frame 40 del layer Fotografia y seleccionamos la fotografía que esta en el Stage y lo movemos a su posición final, en este caso buscamos que dicha fotografía sea tangente interior al borde interno izquierdo de círculo rojo.
Finalmente colocamos el cursor sobre el nombre del layer Mascara, pulsar el botón izquierdo del Mouse y activar la opción Mascara (Mask).
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
13
Para verificar lo que hemos hecho activamos la opción File > Publish Settings > Flash y podremos ver la animación del efecto creado.
Grabar la película con el nombre mascara03.fla
Efecto Cortina (usando Motion Tween o Interpolación de Forma):
Abrir una nueva película en Adobe Flash (recuerde seleccionar la opción ActionScript 2.0)
La diferencia conceptual entre este ejercicio y los anteriores es que aprenderemos un nuevo tipo de interpolación conocida como interpolación de forma. En este caso el programa no reproduce las posiciones intermedias sino las formas intermedias, de allí el nombre Motion Tween. Lo interesante de este tipo de interpolaciones es que es posibles incorporar en una sola animación una interpolación de forma y de movimiento al mismo tiempo.
En este cuarto ejercicio volvemos a crear dos layers y los nombramos del mismo modo que en el ejercicio anterior (Mascara y Fotografia).
Importamos una fotografía de 640 x 480 y la colocamos en el primer frame del layer Fotografia. En este ejercicio el tamaño de la película también es de 640 x 480 y también configuramos un Frame Rate igual a 20 fps.
Asegurarse de que la foto cubra por completo el stage de la pelicula, esto lo puede hacer manualmente arrastrando la foto sobre el stage o usando el panel Properties.
Esto se logra colocando en el campo x: 0 y en el campo y: 0 (como si la imagen estuviera en el cuarto cuadrante de la circunferencia)
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
14
Dibujamos en el primer frame del layer Mascara un rectangulo rojo (sin borde) de tal modo que cubra el extremo izquierdo de la fotografía (como se muestra en la figura).
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
15
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
16
Para dibujar este rectangulo se puede usar el panel de Properties y hacelo mas exacto. Esto se logra colocando en el campo x: 0 y en el campo y: 0 (como si la imagen estuviera en el cuarto cuadrante de la circunferencia) y colocando en width: 100 (es posible iniciar con un menor ancho)
En este caso también la animación durara dos segundos por lo tanto usaremos 2*20 = 40 frames para desarrollar toda la animación. Nos ubicamos en el frame 40 del layer Fotografia e insertamos un Frame (F5 en PC).
Luego nos ubicamos en el frame 40 de layer Mascara e insertamos un Keyframe (F6 en PC), nos mantenemos en el frame 40 del layer Mascara y eliminamos el rectángulo rojo del Stage y lo reemplazamos por un rectángulo rojo que esta vez cubra completamente la fotografía.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
17
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
18
Nos ubicamos en algún punto intermedio entre el frame 2 y 39 del layer Mascara y activamos la opción Motion Tween (Interpolación de Forma), veremos que el layer cambia a un color verde y aparece una flecha en el Timeline de forma similar a lo que ocurría con un Classic Tween.
Si probamos la animación observaremos que el rectángulo rojo inicial crece y cubre completamente a la fotografía.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
19
Finalmente colocamos el cursor sobre el nombre del layer Mascara, pulsar el botón izquierdo del Mouse y activar la opción Mascara (Mask).
Para verificar lo que hemos hecho activamos la opción File > Publish Settings > Flash y podremos ver la animación del efecto creado.
Grabar la película con el nombre mascara04.fla
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe