LAS CAPAS

1. Qu es una capa?
Todo el mundo ha visto alguna vez cmo trabajan los dibujantes de dibujos
animados. Y todos hemos visto cmo colocan una hoja semitransparente (lminas
de acetato) con dibujos sobre otras y la superposicin de todas forma 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 utilizan Flash, y la mayora de programas de dibujo o retoque,
como Photoshop. 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 Lnea de Tiempo y por tanto,
sus distintos fotogramas se reproducirn simultneamente.
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 portera de ftbol. En la otra los fotogramas del 1 al 5
contienen el dibujo de un portero (del 5 en adelante estn vacos).
Pues bien, esta pelcula nos mostrar inicialmente (durante el tiempo que duren
los primeros 5 fotogramas) la portera con el portero, para despus (durante los
fotogramas del 5 al 10) mostrar la portera sin portero.
De este modo la portera es independiente del portero, y podemos tratar
estos objetos con total libertad, ya que no interfieren entre ellos para nada.

Otra razn para separar los objetos en capas, es que Flash nos obliga a
colocar cada animacin distinta en una capa. De lo contrario, todos los objetos
que se encuentren en dicha capa formarn parte de la animacin. Si queremos
que un objeto no forme parte de una animacin, deberemos quitarlo de la capa en
la que se produce dicha animacin.
Siguiendo con el ejemplo del portero, si quisiramos crear un movimiento que
haga que el portero se desplace hacia un lado no hay ningn inconveniente, pero
si la portera estuviera en la misma capa que el portero, entonces ambos objetos
se moveran hacia dicho lado, con lo que resultara imposible que slo se moviera
el portero. La solucin es separar los objetos en 2 capas, como ya hemos hecho.
Las capas adems, tienen otras utilidades, nos permiten ordenar nuestra
pelcula de forma lgica, y nos ayudan en la edicin de dibujos (evitando que se
"fundan" en uno slo, o bloqueando el resto de capas de modo que slo podamos
seleccionar la capa que nos interese).
Otro motivo es para organizar mejor nuestro contenido. Igual que crebamos
una capa para los elementos de audio, crearemos capas para otros elementos,
como el cdigo ActionScript.
2. TRABAJAR CON CAPAS

La vista estndar de una capa es la que muestra la imagen. Veamos para qu

sirven los distintos botones y cmo usarlos.

Nueva capa

: Como su nombre indica, sirve para Insertar una nueva capa en

la escena actual. Crea capas normales (en el siguiente punto se vern los
distintos tipos de capas).
Crear carpeta

: Nos sirve para crear carpetas, que nos ayudarn a

organizar nuestras capas.

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 sobre el icono

junto al

nombre de la capa, 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 ms de menor importancia.

Aqu puedes cambiar diferentes opciones sobre la capa, como su nombre o su

color. Tambin puedes bloquearla u ocultarla.

Pero

haremos

especial

hincapi

en

la

opcin Tipo cuyas

opciones, Gua y Mscara, veremos ms adelante en el curso.

3. TRABAJAR CON CAPAS.OPCIONES AVANZADAS.
Mostrar / Ocultar Capas

: Este botn permite ver u ocultar todas las

capas de la pelcula. Es muy til cuando tenemos muchas capas y slo queremos
ver una de ellas ya que permite ocultar todas a la vez, para despus mostrar slo
la actual. Para activar la vista de una capa en concreto (o para ocultarla) basta
con hacer clic en la capa correspondiente en el punto (o en la cruz) que se
encuentra bajo el icono "Mostrar / Ocultar capas"
Bloquear Capas

: Bloquea la edicin de todas las capas, de modo que no

podremos modificarlas hasta desbloquearlas. Para bloquear o desbloquear una

capa concreta, procederemos como en el punto anterior, clic en el punto o icono
"Cerrojo" situados en la capa actual bajo el icono "Bloquear Capas".
Bloquear una capa es muy til cuando tenemos varios objetos juntos y en capas
distintas y queremos asegurarnos de que no modificamos "sin querer" alguno de
ellos. Tras bloquear su capa podremos trabajar con la seguridad de no modificar
dicho objeto, ni siquiera podremos seleccionarlo, de modo que editaremos con
mayor facilidad el objeto que queramos.
Mostrar/Ocultar capas como contornos

: Este botn nos muestra/oculta

los contenidos de todas las capas como si slo estuviesen formados por bordes.
De este modo y ante un conjunto numeroso de objetos, podremos distinguirlos a
todos de forma fcil y podremos ver en qu capa est cada uno de ellos.
Tambin se puede activar o desactivar para cada capa de un modo similar a los
anteriores botones.
Veamos como se muestran estas opciones activadas y desactivadas.

En la primera imagen la capa actual no tiene ninguno de los botones activados,

podemos observar que en la columna Mostrar Capas aparece un punto. Este
punto significa que no est activada esta opcin, lo mismo sucede con el
botn Bloquear capas. En la columna Mostrar capas como contornos aparece un

cuadrado con relleno, lo que simboliza que los objetos se mostrarn completos y
no slo sus contornos.
En la segunda imagen aparece una cruz situada bajo la columna Mostrar Capas,
lo que indica que dicha capa no es visible en el escenario. Aparece un cerrojo
bajo la columna "bloquear capas", lo que simboliza que la capa est bloqueada. Y
en la columna "Mostrar capas como contornos" NO aparece relleno. La capa se
est mostrando en este modo y no podremos ver los rellenos hasta deseleccionar
esta opcin.
Adems, el color de los contornos ser diferente para cada capa, de modo que
podamos distinguirlas mejor. El color del contorno, coincidir con el indicado en
cada capa. En este ejemplo podis ver cmo queda un objeto en funcin de tener
activada o no la opcin contorno:

4. Reorganizar las capas

Como ya se ha comentado, las distintas capas tienen muchas cosas en comn
unas con otras. Lo primero y principal es la Lnea de tiempo, todas las capas de
una misma escena comparten la misma lnea de tiempos y por tanto, los objetos
de todos los fotogramas 1 de todas las capas se vern al mismo tiempo en la
pelcula superpuestos unos sobre otros. y qu objeto est delante de los
dems? Pues este criterio viene dado por la colocacin de las Capas en la
pelcula. Los objetos que se mostrarn delante de todos los dems sern
aquellos que se encuentren en la capa situada ms arriba.
Es decir, si nos fijamos en el ejemplo anterior:
El portero aparece delante de la portera, porque la capa " Portero" est
situada encima de la capa "Portera", como puede apreciarse en la imagen. Si
quisiramos cambiar esta distribucin, basta con hacer clic en la capa que
queramos mover y arrastrarla hacia arriba o hacia abajo hasta la posicin
deseada.

Veremos como los objetos se colocan delante o detrs de los de la capa

seleccionada segn su capa se encuentre por encima o por debajo de la nuestra.

Para mover un objeto de una capa a otra, deberemos seguir unos sencillos
pasos.
Aprende a hacerlo realizando el ejercicio siguiente Mover objetos entre
capas.
Para mover un fotograma de una capa a otra, basta con seleccionar el
fotograma a mover y arrastrarlo hasta la capa donde queramos pegarlo. Tambin
se puede Copiar el fotograma y luego pegarlo en la capa de destino.
EJERCICIO: MOVER OBJETOS ENTRE CAPAS.
CAPACIDAD:
Mueve un objeto situado en una capa a otra
PROCEDIMIENTO:
1. Abre el archivo trabajo.fla, (como crear este archivo esta debajo de este
ejercicio).
2. Seleccionamos la Capa donde est el rectngulo que queremos cambiar de
capa.
3. Hacemos doble clic en el rectngulo para seleccionarlo en su totalidad
(relleno y borde).

4. Pulsamos el botn derecho del ratn. Se abrir un men como el de la

imagen.

5. Seleccionamos Cortar. El rectngulo desaparecer.

6. Seleccionamos el fotograma en el que queramos colocar el objeto (situado
en la capa donde se encuentra el texto que creamos en ejercicios
anteriores).
7. Hacemos clic con el botn derecho sobre el escenario de este fotograma de
destino.
8. Hacemos clic en Pegar para colocar el objeto en este fotograma o hacemos
clic en Pegar in Situ para pegar el objeto en la misma posicin en la que
estaba al cortarlo
COMO CREAR EL ARCHIVO TRABAJO.FLA
1. En el escenario de Flash CS6, dibujamos un circulo perfecto
2. Creamos una nueva capa haciendo clic en el botn

en la lnea de tiempo.

3. 3 Hacemos clic en la Herramienta Texto y despus en el escenario.

4. Veremos esta imagen

prueba.

. Escribe dentro el texto Esto es un texto de

5. Hacemos clic en el Propiedades, si es que tenamos minimizado este Panel.

6. Haz que el texto se encuentre centrado haciendo clic en
7. Cambia la fuente
desplegable Familia.

del

texto

a Verdana seleccionndola

en

el

.
8. Cambia el espaciado entre caracteres del texto a 2 escribindolo en la
opcin Espaciado.
9. Por ltimo cambia el tamao del texto a 30 y ponlo en Negrita utilizando los
controles de Tamao y Estilo.
10. Guardamos con el nombre de trabajo.fla

5. Tipos de capas
Como haz podido comprobar al ver las propiedades generales de una capa o al
hacer clic con el botn derecho del ratn sobre el icono de una capa cualquiera,
existen varios tipos de capas.

Capas normales

: Son las capas por defecto de Flash y tienen todas las

propiedades descritas en los puntos anteriores. Son las ms usadas y se emplean

para todo, colocar objetos, sonidos, acciones, ayudas...
Capas animacin movimiento
por interpolacin de movimiento.

: Son las capas que contienen una animacin

Capas Gua

: Son capas especiales de contenido especfico. Se

emplean en las animaciones de movimiento de objetos y su nico fin es marcar la

trayectoria que debe seguir dicho objeto. Debido a que su misin es representar
la trayectoria de un objeto animado, su contenido suele ser una lnea (recta,
curva o con cualquier forma).
En esta imagen podemos ver el contenido de 2 capas. La primera de ellas
contiene la bola azul y la segunda contiene la lnea curva. La segunda capa la
hemos definido como Capa Gua, para que al realizar la animacin de movimiento
(esto lo veremos en un tema posterior) su contenido no se vea en la pelcula,
sino que sirva de recorrido para la bola azul.
Es importante recordar que el contenido de las Capas Gua no se ver en la
pelcula final. Su efecto har que la pelota azul se desplace de un extremo de la
lnea al otro siguiendo esa ruta.

Capas guiadas (Guided Layers) : Definir una capa como gua no tiene
sentido hasta que definamos tambin una capa guiada. Esto es, una capa que
quedar afectada por la gua definida en la Capa gua.
Si no definimos una capa guiada, la capa gua no tendr ningn efecto y si bien
no se ver en la pelcula (por ser una capa gua) tampoco provocar ningn efecto
en las dems capas. En la imagen anterior, la bola azul se deber encontrar en
una capa Guiada, de lo contrario no seguir la ruta marcada por la capa gua.
Las capas gua y las capas guiadas se relacionan entre s de un modo evidente.
A cada capa gua le corresponden una serie de capas guiadas.
Al asociar una capa gua con una capa guiada, el icono que representa a la capa
gua cambia, indicndonos que est realizando correctamente su labor.

En la imagen podemos ver un ejemplo de capa gua y capa guiada

correctamente asociadas entre s. (La capa llamada inferior es, evidentemente,
la capa con Gua)

El funcionamiento de las Capas Gua y sus utilidades lo veremos a fondo en el

tema de las Animaciones
Capas Mscara

: Estas capas se pueden ver como plantillas que tapan a

las capas enmascaradas (las veremos enseguida). El funcionamiento de estas

capas es algo complejo (tampoco demasiado) y se analizar en temas posteriores.
Basta con decir que estas capas se colocan "encima" de las capas a las que
enmascaran y slo dejan que se vea la parte de stas que tapan los objetos
situados en las capas mscara (son como filtros). Al igual que las capas gua, los
objetos existentes en este tipo de capas tampoco se ven en la pelcula final. S
se vern los objetos de su correspondiente capa enmascarada a los que estn
"tapando".
Capas Enmascaradas

: Estas capas funcionan conjuntamente con las

anteriores, ya que son las capas que estn bajo las mscaras y a las que
afectan. Al igual que las capas gua y las capas guiadas deben ir asociadas unas a
otras para que su efecto sea correcto.
Sus objetos s que son visibles en la pelcula final, pero slo cuando algn
objeto de la capa Mscara est sobre ellos.

Veamos el funcionamiento de estas capas con un ejemplo. En este ejemplo, los

rectngulos azules forman parte de la Capa Enmascarada y por tanto se vern en
la pelcula final (pero slo lo que tape la capa mscara). El valo rojo est situado
en la capa Mscara y no se ver en la pelcula, pero slo se ver lo que l "tape",
que es lo que se ve en la imagen de la derecha. As se emplean las mscaras...

EJERCICIO: Planeta Saturno

Como siempre, partimos de un nuevo archivo ActionScript 3.

1. Crea tres capas utilizando el botn

que encontrars en la lnea de tiempo.

2. Haz doble clic sobre el nombre de la capa que se encuentre ms abajo.

Cmbialo por Planeta.
3. Haz doble clic sobre el smbolo
de la que se encuentra en la
parte superior. Llmala Mscara y dale el tipo Mscara.
4. Finalmente haz doble clic sobre el smbolo
de la capa que se
encuentra en
medio. Llmala Aros y dale el tipo con
Mscara.
En estos momentos debers tener algo como esto:

5. Selecciona la capa Planeta y dibuja un crculo (puedes aplicarle un relleno

degradado y quitarle el borde).

6. Selecciona la capa Aros y dibuja un crculo perfecto, rellenndolo con un

degradado con varias paradas (profundizaremos en los degradados ms
adelante).
7. Selecciona el crculo que har de aro, y con la herramienta Transformacin
libre (debajo de las flechas), dale la forma deseada.
8. Utiliza el panel Alinear para centrar el planeta y el aro vertical y
horizontalmente, y queden perfectamente alineados.
9. Ahora selecciona la capa Mscara y con la herramienta pincel pinta sobre el
Escenario para tapar la forma ovalada de los aros de modo que slo pintes lo
que quieras que se muestre. Es decir, bastara con no pintar la parte que
quedara detrs del planeta.Aqu puedes ver un ejemplo de cmo quedara:

El planeta est en gris, los aros en rojo y la mscara en verde.

10. Ya casi lo tenemos, podemos mejorar el dibujo seleccionndolo todo (clic en
la esquina superior izquierda y sin soltar hasta la esquina inferior derecha)
y seleccionando la herramienta Transformacin libre para rotar el dibujo
en su totalidad unos grados hacia la izquierda.
11. Para probar el efecto de la mscara pulsa las teclas Ctrl + Enter en tu
teclado.