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.