1

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

2

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.

3

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.

4

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

5

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.

6

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

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:

Herramienta

opciones

Color

fondo

Color trazo

7

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.

8

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.

Añadir guía

de

movimiento

9

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.

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.

Nodo

central e

inicio de

línea guía

10

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

11

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.

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

Clic Escena

12

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:

13

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 nuevo

proyecto documento de

flash crearemos dos

dibujos con ayuda de

14

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

lín

e

ESCENARIO DE

TRABAJO

PRINCIPAL

ESCENARIO DONDE

SE TRABAJARA CON

LA ANIMACION DEL

OBJETO

15

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.

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.

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.

INSERTAR

CAPA

GUIA

COLOR LINEA

16

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.

17

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.

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.

CENTRO DE LA

IMAGEN O NODO

CENTRAL

EL CENTRO DEBE

ESTAR AL INICIAR

LA LINEA GUIA.

18