7. Animacions

L'objectiu d'aquesta pràctica és conèixer què són els GIF animats i com crear-los amb l'ajut del Gimp. El Gimp permet realitzar animacions a partir de diferents capes superposades. Comparant el Gimp amb l'Animation Shop del Paint Shop Pro, la diferència es troba en considerar cada capa del Gimp com un fotograma. Per això és important dominar bé el funcionament de les capes.

Els GIF animats presenten certs avantatges:

• Fàcils de crear: els autors no necessiten dominar llenguatges de programació o que tinguin un accés especial a un servidor web.

• Fàcils d'integrar en una pàgina web: es criden de la mateixa forma que una altra imatge.

• Al ser fitxers GIF tenen compressió sense pèrdua.

• Àmpliament suportats en eines de navegació i plataformes.

• No carreguen el tràfic de dades, ja que l'usuari el carrega d'una sola vegada i s'executa des del catxé del navegador.

I com a desavantatges:

• Els GIF en bucles infinits (que no paren mai) molesten, encara que els usuaris poden desactivar l'animació fent clic al botó Parar del navegador.

• No existeix interactivitat, és a dir, no es pot parar o iniciar la reproducció com passa amb altres tipus d'animacions (Shockwave, Flash, Quicktime...)

• No hi ha so.

• Sols permeten 256 colors.

• No tots els navegadors mostren l'animació a la mateixa velocitat.

Feu un bon ús de les animacions GIF. Les animacions GIF poden ser tan molestes com utilizar colors llampants en el fons de les pàgines web. Utilitzeu animacions GIF per:

• Cridar l'atenció sobre informació important en una pàgina, com per exemple el punt principal.

• Oferir entreteniment, com per exemple, un personatge animat.

• Il·lustrar un procés dinàmic.

• Il·lustrar diverses vistes d'un objecte.

Desenvolupament de la pràctica

El que fareu en aquesta pràctica és una animació amb el Gimp a partir d'un seguit d'imatges ja fetes. Les incorporareu a les capes i seguidament veureu els pasos a seguir per tal d'ajustar l'animació. El resultat final ha de ser com aquest:

• Descarregueu el fitxer imatge12.zip i descomprimiu-lo en el vostre disc dur amb l'ajut del programa Winzip.

• Obriu el programa Gimp. Des del menú Arxiu | Obre... obriu les vuit imatges que heu descomprimit. Recordeu que amb la tecla Shift apretada podeu seleccionar els vuit fitxers al mateix temps i obrir-los tots de cop. Si us molesten les finestres podeu obrir-les després quan la pràctica demani "aneu a la imatge...."

• Aneu a la finestra de la imatge bfly1.gif. Aquesta serà la finestra amb la que treballarem a partir d'ara. Si aneu al menú Imatge | Mida de la imatge veureu que us indica que té una grandària de 50 x 50 píxels i una resolució de 72 ppp.

• A continuació aneu al menú Capes | Nova capa... i en creeu una tenint en compte que estigui assenyalada l'opció transparència. Veureu que us apareix a la finestra de capes una nova capa de la manera que us mostra el gràfic següent (Recordeu que també podeu crear una nova capa clicant amb el botó dret del ratolí la capa de fons de la finestra de capes i triant l'opció Nova capa...)

• Cliqueu amb el botó dret del ratolí a sobre de la Nova capa i trieu l'opció Edita atributs de la capa. Veureu que podeu canviar-li el nom a la finestra de dalt tal i com es mostra a la imatge. Poseu-li bfly2 i premeu D'acord.

• Repetiu el mateix procés fins que tingueu una capa de fons i set capes més que haureu posat el nom de bfly2, bfly3,... fins a bfly8.

• Aneu ara a la finestra bfly2.gif (Atenció, a la finestra, no a la capa. Si només havieu obert una de les vuit imatges, obriu bfly2.gif).

• Copieu la imatge al porta-retalls del Gimp seleccionant l'opició Edita | Copia a la finestra de la imatge bfly2.gif.

• Aneu ara a la finestra de la imatge bfly1.gif (la de treball on hem generat les capes). Seleccioneu primer la capa on voleu que s'enganxi clicant un cop amb el ratolí a sobre d'ella. Veureu que queda marcada de blau. Aneu a Edita | Enganxa i veureu que us apareix una nova capa com la que us mostra el dibuix.

• A la finestra de capes premeu i la selecció flotant s'afegirà a la capa bfly2 tal i com ens mostra la imatge.

• Repetiu el procés fins que tingueu les vuit imatges inserides com a capes. Recordeu-vos de marcar la capa on voleu ancorar-la abans d'enganxar la papellona. Al final del procés haureu de tenir vuit capes com us mostra la següent imatge:

• Una vegada teniu totes les vuit capes (assegureu-vos que estan ben ordenades) podeu veure l'animació al mateix programa Gimp, abans de desar-la.

• Per això aneu a Filtres | Animacion | Reprodueix. S'obrirà una finestra de reproducció (pot trigar una estona en funció del PC on treballeu), on si cliqueu el botó Reprodueix/atura podreu veure l'animació. El botó Pas serveix per anar fotograma a fotograma (capa a capa).

• Abans de desar l'animació aquesta s'ha d'optimitzar. Que vol dir això?. Quan volem fer una animació podem fer-ho de dues formes, substituint una imatge per la següent o bé combinant les imatges, és a dir només desant les diferències d'una imatge respecte a l'anterior o no desant les parts transparents. Això fa que les animacions pesin menys i en conseqüència es carregarà abans al navegador. I és per això que serveis aquesta opció d'optimitzar les animacions.

• Optimitzeu l'animació amb l'opció Filtres | Animació | Optimitza (per a Gif). Si feu això us crearà una nova imatge animada, equivalent a l'anterior, però que utilitza transparències. Podeu provar l'altra opció per veure com queda cada capa.

• Si ara deseu l'animació anant a Arxiu | Anomena i desa i seleccioneu el format GIF i anomeneu com AnimacióNomiCognom.gif, quan accepteu us apareixerà una finestra com la següent:

• A continuació premeu Exporta i apareix una segona finestra on haureu de configurar l'animació.

• Trieu Capes acumulatives (combina) per tal que l'animació pesi menys. Si teniu assenyalada l'opció Bucle infinit l'animació no s'aturarà mai, si la desmarqueu només es reproduirà un cop. Podeu també canviar el retard entre fotogrames o marcs(capes) en l'animació (per defecte és de 100 mil·lisegons).

• Ara ja només us queda prèmer D'acord i ja tindreu l'animació amb transparència.

Ara podeu fer proves amb altres imatges o texts i recordeu que sempre la imatge ha d'estar amb una profunditat de 256 colors per poder fer la transparència.

Envieu al tutor el fitxer resultant d'aquest exercici en un fitxer comprimit junt amb els exercicis comuns.

Exercici

• Amb l'ajut del Gimp creeu una imatge en format gif de 200 x 75 píxels amb la paraula HOLA o amb el vostre nom. Feu-ne el fons transparent i deseu-la amb el nom text1.gif.

• Aneu modificant el color del text poc a poc i deseu les modificacions amb el nom text2, 3, 4, 5 i 6.

• Creeu una animació GIF on es vegi la transició de colors.

• Deseu l'animació com TextNomiCognom.gif i envieu-la al tutor.