Clip de Película

¿Qué es un clip de película?

Un Clip de Película, simplemente Clip o MovieClip es una película en sí misma, como cualquiera de las que podamos haber creado hasta el momento en este curso. Normalmente nos referimos a ellas como clips cuando las incluimos en otra película, formando un símbolo. Por tanto, cualquier clip siempre podrá estar compuesto por otros clips insertados en él, que a su vez estén formados por otros, etc.
Al igual que los otros tipos de símbolos de Flash, los clips de película tienen su propia línea de tiempo. Sin embargo, y a diferencia de los Gráficos (como veremos a continuación), esta línea temporal no está ligada a la línea de tiempo del documento que lo contiene, de tal forma que su ejecución es independiente, y en un fotograma de la película principal se puede estar reproduciendo repetidamente un clip.
Este tipo de símbolos puede contener cualquier otro tipo de símbolo: gráfico, clip o botón, así como cualquier objeto creado con Flash, ya que  un clip es realmente una película.
Otra de las ventajas de los Clips la encontramos cuando realizamos películas de gran complejidad y tamaño, en la que intervienen un número muy elevado de fotogramas, debido a que en la vista general del documento, nosotros sólo veremos un fotograma por clip, el cual puede estar compuesto por muchos frames, lo que nos permitirá tener una mejor visión de cómo se desarrolla nuestra animación, y una línea de tiempo más clara y "limpia"
Los Clips son una de las herramientas que dan mayor potencia a Flash CS5, permitiéndonos crear películas de gran complejidad y multiplicar los efectos visuales, ya que se pueden crear múltiples movimientos independientes entre sí y crear conexiones entre los diferentes Clips de un documento.
Todas aquellas cosas que no podíamos hacer con un símbolo de tipo Gráfico, lo podemos hacer con un Clip, además de poder realizar también todo aquello que nos permitía dicho símbolo. Por esto, normalmente se utilizan los clips para cualquier tipo de animación debido a su gran flexibilidad, dejando los gráficos sólo para imágenes estáticas.

10.2. Comprobar las propiedades de un Clip

Como hicimos con los gráficos, vamos a ver como la línea de tiempo de un clip no está ligada a la línea de tiempo del documento que lo contiene y, a la vez, veremos la diferencia entre los clips y los símbolos Gráficos, que supone una de las razones de la mayor utilización de los primeros en lo que se refiere a la creación de animaciones.
Para ello abriremos una nueva película Flash (Archivo → Nuevo, archivo ActionScript 3). Después importaremos una imagen cualquiera o bien crearemos una. La convertimos en Símbolo (botón derecho, Convertir en símbolo...) y seleccionamos en Tipo "Clip de Película"
Arrastramos al escenario (si no está ya allí) nuestro clip de película.
Ahora tenemos nuestro Clip, insertado en nuestro nuevo documento Flash. Es decir, tenemos dos películas, cada una con su línea de tiempo.
 Ahora veamos que son independientes, siguiendo un proceso similar al que utilizamos con los símbolos de tipo Gráfico.

Observa la línea de tiempo de la película principal y comprueba que sólo tiene un fotograma.

Editemos el Clip que insertamos en el documento, haciendo doble clic sobre él y examinemos su línea de tiempos. Aparecerá un único MovieClip. Podemos realizar algo similar a lo realizado con los gráficos. Si creásemos una animación de movimiento, como veremos más adelante, podría quedarnos así:

  Como vemos, la duración del clip que hemos insertado es mucho mayor que la película nueva que lo contiene. Si el símbolo fuera un gráfico ya hemos visto que al reproducir la película no ocurriría nada, porque sólo se reproduciría el primer fotograma de su línea de tiempo. En cambio, al tratarse de un clip, comienza a reproducirse al pasar por el primer fotograma, y como la liena de tiempo es independiente, sigue reproduciéndose aunque la línea de tiempo principal haya acabado.

Crear un nuevo Clip

 

Gráficos III

Crear un GIF animado con Flash

Como vimos en el tema básico hay tipos de archivo de mapa de bits que soportan animaciones, como los GIF. Pues bien, con Flash también podemos crear una animación y guardarla como un GIF animado. Los fotogramas de la película se convertirán en fotogramas del GIF.
Para lograrlo, tenemos que publicar la película como GIF, lo cual configuramos desde la Configuración de publicación, en el menú Archivo.
Entre los formatos disponibles, marcamos Imagen GIF.

Y configuramos algunos parámetros pulsando en su pestaña:

Entre las opciones concretas del GIF, hay dos que afectan a la animación:
En Reproducción, podemos marcar Estática (por defecto) o Animación. Debemos de elegir esta última para que el gif sea animado.
Si es gráfico es animado, podemos seleccionar cuántas veces se repite dicha animación. Entre Reproducir indefinidamente en bucle, o Repetir un número determinado de veces.

Otra opción muy interesante es Transparente, en la que decidimos cómo se exporta el escenario. Si como un color opaco o transparente.
Abajo vemos el GIF Animado que resulta de exportar nuestro gráfico Flash.

Gráficos II

Introducir un Mapa de bits

Introducir un archivo vectorial

Al igual que los mapas de bits, hay otros programas que trabajan con gráficos vectoriales como también hace Flash CS5.

Si queremos traer un archivo vectorial creado en otro programa, por ejemplo Freehand o Illustrator, podemos hacerlo de manera muy sencilla.
Simplemente accedemos al menú Archivo → Importar → Importar a escenario. A continuación, seleccionamos el tipo de archivo correspondiente al gráfico vectorial que queramos importar. Por ejemplo AI de Illustrator.

Pulsamos Abrir, y ya tenemos nuestro archivo vectorial.
Este archivo sí lo podremos modificar internamente ya que Flash es capaz de hacer gráficos de este tipo.
Concretamente, Illustrator pertenece también a Adobe, igual que Flash, con lo que la compatibilidad en este caso es total.

Exportar un objeto Flash como mapa de bits

La interfaz de dibujo de Flash, como hemos visto, resulta muy cómoda en determinadas ocasiones para realizar dibujos. Así podría interesarnos utilizar Flash CS5 para crear un dibujo y después utilizarlo en otros programas o para cualquier otro uso.
Esto es perfectamente posible con Flash, ya que nos permite exportar un objeto de flash como un bitmap. Eso sí, debemos tener en cuenta, como vimos en el tema básico, que la mayoría  de mapas de bits no permiten animaciones, por esto el objeto flash que exportemos no debería contener animación ya que ésta no se guardará.
Para realizarlo seleccionamos el objeto que vamos a exportar y accedemos al menú Archivo → Exportar → Exportar Imagen... Luego introducimos en el campo Nombre el nombre que queremos que tenga nuestro nuevo bitmap.
Seleccionamos el tipo de mapa de bits en que deseemos convertir nuestro objeto y pulsamos Guardar.
Ahora ya podemos usar nuestro objeto Flash como un bitmap.

Gráficos

¿Qué es un gráfico?

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, ya que para los casos que hemos comentado anteriormente en los que un gráfico no nos es útil, Flash nos ofrece otro tipo de símbolos como veremos en temas posteriores.

9.2. Tipos de gráficos

Los gráficos pueden ser:

Gráfico estático

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

Animación

b) 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 (ahora veremos que significa esto) 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.

Creando un gráfico y comprobando sus propiedades

Como explicar teóricamente las propiedades de un gráfico resulta un tanto confuso, vamos a ver de manera práctica lo que queremos explicar. Vamos a crear un gráfico en Flash y a comprobar las propiedades que hemos comentado en el primer apartado del tema. Para ello, abre una nueva película Flash (Archivo→ Nuevo, archivo ActionScript 3).
Ahora tenemos que crear el objeto que queremos convertir en un símbolo Gráfico. Dibujemos, por ejemplo, un óvalo en cualquier lugar del área de trabajo con la herramienta Óvalo de la barra de herramientas de dibujo y démosle un color de relleno que será lo que después animemos (Selecciona el fondo del óvalo y dale el color azul mediante la herramienta Relleno de color. ).
Ya hemos creado nuestro objeto, vamos a convertirlo en un símbolo gráfico ¿lo recuerdas?
Selecciona el objeto, haz clic derecho sobre el o haz clic en el menú modificar y selecciona Convertir en Símbolo, lo convertimos en un símbolo como ya habíamos visto y dándole el nombre GráficoAnimado y seleccionando el Tipo Gráfico:

Ahora vamos a crear la animación del gráfico. Puesto que todavía no hemos visto a fondo las animaciones, la vamos a realizar de una forma que quizá no sería la más apropiada la mayoría de las veces, pero nos servirá muy bien para este ejemplo. Para ello selecciona nuestro gráfico y pulsa el botón derecho del ratón. Se desplegará un menú, en el que seleccionaremos la opción Edición para modificar el gráfico y acceder a su línea de tiempo. Comprueba que estás en la línea de tiempos del gráfico (justo encima del escenario existe una secuencia que nos indica en qué nivel nos encontramos. En la imagen inferior, se puede apreciar que nos encontramos en "Escena1 - Gráfico Animado" y, por tanto estamos dentro del gráfico (y la línea de tiempos que vemos es la del gráfico, y no la de la película principal)

Crearemos a continuación nuevos fotogramas clave seleccionando uno a uno los frames número 2, 3 y 4 y pulsando F6 cuando los seleccionemos.
Pulsa sobre el frame 2 y cámbiale el color de fondo al óvalo como hicimos antes. Haz lo mismo en los dos siguientes frames.
Tu línea de tiempos debería tener este aspecto:

Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al nivel inicial (Película principal) y podremos ver nuestro gráfico "desde fuera".
Ahora ya tenemos completo nuestro gráfico animado. ¿Qué crees que sucederá si reproducimos la película? Comprobémoslo pulsando Control + Intro, se visualizará la película.
¿Y bien? Nada. Nada en absoluto. El óvalo sigue tal cual. ¿Por qué? La respuesta está en las características de los gráficos que habíamos explicado: la línea de tiempos del gráfico va ligada a la de la película.
En este caso la línea de tiempos de la película tenía un solo frame, mientras que la del gráfico tenía 4, por tanto, no le hemos dado tiempo al gráfico a desarrollar su animación; sólo ha reproducido un frame, el primero.
¿Cómo podemos solucionarlo?
Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del reproductor de Flash, selecciona el fotograma 5 de la película principal y pulsa F6. Ahora tenemos 5 fotogramas en la película principal.
Pulsa de nuevo Control + Intro.
El resultado podría ser éste:
Ver el siguiente video:

Guarda este archivo porque lo completaremos más adelante.

CUESTIONARIO:

1.  ¿Que es un gráfico?
2. ¿Que tipos de gráficos hay? y ¿Cuales son sus diferencias?
3. ¿Si hay gráficos en nuestra web de tipo Mapa de Bits, ¿Cuál seria el inconveniente?
4. Investiga que es gráfico vectorial y que es Mapa de bits.
5. Y que ventajas tiene el gráfico vectorial sobre los mapas de bits. (dale clic aquí para investigar )

 ACTIVIDAD:

Según la descripción, realiza un gráfico animado.

Símbolos

Qué son los símbolos

Los Símbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash CS5.
Estos objetos al ser transformados en símbolos, son incluidos en una biblioteca en el momento en que son creados, lo que permite que sean utilizados en varias ocasiones (instancias), ya sea en la misma o en otra película. Los símbolos nos resultarán fundamentales a la hora de crear nuestras animaciones.

Cómo crear un símbolo

La acción de crear un nuevo símbolo es una de las más usadas en Flash ya que es uno de los primeros pasos para crear una animación, como veremos más adelante.
El procedimiento es el siguiente:

1. Seleccionamos el o los objetos que queramos convertir en un símbolo. Lo más habitual es partir de una forma.
2. Abrimos a la ventana Convertir en símbolo, accediendo al menú Insertar → Nuevo Símbolo, desde el menú contextual eligiendo Convertir en símbolo, o directamente con las teclas Ctrl + F8 o F8.
3. Una vez hecho esto nos aparecerá una ventana como la mostrada en la imagen. Introducimos el nombre del símbolo que vamos a crear, y que nos permitirá identificarlo en la biblioteca, lo que se hará imprescindible cuando tengamos muchos símbolos.
   
4. Sólo nos queda seleccionar el tipo de símbolo (desplegable Tipo) al que queremos convertir nuestro objeto. Podemos elegir entre Clip de Película, Botón y Gráfico. Sus características y las diferencias entre ellos las veremos en temas posteriores. Lo más habitual es Clips de película para los objetos que queremos mostrar en el escenario, y Botón si queremos que actúe como tal.
5. Bastará con pulsar Aceptar para tener nuestro símbolo creado.

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.