Las capas III

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...
Capas animación movimiento : Son las capas que contienen una animación por interpolación de movimiento.
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)

El funcionamiento de las Capas Guía y sus utilidades lo veremos a fondo en el tema de las Animaciones
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".
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.

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...

Podéis poner a prueba vuestros conocimientos realizando:

Ejercicio. Planeta Saturno (II)

1. Abre un archivo nuevo e intenta reproducir el planeta Saturno (como hicimos en los primeros temas).

2. En este caso deberás utilizar capas de tipo Máscara.
 Pasos a seguir:

1. Crea tres capas utilizando el botón que encontrarás en la línea de tiempo.
2. Haz doble clic sobre el nombre de la capa que se encuentre más abajo. Cámbialo por Planeta.
3. Haz doble clic sobre el símbolo de la que se encuentra en la parte superior. Llámala Máscara y dale el tipo Máscara.
4. Finalmente haz doble clic sobre el símbolo de la capa que se encuentra en medio. Llámala Aros y dale el tipo con Máscara.
   En estos momentos deberás tener algo como esto:
   
5. Selecciona la capa Planeta y dibuja un círculo (puedes aplicarle un relleno degradado y quitarle el borde).
6. Selecciona la capa Aros y dibuja un círculo perfecto, rellenándolo con un degradado con varias paradas (profundizaremos en los degradados más adelante).
7. Selecciona el círculo que hará de aro, y con la herramienta Transformación 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 Máscara y con la herramienta pincel pinta sobre el Escenario para tapar la forma ovalada de los aros de modo que sólo pintes lo que quieras que se muestre. Es decir, bastaría con no pintar la parte que quedaría detrás del planeta.
   Aquí puedes ver un ejemplo de cómo quedaría:
   
   El planeta está en gris, los aros en rojo y la máscara en verde.
10. Ya casi lo tenemos, podemos mejorar el dibujo seleccionándolo todo (clic en la esquina superior izquierda y sin soltar hasta la esquina inferior derecha) y seleccionando la herramienta Transformación libre para rotar el dibujo en su totalidad unos grados hacia la izquierda.
11. Para probar el efecto de la máscara pulsa las teclas Ctrl + Enter en tu teclado.

Las Capas II

Trabajar con capas. Opciones avanzadas

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 Capas aparece un punto. Este punto significa que no está activada esta opción, lo mismo sucede con el botón Bloquear capas. En la columna Mostrar 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:

Reorganizar las capas

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. (Los del video)

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.

Capas

¿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 objetos III

Panel Información

Además de controlar la posición de los objetos desde el Panel Alineamiento, también podemos hacerlo, de un modo más exacto (más matemático) desde otro panel, el Panel Información.
A este Panel se puede acceder desde el Menú Ventana → Información. Las posibilidades de este Panel son limitadas, pero si buscamos exactitud en las medidas o no nos fiamos de las distribuciones de objetos que crea Flash, debemos acudir a él.

Medidas del Objeto: Aquí introduciremos un número que represente el tamaño de nuestro objeto en la medida seleccionada en las Propiedades del documento. AN: hace referencia a la anchura y AL: a la altura.
Situación del objeto: Desde aquí controlamos la posición del objeto en el escenario. La X y la Y representan el eje de coordenadas (La X es el eje Horizontal y la Y el eje vertical). Las medidas también van en función de las medidas elegidas para la película. Estas medidas se toman desde la esquina superior izquierda de la pantalla (X=0 e Y=0).
Color Actual: Indica el color actual en función de la cantidad de Rojo (R), Verde (V), Azul (A) y transparencia Alfa (A) que contenga.
Este indicador puede ser engañoso, el motivo es que indica el color que tiene el objeto por el que en ese momento pasamos el cursor del ratón. Por tanto, podemos tener seleccionado un objeto (haciendo clic en él) y ver en el Panel Información su tamaño y su posición, pero al desplazar el ratón, el valor del color cambiará y ya no indicará el color del objeto seleccionado, sino el del objeto por el que pase el cursor. Tened esto en cuenta para no cometer errores o perder tiempo innecesario.
Posición del Cursor: Indica la posición del cursor. Es útil por si queremos que suceda algo en la película al pasar el cursor justo por una posición determinada o para situar partes del objeto en lugares específicos.

Los grupos

Un grupo no es más que un conjunto de objetos. Si bien no cualquier conjunto de objetos forman un grupo, ya que para crear un grupo, debemos indicarle a Flash que así lo queremos. Para ello, basta seleccionar los objetos que queremos que formen parte de un grupo y después hacer clic en el Menú Modificar → Agrupar (Ctrl + G).
Tras hacer esto observaremos que desaparecen las texturas que indicaban que los objetos estaban seleccionados y observamos que el grupo pasa a ser un "todo", ya que resulta imposible seleccionar a uno de sus miembros sin que se seleccionen a su vez los demás. Además, aparece el rectángulo azul (por defecto) que rodea al grupo, definiéndolo como tal.

Crear grupos es muy útil, ya que nos permite, como ya hemos dicho, tratar al conjunto de objetos como un todo y por tanto, podemos aplicar efectos al conjunto, ahorrándonos la labor de hacerlo de objeto en objeto.
Por ejemplo, supongamos que tenemos un dibujo que representa un conjunto de coches. Tras dibujarlos todos, nos damos cuenta de que queremos aumentar el tamaño de los coches. Podemos aumentar el tamaño de los coches de uno en uno, corriendo el riesgo de aumentar unos más que otros y perdiendo las proporciones entre ellos, o podemos formar un grupo con los coches y aumentar el tamaño del grupo, de modo que aumenten todos de tamaño a la vez y en la misma proporción. De igual modo, podemos mover al grupo de posición, hacer que gire...
Al crear un grupo, simplemente estamos dando unas propiedades comunes a un conjunto de objetos y, en ningún caso perdemos nuestro objeto. En cualquier momento podemos deshacer el grupo, mediante el Menú Modificar → Desagrupar.
Además, Flash nos permite modificar los elementos de un grupo sin tener que desagruparlo. Para ello, seleccionamos el Grupo de elementos y hacemos clic en el Menú Edición → Editar Seleccionado, o directamente hacemos doble clic sobre el grupo con la herramienta Seleccionar. Podremos editar los objetos que componen el grupo por separado teniendo en cuenta que, como es lógico, los cambios realizados afectarán al grupo además de al elemento en cuestión.

Ejercicio 1: Rellenos y Bordes

1. Crea dos rectángulos con el interior de color verde y el borde negro.
2. En uno de ellos elimina el Relleno (rectángulo de la izquierda en la imagen).
3. En el otro, elimina el borde (rectángulo de la derecha en la imagen).

Ejercicio. Selecciones

1. Dibuja 5 óvalos. Dales el color de relleno y borde que quieras (elige un relleno que no sea transparente )
2. Selecciona 3 de ellos usando la tecla SHIFT.
3. Selecciona 3 de ellos usando la Herramienta Selección (Flecha).
4. Selecciona 3 únicamente los bordes de 3 de ellos.

Ejercicio. Alinear objetos

1. Dibuja 4 objetos (círculos, rectángulos...).
2. Coloca uno en cada esquina usando el Panel Alinear.

Ejercicio. Grupos

1. Agrupa los 4 objetos del ejercicio anterior en un único grupo.
2. Cambia su posición (colócalos, por ejemplo, en el centro de la película).
3. Desagrúpalos.

Trabajar con objetos II

Colocando objetos. Panel Alinear

Ahora que ya sabemos seleccionar los objetos o las partes de estos que consideremos oportunas, veamos cómo colocarlos en el Escenario.
Para colocarlos de un modo preciso (por no decir exacto), Flash pone a nuestra disposición el Panel Alinear. Este Panel lo podemos encontrar en el Menú Ventana → Alinear. Así funciona:

El Panel Alinear permite colocar los objetos tal y cómo le indiquemos. Antes de ver las posibilidades, debemos hacer hincapié en la opción Alinear en escenario. Esta opción nos permite decir a Flash que todas las posiciones que indiquemos para nuestros objetos tomen como referencia el escenario.
Si esta opción no está seleccionada, los objetos toman como referencia al conjunto de objetos en el que se encuentran, y se colocan en función de ellos. Lo más habitual es seleccionar En Escenario, para que los objetos se coloquen según los límites de la película, en el centro del fotograma etc...
Conozcamos un poco mejor el Panel Alinear y sus posibilidades:

• Alineamiento: Sitúa los objetos en una determinada posición del fotograma (si está seleccionado En Escena). Las distintas opciones afectan a todos los elementos seleccionados y se emplean muy a menudo para situar los objetos en determinados sitios predefinidos. Por ejemplo: Si quisiéramos situar un objeto en la esquina inferior izquierda, bastaría pulsar el primer y el sexto botón consecutivamente.

Por ejemplo, si queremos que coincida el centro de dos objetos los alineamos al centro horizontal y verticalmente. 

• Distribuir: Sitúa los objetos en el escenario en función de unos ejes imaginarios que pasan por cada uno de ellos, de modo que la distribución de los mismos sea uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer botón de la izquierda. Cada uno de los 2 cuadrados se situará en un extremo de la película (uno arriba y otro abajo).

• Coincidir Tamaño: Hace coincidir los tamaños de los objetos. Si está activo Alinear en escenario estirará los objetos hasta que coincidan con el ancho y el largo de la película. Si no está activo, la referencia será el resto de objetos. Por ejemplo, si tenemos 2 cuadrados distintos y la opción Alinear en escenario no está activada, al hacer clic en el primer botón de "Coincidir Tamaño", el cuadrado más estrecho pasará a tener la anchura del cuadrado más ancho. Si Alinear en escenario hubiera estado activo ambos cuadrados hubieran pasado a tener el ancho del fotograma.

• Espacio: Espacia los objetos de un modo uniforme.

Para ver ejemplos de uso de estos comandos, pudés ver la animación.

CUESTIONARIO 2

1. Para colocar un objeto de forma precisa, ¿Qué pone Flash a nuestra disposición?
2. ¿Y en donde lo podemos encontrar?
3. ¿Para qué nos sirve este panel?
4. ¿Que significa o nos dice "Alienar en el escenario"?
5. Si esta opción no está seleccionada, ¿Que sucede con los objetos?
6. Dibuja los íconos de Alinear y que función realiza.
7. Dibuja los íconos de "Distribuir" y que función realiza.
8. Dibuja los íconos de "Coincidir tamaño" y que función realiza.
9. Dibuja los íconos de "Espacio" y que función realiza.

Actividad. Alinear objetos

Ejercicio paso a paso

1. Abre un archivo nuevo.
2. Dibuja 4 rectángulos de diferentes colores situados en diferentes puntos del escenario.
3. Haz clic en la herramienta Selección.
4. Vamos a seleccionar todos los elementos que se encuentran en el escenario, para ello hacemos clic en la esquina superior izquierda y sin soltar el botón del ratón arrastramos hasta la esquina inferior derecha y soltamos (asegúrate de que todos los elementos se encuentran en el área de selección).
5. Abrimos el panel de Alineación, esta vez lo haremos pulsando la combinación de teclas CTRL + K (aunque también podrías abrirlo desde el menú Ventana).
6. Marca la opción Alinear en escenario.
7. Alineamos todos los objetos a la derecha del escenario haciendo clic en .
   Observa como todos los objetos se han movido para tener su borde derecho pegado al borde derecho del escenario.
8. Alineamos todos los objeto (aún seleccionados) a la izquierda del escenario haciendo clic en .
   Fíjate que los objetos ahora se han movido al lado contrario. Alineándose su borde izquierdo con el borde izquierdo del escenario.

Trabajar con objetos (Bloque 2)

Los objetos en Flash ¿Qué son?

En los primeros temas vimos las herramientas para dibujar elementos en nuestra película, obteniendo formas. En este tema profundizaremos en cómo trabajar con estas formas u objetos, para ajustarlos a nuestras necesidades.

Independientemente de si estamos trabajando en una animación, en una página web, en un catálogo para un DVD o en cualquier otra cosa, tendremos que trabajar con objetos. A grandes rasgos, podremos considerar un objeto es ¿?todo aquello que aparezca en nuestra película y sea visible, de modo que podamos trabajar con él, por ejemplo, cualquier imagen que creemos o importemos, un botón, un dibujo creado por nosotros mismos etc...
Los objetos de dibujo así considerados tienen 2 partes fundamentales:
El Borde: Consiste en una delgada línea que separa el objeto del exterior, del escenario. Puede existir o no, según nos convenga. Cuando creamos un objeto, el borde se crea siempre y su color será el indicado en el Color de Trazo (dentro del Panel Mezclador de Colores). Si queremos dibujar creando Bordes deberemos emplear las Herramientas Lápiz, Línea o Pluma y si queremos que nuestro dibujo no tenga borde, bastará con seleccionar el borde y suprimirlo (ver siguiente punto).
El Relleno: El relleno no es más que el propio objeto sin borde. Es, por tanto, la parte interna del objeto. Su existencia también es arbitraria, ya que podemos crear un objeto cuyo color de relleno sea transparente, como ya se vio en el tema de Dibujar, y por tanto, parecerá que dicho objeto no tiene relleno, aunque en realidad sí que exista pero sea de color transparente. Para dibujar Rellenos (sin borde) podemos usar herramientas tales como el Pincel o el Cubo de Pintura.

CUESTIONARIO 1

1. ¿Cómo podemos considerar a un objeto?
2. Los objetos de dibujo tienen 2 partes fundamentales, ¿Cuáles son?
3. En que consiste el Borde.
4. En que consiste el Relleno.
5. ¿Cómo seleccionamos el relleno de un objeto?
6. ¿Qué hacemos para deseleccionar?
7. ¿Qué hacemos para seleccionar todo el borde?
8. Para seleccionar toda la forma, ¿Qué hacemos?
9. Para añadir mas elementos a la seleccion actual ¿Que hacemos?
10. Cuando seleccionamos simbolos ¿De que color se enmarca?

ACTIVIDAD:
Realiza los rectangulos del video con los mismos colores y cambiales los lados con diferente color.