1. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11° - TERCER PERIODO
Elaborado por: Ing. HAIMER GUTIERREZ M.
TEMA: TEMA: FLASH
COMPETENCIA: Utiliza de manera creativa el programa Flash en el diseño de animaciones y
material multimedia
GUIA NO 3.
LAS CAPAS. CONCEPTO BASICO.
Todo el mundo ha visto alguna vez cómo trabajan los dibujantes de dibujos animados. Y
todos hemos visto cómo colocan una hoja semitransparente con dibujos sobre otras y la
superposición de todas forman el dibujo final. ¿Por qué no dibujan todo en una misma
hoja? ¿Por qué trabajan con varios niveles y con varios dibujos si van a acabar todos
juntos?
Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a las
Capas que utiliza Flash. Cada capa es, por tanto, un nivel en el que podemos dibujar,
insertar sonidos, textos... con INDEPENDENCIA del resto de capas. Hay que tener en
cuenta que todas las capas comparten la misma Línea de Tiempos y por tanto, sus
distintos fotogramas se reproducirán simultáneamente.
Clarifiquemos esto con un ejemplo:
Supongamos que tenemos 2 capas. En una de ellas los fotogramas del 1 al 10 contienen
el dibujo de una portería de fútbol. En la otra los fotogramas del 1 al 5 contienen el dibujo
de un portero (del 5 en adelante están vacíos).
Pues bien, esta película nos mostrará
inicialmente (durante el tiempo que duren
los primeros 5 fotogramas) la portería con
el portero, para después (durante los
fotogramas del 5 al 10) mostrar la portería
sin portero.
De este modo la portería es independiente
del portero, y podemos tratar estos objetos
con total libertad, ya que no interfieren
entre ellos para nada.
Otra razón para separar los objetos en
capas, es que Flash nos obliga a colocar cada animación distinta en una capa. De lo
contrario, todos los objetos que se encuentren en dicha capa formarán parte de la
animación. Si queremos que un objeto NO forme parte de una animación, deberemos
quitarlo de la capa en la que se produce dicha animación.
Siguiendo con el ejemplo del portero, si quisiéramos crear un movimiento que haga que el
portero se desplace hacia un lado no hay ningún inconveniente, pero si la portería
estuviera en la misma capa que el portero, entonces AMBOS objetos se moverían hacia
dicho lado, con lo que resultaría imposible que sólo se moviera el portero. La solución es
separar los objetos en 2 capas, como ya hemos hecho.
Las capas además, tienen otras utilidades, nos permiten ordenar nuestra película de
forma lógica, y nos ayudan en la edición de dibujos (evitando que se "fundan" en uno sólo,
o bloqueando el resto de capas de modo que sólo podamos seleccionar la capa que nos
interese).
2. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11° - TERCER PERIODO
Elaborado por: Ing. HAIMER GUTIERREZ M.
TRABAJAR CON CAPAS
La vista standard de una capa es la que
muestra la imagen. Veamos para qué sirven los
distintos botones y cómo usarlos.
Insertar Capas : Como su nombre indica,
sirve para Insertar capas en la escena actual.
Inserta capas normales (en el siguiente punto se
verán los distintos tipos de capas).
Añadir Capa Guía : Inserta una capa de
tipo guía. Se tratan en profundidad el siguiente
punto.
Borrar Capa : Borra la capa seleccionada.
Cambiar Nombre: Para cambiar el nombre a una capa, basta con hacer doble clic en el
nombre actual.
Propiedades de Capa: Si hacemos doble clic en el icono , podremos acceder a un panel
con las propiedades de la capa en la que hayamos hecho clic. Podremos modificar todas las
opciones que hemos comentado anteriormente y alguna más de menor importancia.
Aquí puedes cambiar diferentes opciones sobre la capa, como su nombre o su color.
También puedes bloquearla u ocultarla.
Pero haremos especial hincapié en la opción Tipo cuyas opciones, Guía y Máscara,
veremos más adelante en el curso.
REORGANIZAR LAS CAPAS
3. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11° - TERCER PERIODO
Elaborado por: Ing. HAIMER GUTIERREZ M.
Como ya se ha comentado, las distintas capas tienen muchas cosas en común unas con otras. Lo
primero y principal es la Línea de tiempos, todas las capas de una misma escena comparten la
misma línea de tiempos y por tanto, los objetos de todos los fotogramas 1 de todas las capas se
verán al mismo tiempo en la película superpuestos unos sobre otros. ¿y qué objeto está delante
de los demás? Pues este criterio viene dado por la colocación de las Capas en la película. Los
objetos que se mostrarán delante de todos los demás serán aquellos que se encuentren en la
capa situada más arriba.
Es decir, si nos fijamos en el ejemplo anterior:
El portero aparece delante de la portería,
porque la capa "Portero" está situada encima
de la capa "Portería", como puede apreciarse
en la imagen. Si quisiéramos cambiar esta
distribución, basta con hacer clic en la capa
que queramos mover y arrastrarla hacia arriba
o hacia abajo hasta la posición deseada.
Veremos como los objetos se colocan delante
o detrás de los de la capa seleccionada según
su capa se encuentre por encima o por debajo
de la nuestra.
Para mover un fotograma de una capa a otra, basta con seleccionar el fotograma a mover y
arrastrarlo hasta la capa donde queramos pegarlo. También se puede Copiar el fotograma y
luego pegarlo en la capa de destino.
ANIMACIÓN CON CAPAS MÁSCARA
Con la Animación con Capas Máscara, cualquier forma que dibujemos en la capa
máscara, será la forma a través de las que se muestre el contenido de las capas
enmascaradas
En otras palabras, quedará visible sólo lo que quede dentro de esta forma - a modo de agujero a través del cual se
puedan ver las capas situadas por debajo-. e invisiblelo que quede fuera
Para insertar una capa máscara
(con la capa activada) hacer clic con botón
izquierdo sobre ella y elegir máscara.
4. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11° - TERCER PERIODO
Elaborado por: Ing. HAIMER GUTIERREZ M.
Para llevar a cabo un efecto máscara
1. Dibujamos -o escribimos- en el escenario la imagen -o el texto- que queremos sea
mostrado a través de la máscara (p.e: el texto: "Realización Multimedia") e identificamos
esta capa (p.e.: "texto", o "RealMulti", o similar)
2. Insertar una nueva capa, por encima de la del texto (la identificamos como
"máscara")
3. En la capa máscara dibujar el objeto máscara través del cual queremos
que se muestre el contenido de la capa texto "realización multimedia" (por
ejemplo un círculo ovalado que rellenamos de color rojo), y
lo agrupamos (modificar>agrupar).
4. Situamos el objeto máscara dibujado en el punto inicial de la trayectoria a
seguir. (p.e.: parte izquierda del escenario sin que tape al texto)
5. En la Línea de Tiempo colocamos un fotograma clave (F6) en el final de la
trayectoria (fotograma 25), del objeto máscara (que hemos agrupado), y otro en el mismo
fotograma de la capa del texto (fotograma 25).
6. En el fotograma final de la capa "máscara" (fotograma 25), disponemos al objeto
máscara en la situación final de su trayectoria.
7.En la misma capa "máscara" volvemos al primer fotograma para Interpolar el
movimiento del objeto máscara
8.Transformamos la capa "máscara" que, hasta el momento es una capa
normal (que en el ejemplo tiene el texto: "Realización Multimedia") en una capa máscara.
Para transformar una capa normal a una capa máscara:
Clic con el botón derecho del ratón sobre el nombre de la capa a transformar (que en
el ejemplo tiene el círculo ovalado rojo, esto es el "objeto máscara") y escoger la opción "máscara".
Observamos:
5. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11° - TERCER PERIODO
Elaborado por: Ing. HAIMER GUTIERREZ M.
- como la capa "máscara" obtiene, delante de su nombre, un icono cuadrado negro
con un círculo azul en su interior
- como la capa "texto:RealMulti" obtiene, delante de su nombre, un icono cuadrado
azul con una esquina medio doblada y se coloca ligeramente deslazada hacia el interior
indicando su dependencia de la "capa máscara".
EJERCICIO 1.
1. Cree una animación que incluya por lo menos tres capas.
2. La primera capa debe tener un escenario dibujado con las herramientas ovalo,
cuadro y lápiz.
3. La segunda capa debe tener una figura que haga una animación de forma,
transformando de una figura inicial a una final, minimo de 40 fotogramas.
4. La tercera capa debe contener una interpolación de movimiento de minimo 40
fotogramas.
5. El punto es individual e independiente para cada estudiante.
EJERCICIO 2:
Crear una animación por interpolación de movimiento.
1. Cree, una nueva película.
2. Inserte un nuevo símbolo, llamado Avión, con un dibujo similar al de la figura.
3. De vuelta en la escena, inserte un rectángulo que ocupe todo el fondo de la
escena y asígnele un color con un degradado.
4. En la línea de tiempo, cambie el nombre de la capa; llámela Fondo.
5. La película durará 10 fotogramas. Para conseguirlo, haga clic en el fotograma 10 y
seleccione la opción Insertar> Línea de tiempo>Fotograma.
6. Inserte una nueva capa pulsando en el botón Insertar capa en la parte inferior de la
línea de tiempo.
7. Utilice la palabra Avión como nombre para la nueva capa.
8. Arrastre el símbolo Avión desde la biblioteca hasta la esquina inferior izquierda de
la escena.
9. Haga clic en la casilla 10 de esta capa e inserte un fotograma clave pulsando la
tecla F6.
6. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11° - TERCER PERIODO
Elaborado por: Ing. HAIMER GUTIERREZ M.
10. Desplace el avión hasta la esquina superior derecha. Ya está todo preparado. Ha
llegado el momento de aplicar la interpolación. Para ello necesita utilizar el panel
Propiedades.
EJERCICIO 3:
Crear una interpolación de movimiento (continuación),
1. Seleccione la casilla 1 de la capa Avión. Observará que el avión vuelve a su
posición original.
2. En el panel Propiedades, seleccione la opción Movimiento en el cuadro Animar. En
la línea de tiempo las casillas intermedias se vuelven de color azul, atravesadas
por una flecha que une los dos fotogramas clave.
3. Pulse Intro para reproducir la animación o Control-Intro para probar la escena.
EJERCICIO 4: CREAR UNA MÁSCARA EN MOVIMIENTO.
1. Cree una nueva película, con tamaño 500 por 300 píxeles y seleccione un tono
naranja para el fondo.
2. Dibuje en una capa adicional una máscara sonriente la cual inicia de derecha a
izquierda de la escena.
3. Añada un símbolo más, con una máscara triste de izquierda a derecha en la
escena.
4. En una capa adicional añada un nuevo símbolo que contenga el texto “Las
máscaras en Flash”. El símbolo debe quedar centrado entre las mascaras
5. Utilice dos colores, negro para el principio y rojo para la palabra “Flash’.
6. Amplíe la duración de la película a 60 fotogramas,
7. Realice la interpolación de movimiento de tal forma que las máscaras se desplacen
sobre el texto.
EJERCICIO 5. ACELERACION DE OBJETOS ANIMADOS
1. Primero vamos a crear la interpolación sobre la que aplicaremos el efecto. Vamos
a basarnos en un Clip de Película cualquiera.
2. Importa un Clip de Película ya creado o bien lo creas tú mismo (creas un dibujo y
lo conviertes en Clip de Película).
3. Lo sitúa en el escenario si no lo está ya.
4. Pulsa el botón derecho del ratón sobre el fotograma que contiene el clip de película
7. INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA
INFORMATICA GRADO 11° - TERCER PERIODO
Elaborado por: Ing. HAIMER GUTIERREZ M.
5. Selecciona Crear interpolación de Movimiento del menú emergente.
6. Selecciona el fotograma 20 y pulsa F6
7. Desplaza el Clip de Película de ese fotograma a la parte derecha del área de
trabajo.
8. Pulsa Intro para ver la animación sin salir del entorno de trabajo
9. Ahora selecciona el fotograma 1 con el botón derecho y selecciona Propiedades
para abrir el panel Propiedades del fotograma. (si no está ya abierto)
10. Introduce un 100 en la casilla Aceleración (fuera) , para hacer que acelere al
principio y vaya frenando poco a poco
11. Introduce ahora un -100 en la casilla Aceleración (dentro) , para hacer que
aumente progresivamente su velocidad
EJERCICIO 6.
1. Cree una animación que contenga dos capas
2. En una capa se tiene un fondo estático, puede ser importado
3. En otra capa se tiene una figura que acelera al inicio y desacelera al final rotando
por la escena
4. La duración de la escena debe ser de por lo menos 60 fotogramas.
EJERCICIO 7. ANIMACION POR CAPA
1. Cree una capa con un fondo estático, puede importarlo o dibujarlo
2. Cree una máscara con una forma de figura inicial para los 30 primeros fotogramas,
los siguientes 30 se aplica una segunda figura como mascara.