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.
Los gráficos pueden ser:
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.
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.
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
Animación
Gráfico estático
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 pulsandoControl + 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:
Guarda este archivo porque lo completaremos más adelante.
Los gráficos de tipo Mapa de Bits pueden crearse con muchos programas. Si deseas que en tus películas hayan mapas de bits lo más seguro es que prefieras crearlos y hacerlos más espectaculares en otro programa más apropiado que Flash para el manejo de Bitmaps: Photoshop, Fireworks, GIMP, etc...
Flash CS5 permite importar mapas de bits de otros programas, cuando han sido guardados en formatos gráficos GIF, JPG, TIFF y muchos más. También nos permite modificarlos en cierto modo. Podemos cambiarle el tamaño y convertirlo en un símbolo para aprovechar las opciones que nos ofrece Flash aunque, teniendo en cuenta qué es un bitmap, no podremos modificarlo "internamente" pero podremos usarlo como un símbolo más.
Para importar un archivo de Mapa de Bits al escenario haz clic en el menú Archivo → Importar → Importar a escenario.
Se abrirá el cuadro de diálogo de Importar, allí deberás seleccionar el formato de imagen que quieres importar seleccionándolo en el desplegable Tipo. Luego navega por las carpetas hasta encontrarlo. Selecciónalo haciendo clic sobre él y pulsa el botón Abrir.
La imagen se incluirá en el escenario y estará lista para trabajar con ella.
Aquí tienes una muestra de cómo hacerlo.
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 archivocorrespondiente 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.
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.
Para entender mejor cómo te aconsejamos realizar el Ejercicio Exportar un objeto como mapa de bits.
Al Exportar como hemos visto en el punto anterior, podemos "sacar" una parte de nuestra película como un gráfico (un símbolo, un fotograma...).
Pero si lo que tenemos ya es una película completa, y queremos generar una imagen a partir de ella, lo haremos publicándola. Al publicar, generamos un archivo partiendo de la película creada.
Lo habitual, y que veremos más adelante, es publicar la película como un archivo Flash (swf). Pero también podemos hacerlo como imágenes.
Para ello, tenemos que acceder a la Configuración de publicación, en el menú Archivo.
Se abrirá un diálogo, en el que lo primero que elegimos es el formato en que lo queremos publicar, y el nombre de archivo que se le dará.
Por cada formato seleccionado, se añadirá una pestaña. Desde cada una, podemos cambiar las opciones de cada tipo de imagen.
Cuando lo tengamos, basta con pulsar el botón Publicar. En la misma carpeta donde está el archivo Flash (.fla) se crearan las imágenes.
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.