GUIA Nº 3 OBJETIVOS: Diseñar mascaras utilizando gráficos o fotos. Identificar la importancia de las máscaras.

MASCARAS GRAFICOS Dicho efecto consiste en ocultar objetos que se encuentren en el escenario de flash, y mostrarlos poco a poco, por algún objeto que tenga una interpolación de movimiento o cualquier otro efecto que sea producto de tu imaginación. Como crear una máscara en flash. 1. realizamos un dibujo con las herramientas de flash, para el ejemplo diseñaremos un televisor. ejemplo:

2. luego de haberlo creado, escogemos el número de fotogramas a trabajar, ejemplo: 100 frm insertamos dos capas mas con el mismo número de fotogramas en la línea de tiempo, con los siguientes nombres: capa1: televisor capa2: texto 1

capa3: pantalla o mascara 3. escogemos la pantalla que se ha creado, en el ejemplo se la representa de color azul, la copiamos y pegamos en la capa3, que es la máscara a trabajar, para identificarla le cambiamos de color y la ubicamos encima de la pantalla inicial de la capa 1.

4. Nos ubicamos en la capa 2 o texto, escogemos la herramienta de texto cambiamos la configuración como: tipo de letra, tamaño, color etc, escribimos un texto xxxx en el primer fotograma ubicamos el texto, en la parte derecha en el centro de la pantalla del televisor creado, seleccionamos la palabra y F8 para convertir en símbolo, posteriormente le damos un nombre y aceptar.

2

5. Nos ubicamos en el primer fotograma de la capa texto y le damos un clic y en la parte inferior en las propiedades le damos un nombre al fotograma, ejemplo: palabras.

6. Nos ubicamos en el fotograma número 100 y con clic sostenido llevamos el texto al lado izquierdo del centro de la pantalla como lo muestra la imagen.

3

7. Hacemos clic entre el espacio de trabajo de los fotogramas número 1 y 100 de la capa texto, clic derecho e insertar interpolación de movimiento.

8. F i n a l m e n te vamos a la capa 3 o capa mascara, clic derecho en el nombre de esta, y seleccionamos la opción mascara.

9. Ahora si podemos correr nuestra película o animación con ctrl + enter.

MASCARAS E IMÁGENES 4

Para trabajar con máscaras e imágenes se debe seguir los siguientes pasos: 1. Importamos una foto al escenario para poder trabajar con ella, con la herramienta de transformación seleccionamos la imagen y la ajustamos al escenario de trabajo, a esta capa le damos el nombre de foto.

2. En seguida creamos una nueva capa con el nombre de estrella, escogemos la herramienta de rectángulo de la esquina de la flecha desplegable, y escogemos la opción de polystar, como muestra la imagen.

5

3. En propiedades escogemos el color de fondo, le quitamos el trazo y escogemos la herramienta opciones.

Color trazo

Color fondo

Herramienta opciones

4. Clic en opciones, en estilo escogemos la herramienta estrella, y aceptar, después de este paso podemos comenzar a dibujar nuestra estrella.

5. Dibujamos la estrella dentro de la foto, como lo muestra la imagen:

6

6. Con la herramienta selección clic en la estrella y F8 para convertirla en símbolo, escogemos la opción clip de película y le damos un nombre. Luego de convertirla a símbolo le damos doble clic encima de la estrella, este proceso nos llevara inmediatamente a la línea de tiempo de esta, donde podemos realizar la animación necesaria al símbolo, observamos en la imagen que luego del doble clic se crea una pestaña con el nombre del símbolo, el icono donde dice estrella es donde se trabajara el clip de película para la animacion.

7. Escogemos el número de fotogramas a trabajar, F6 en el fotograma 60 de la capa actual, y luego clic en añadir guía de movimiento.

7

Añadir guía de movimiento

8. Escogemos la herramienta lápiz, en propiedades le cambiamos el color de trazo a un color rojo, para que la línea se resalte, clic en el fotograma uno de la capa guía y dibujamos un camino o la guía por donde queremos que pase la estrella, sin salirse de la foto.

8

9. Luego clic en el fotograma 60 de la capa uno, con la herramienta selección llevamos con clic sostenido la estrella a la cara de algún personaje que aparezca en la foto, y con la herramienta de transformación, aumentamos de tamaño la estrella.

10. Creamos una interpolación de movimiento con clic derecho, en la capa uno en el fotograma 30, nos ubicamos en el fotograma uno y llevamos el nodo de la estrella al punto de inicio de la línea guía.

Nodo central e inicio de línea guía

11. En seguida nos vamos al fotograma número 60 de la capa uno, y aquí llevamos el nodo de la estrella al punto final de la línea guía, como indica la imagen.

9

12. Enter para comprobar que el proceso se dio, la estrella tiene que seguir el camino de la línea guía.

13. Ahora le vamos a crear un stop para que la animación no sea secuencial, para esto insertamos una nueva capa que quede encima de la capa guía, nos vamos al fotograma 60 de la capa creada presionamos la tecla F6 y enseguida F9 para que nos lleve a las acciones del programa.

Insertar capa

10

14. Aquí escribimos con minúsculas stop();

Cerramos esta ventana. Para cerrarla se la puede deshabilitar desde el menú ventana y la opción acciones. 15. Ahora nos vamos a la escena inicial donde estábamos trabajando con la foto.

Clic Escena 16. Le damos clic derecho en la capa estrella, y escogemos la opción de mascara

11

17. Finalmente se ha creado la máscara y podemos correr la película.

CONTINUACION GUIA Nº 3 OBJETIVOS: Crear gráficos utilizando la barra de herramientas. Diseñar capas guías utilizando gráficos. Identificar la importancia de las capas guía.

CAPAS GUIAS Y GRAFICOS Los Gráficos son símbolos que nos permiten representar objetos estáticos y animaciones sencillas. En caso de que utilicemos un símbolo gráfico para realizar una animación, debemos tener en cuenta que ésta estará ligada a la línea de tiempo de la película en la que se encuentre. Es decir, la animación se reproducirá siempre y cuando la película original también se esté reproduciendo. Esto hace que, pese a tener su propia línea de tiempo, no puedan contener sonidos, controles ni otros símbolos gráficos. Así pues, normalmente utilizaremos los gráficos para imágenes estáticas o para cuando nos convenga que una animación se reproduzca sólo cuando determinado frame de la línea de tiempo de la película esté en marcha. LOS GRAFICOS PUEDEN SER: 12

Estáticos: estos gráficos se mantienen sin cambios cuando pasa el tiempo. Estos gráficos son los típicos en los fondos y en los objetos que no desempeñan ninguna función especial. Su tamaño y por tanto, el tiempo de carga de este tipo de gráficos, aunque siempre dependerá de la resolución, de sus dimensiones y de la forma en la que estén creados , será en general reducido.

Animaciones: este tipo de gráfico varía su forma, posición u otras propiedades a medida que va pasando el tiempo. Puesto que para realizar la animación se deben usar varios gráficos más además del original o bien realizar determinadas acciones que modifiquen el estado inicial, el tamaño de esta clase de gráficos, para las mismas dimensiones y forma de creación, será mucho mayor que uno estático. Por esto, aunque las animaciones dan a nuestra web un aspecto más bonito y espectacular tienen dos inconvenientes: 1) Si se trata de un Mapa de Bits, la web puede llegar a tener un tamaño excesivamente grande. 2) Aunque no se traten de mapas de bits, por ejemplo, si son animaciones típicas de Flash, cuyo tamaño no es excesivo, el hecho de poner muchas animaciones puede llegar a "marear" un poco al visitante de nuestro sitio y desviar su atención de lo que realmente importa, su contenido. CAPAS GUIA Es muy útil emplear esta técnica de “capas guía” para crear interpolaciones de movimiento variable. Se evitara la pérdida de tiempo, tratando de ajustar un objeto fotograma por fotograma, y lo complicado que es tratar de guiarlo manualmente por la trayectoria que se desee.

TALLER

PRÁCTICO

1. En un proyecto flash dibujos

nuevo documento de crearemos dos con ayuda de 13

la barra de herramientas, para este ejercicio desarrollaremos una abejita y una flor como muestra la imagen o al gusto que se desee.

2. Seleccionamos la abejita con la herramienta de selección haciendo un recuadro por fuera, que coja toda la imagen, luego presionamos la tecla F8, que nos lleva a convertir en símbolos los objetos. Y convertimos la abejita en un clic de película, le damos un nombre y aceptar.

3. Hacemos el mismo procedimiento con la flor , la seleccionamos toda, F8 y la convertimos en gráfico, con el nombre correspondiente.

4. Luego de haber convertido en clip de película la imagen de la abeja, hacemos doble clic en ella esto nos lleva a

ESCENARIO DE TRABAJO PRINCIPAL

ESCENARIO DONDE SE TRABAJARA CON LA ANIMACION DEL OBJETO

lín e 14

a de tiempo, donde se realizara la animación del clic. 5. Nos ubicamos en la línea de tiempo y nos vamos al fotograma 60 y le damos F6. 6. Insertamos una capa guía con la opción que aparece en la imagen.

INSERTAR CAPA GUIA

7. E n s e g uida de este paso nos ubicamos en el primer fotograma de la Guía: capa1, escogemos la herramienta de lápiz, de la barra de herramientas y en las propiedades de color escogemos un color rojo para identificar la línea guía que se creara.

COLOR LINEA

8. Con clic sostenido dibujamos un camino a nuestro gusto, desde la ubicación inicial de la abeja hasta la flor, como muestra la imagen, con este paso se crea la linea guía que nos ayudara en la animación.

15

9. Ahora nos ubicamos en el fotograma número 60 de la capa 1 y llevamos a la abeja al parte superior de la flor, le hacemos una pequeña animación con la herramienta de transformación y la hacemos más grande.

10. En el intermedio del fotograma número uno y numero 60 le damos clic derecho e insertamos una interpolación de movimiento.

16

11. luego de este procedimiento le damos clic en el primer fotograma de la capa 1, escogemos la herramienta selección y cogemos el objeto de la abeja con clic sostenido y la ubicamos donde inicia la línea guía creada, para mayor exactitud le damos zoom a la imagen, y ubicamos el nodo central del objeto.

CENTRO DE LA IMAGEN O NODO CENTRAL EL CENTRO DEBE ESTAR AL INICIAR LA LINEA GUIA.

12. finalmente nos ubicamos en el fotograma número 60 de la capa 1 y llevamos el centro del objeto donde termina la línea guía.

13. Si el procedimiento y los puntos céntricos de la imagen están bien enlazados a la línea guía, el efecto se abra creado. Nos vamos al escenario principal y le damos Ctr l + enter para reproducir la animación. 17

18