CAPAS EN FLASH

¿Qué es una capa?

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 (láminas de acetato) 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, y la mayoría 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 Línea de Tiempo 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).

Otro motivo es para organizar mejor nuestro contenido. Igual que creábamos una capa para los elementos de audio, crearemos capas para otros elementos, como el código ActionScript.

Trabajar con capas

Videotutorial Flash
Videotutorial YouTube

La vista estándar de una capa es la que muestra la imagen. Veamos para qué sirven los distintos botones y cómo 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 verán los distintos tipos de capas).

Crear carpeta

Nueva capa
Crear carpeta

: Nos sirve para crear carpetas, que nos ayudarán 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

Tipo de capa

junto al nombre de la capa, podremos acceder a un panel con laspropiedades 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.

Prpiedades de capa

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.

Trabajar con capas. Opciones avanzadas

Videotutorial Flash
Videotutorial YouTube

Mostrar / Ocultar Capas

: Este botón permite ver u ocultar todas las capas de la película. Es muy útil cuando tenemos muchas capas y sólo queremos ver una de ellas ya que permite ocultar todas a la vez, para después mostrar sólo 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 edición 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 botón nos muestra/oculta los contenidos de todas las capas como si sólo estuviesen formados por bordes. De este modo y ante un conjunto numeroso de objetos, podremos distinguirlos a todos de forma fácil y podremos ver en qué capa está cada uno de ellos.

También 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 Capasaparece un punto. Este punto significa que no está activada esta opción, lo mismo sucede con el botón Bloquear capas. En la columnaMostrar capas como contornos aparece un cuadrado con relleno, lo que simboliza que los objetos se mostrarán completos y no sólo 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 opción.

Además, 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 podéis ver cómo queda un objeto en función de tener activada o no la opción contorno:

7.4. Reorganizar las capas

Videotutorial Flash
Videotutorial YouTube

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 tiempo, 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 objeto de una capa a otra, deberemos seguir unos sencillos pasos.

•

Aprende a hacerlo realizando el ejercicio paso a paso 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. También se puede Copiar el fotograma y luego pegarlo en la capa de destino.

Tipos de capas

Como habréis podido comprobar al ver las propiedades generales de una capa o al hacer clic con el botón derecho del ratón 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 más usadas y se emplean para todo, colocar objetos, sonidos, acciones, ayudas...

Capa normal
Tipos de capas
Capa normal

Capas animación movimiento : Son las capas que contienen una animación por interpolación de movimiento.

Capa guía
Capa guía asignada

Capas Guía / : Son capas especiales de contenido específico. 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 misión es representar la trayectoria de un objeto animado, su contenido suele ser una línea (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 línea curva. La segunda capa la hemos definido como Capa Guía, para que al realizar la animación de movimiento (esto lo veremos en un tema posterior)su contenido no se vea en la película, sino que sirva de recorrido para la bola azul.

Es importante recordar que el contenido de las Capas Guía no se verá en la película final. Su efecto hará que la pelota azul se desplace de un extremo de la línea al otro siguiendo esa ruta.

Capas guiadas (Guided Layers) : Definir una capa como guía no tiene sentido hasta que definamos también una capa guiada. Esto es, una capa que quedará afectada por la guía definida en la Capa guía.

Si no definimos una capa guiada, la capa guía no tendrá ningún efecto y si bien no se verá en la película (por ser una capa guía) tampoco provocará ningún efecto en las demás 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 guía.

Las capas guía y las capas guiadas se relacionan entre sí de un modo evidente. A cada capa guía le corresponden una serie de capas guiadas.

Al asociar una capa guía con una capa guiada, el icono que representa a la capa guía cambia, indicándonos que está realizando correctamente su labor.

En la imagen podemos ver un ejemplo de capa guía y capa guiada correctamente asociadas entre sí. (La capa llamada inferior es, evidentemente, la capa con Guía)

Guía - Capa guiada

El funcionamiento de las Capas Guía y sus utilidades lo veremos a fondo en el tema de las Animaciones

Capa máscara

Capas Máscara : 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 sólo dejan que se vea la parte de éstas que tapan los objetos situados en las capas máscara (son como filtros). Al igual que las capas guía, los objetos existentes en este tipo de capas tampoco se ven en la película final. Sí se verán los objetos de su correspondiente capa enmascarada a los que estén "tapando".

Enmascarada

Capas Enmascaradas : Estas capas funcionan conjuntamente con las anteriores, ya que son las capas que están bajo las máscaras y a las que afectan. Al igual que las capas guía y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto.

Sus objetos sí que son visibles en la película final, pero sólo cuando algún objeto de la capa Máscara está sobre ellos.

Capas Máscara - Enmascarada

Veamos el funcionamiento de estas capas con un ejemplo. En este ejemplo, los rectángulos azules forman parte de la Capa Enmascarada y por tanto se verán en la película final (pero sólo lo que tape la capa máscara). El óvalo rojo está situado en la capa Máscara y no se verá en la película, pero sólo se verá lo que él "tape", que es lo que se ve en la imagen de la derecha. Así se emplean las máscaras...

Capas máscara - enmascarada
Resultado