Crear Gifs Animados con Fireworks 8

Los Gifs Animados son la forma más vieja de hacer animaciones. ¿Quien no recuerda esas webs con background de arcoiris que era todo él un Gif animado? En Clab intentamos evitar esas malas costumbres, por lo que si eres propenso a hacer diseños así de bizarros, deja de leer y pulsa aquí.

Bien, querido amante del diseño web. En este tip voy a explicar como hacer gifs animados de una forma sencilla usando un programa que casi seguro que tienes: Adobe Fireworks

Hacer un gif en Fireworks es lo mismo que lo que en flash llaman "animación frame by frame", es decir, que en realidad, lo que haremos, será crear todos y cada uno de los fotogramas de nuestra animación.

Para empezar abrimos Fireworks. Creamos un documento nuevo de reducido tamaño (50x50). Vamos al menú "Ventana" y activamos "Fotogramas" (Mayús.+F2)

Para trabajar con mas comodidad, yo me dispuse el entorno de trabajo de esta forma:



Bueno, acto seguido, empezamos con la animación. Nos colocamos en el primer fotograma (de momento es el único que existe) y dibujamos cualquier cosa:



Será mucho mas fácil de animar si lo que hacemos es tener una redonda y una linea por separado. Es decir, en el Fotograma 1, la linea esta en la posición X, y en el 2, la linea está en la posición X+1, mientras que el circulo se mantiene estático.

Si ambos estuvieran rasterizados en un mimo mapa de bits, seria muy, muy engorroso.

El siguiente paso, será crear un nuevo fotograma. En la parte inferior del panel "fotogramas" hacemos clic a añadir fotograma:



Veremos que el escenario de dibujo se vacía, eso es porqué el fotograma que acabamos de insertar está vacío. Pero si vamos al fotograma anterior, veremos que lo que dibujamos sigue ahí. Como queremos que el segundo fotograma sea parecido al primero, copiamos el contenido del primero al segundo.

Para hacer el efecto de que se mueve, debemos variar ligeramente la posición de los objetos (en el 2º fotograma).

En nuestro caso, lo que haremos será elevar un poco las cejas:



Por defecto, si en el panel "optimizar" tenemos marcada la opción "Gif Animado", la animación se repetirá indefinidamente. Si no es así, en el panel "Fotogramas", en la parte inferior izquierda, lo podemos indicar:



Como podemos observar, la animación se sucede demasiado deprisa, y parece que el gif padezca hiperactividad por exceso de estimulantes. Eso lo podemos arreglar determinando el tiempo que queremos que se muestre cada frame.
Lo conseguiremos haciendo doble clic en un frame. Nos pedirá que introduzcamos un valor de tiempo en centésimas de segundos (100cs =1s) durante el cual será mostrado el fotograma en cuestión:



Aplicamos otro valor (según se necesite) al segundo frame.

En nuestro caso, aplicamos 72cs al primer frame y 21 al segundo.

Nos resultó esto:



Como podemos ver, los bordes son demasiado grandes para lo que realmente ocupa la imagen. Usando la herramienta de recortar, podemos ajustar el escenario al tamaño deseado:



Para aceptar nuestra selección y redimensionar el escenario, pulsamos enter:



Hay que tener en cuenta que al recortar la imagen, estamos recortando en TODOS los fotogramas, por lo que si en algún fotograma, alguna imagen queda fuera, la cortará también. Para poder ver todos los fotogramas a la vez, y evitar estas situaciones, en el panel "Fotogramas", en la parte inferior izquierda, hacemos clic en el menú "papel cebolla" y seleccionamos "Mostrar todos los fotogramas":



De esta forma podemos recortar viendo los elementos que quedan mas afuera sin temor a cortarlos. Una vez recortado, deshabitar de nuevo.

Nota: En este punto, es recomendable guardar una copia del archivo en formato png para ediciones posteriores, ya que al exportarlo a gif, se rasteriza todo.

Ahora hay que exportarlo: Nos aseguramos que en "Optimización" esta marcado como gif Animado (menú desplegable). Podemos añadirle transparencia alpha si queremos que su fondo sea transparente (evidentemente, en el escenario (panel propiedades), debemos decir que no debe haber fondo) en estos casos.

Una vez esto, Vamos al menú "Archivo" y hacemos clic en "Exportar". Le asignamos un nombre y le decimos ok.

Y ya está, ya tenemos nuestro gif animado:

Archivos de interés (png's):

Dibujo inicial
Dibujo final

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.