Google


animació

Formats de gràfics per al web.
Programes de gràfics aconsellats.
Animacions i Flash.
Optimització de les imatges.
Ús d'imatges com a fons de pàgines i taules.

Elements de navegació: Mapes d'imatges i rollovers.

 

Un exemple molt simple de Gif animat, format per 5 fotogrames, i de tamany modest (5k), degut als pocs colors, plans, de la imatge.

 

Hi ha dues maneres principals d'incorporar animacions a les pàgines web: gifs animats (la solució més extesa) i pel.lícules de flash. També es poden utilitzar altres formats multimèdia, però no s'empren ni de bon tros tant com aquestes dues alternatives.

Animació amb GIF
Un gif animat consisteix, simplement, amb una sèrie d'imatges (en format gifs) que estan col.locats consecutivament i es mostren en pantalla durant un interval de temps predeterminat. En acabar la sèrie, pot tornar a començar (loop) un cert nombre de vegades, o indefinidament.

Amb aquest format, admès per qualsevol navegador, tenim els avantatges que ofereix el format gif: una ràpida descàrrega, nitidesa, ús de colors transparents...però també la limitació de que les imatges han de tenir un nombre fix de colors.

Trucs per a la creació de l'animació GIF.
Un gif animat es pot preparar amb un programa especialment dedicat a aquesta tasca (GIF Construction Set, Ulead Gif animator, Animagic) o bé utilitzar la capacitat de crear gifs animats d'altres programes més generals de creació i manipulació d'imatges (Xara, Fireworks, Imageready).

Crear el gif animat implica una tasca de preparació prèvia tan important o més que la creació directa dels "fotogrames" de l'animació. Hem de considerar quines parts de l'objecte es mouen i quines es poden mantenir fixes, i dibuixar el mínim nombre necessari perquè l'animació sigui convincent. Tanmateix, la majoria d'animacions gif que veiem al web no són animacions de moviment, sinó a l'estil dels "banners" publicitaris de moltes pàgines. És una manera d'exposar més informació en un mateix trocet de la pantalla. Per exemple, podem enllaçar una sèrie d'eslògans un rera l'altre, perquè vagin apareguent, com a aquest exemple.

Amb qualsevol dels programes que permeten elaborar GIFs animats, no resulta massa complicat. Només cal preparar les imatges individuals o fotogrames (i per les parts invariables, es pot copiar d'un fotograma al següent), indicar el temps que s'ha de mostrar cada una, normalment en mil.lisegons, i decidir si es repetirà tota l'animació, de forma finita o indefinidament.

El tamany final del GIF animat pot ser considerable si hi ha moltes imatges i si aquestes contenen molts colors diferents o son complexes; per simplificar les coses i reduir el tamany de la animació, es pot escollir una paleta única per a tota la sèrie d'imatges.

Un exemple de petita pel.lícula Flash. Aquest tipus d'animacions tan espectacular té un tamany bastant petit (5K en aquest cas) perquè es crea amb uns símbols vectorials i el moviment es crea a partir d'aquests.

Shockwave/Flash
Les películes de flash es generen amb una mètode força diferent dels gifs animats. Tot i que flash no és precisament un exemple de programa senzill d'aprendre, en alguns aspectes, degut al treball amb objectes vectorials, crear certs tipus d'animació és una tasca força simple.

Per exemple, els efectes de canvi de luminositat i moviment que afectin un objecte són fàcils d'obtenir amb flash. Per crear imatges estàtiques amb flash, també és possible utilitzar Freehand o Illustrator, (aquest darrer requereix un plugin gratuït). Amb aquests dos programes simplement elegim l'opció archivo>exportar... elegim shockwave flash (swf).

Flash, de Macromedia, és un programa de maneig un tant complex que permet crear animacions interactives en aquest format SWF. Té com a avantatge addicional el que es tracta de gràfics vectorials (així es poden escalar sense perdre qualitat i resulten força compactes) Per exemple, vegeu la pàgina d'inici de Macromedia, que és un exemple bastant típic del que es pot fer amb flash. Apareix una imatge amb una sèrie d'efectes d'animació i al cap d'uns segons ens ofereix una sèrie de botons per escollir opcions. Aquests botons poden tenir un efecte de "mouseover" i, a més, en pitjar-los desplegar un submenú, engegar una nova secció de l'animació, etcètera.

Donat que el maneig de Flash resulta un tant difícil, no ho val la pena si hem de crear tan sols un petit "banner" amb animació, perquè suposarà una inversió de força temps per aprendre la manera en què treballa el programa.

Tanmateix, Flash vé amb un sistema d'ajuda molt complet i entenedor i no resulta difícil manejar-lo correctament. Per determinats efectes, flash és ràpid i còmode, i molt més convenient que l'alternativa d'un gif estàtic o animat:

  • per un logo que es va fent cada cop més definit, a partir d'una imatge inicial molt tènue.
  • moviments que afecten la posició i tamany d'un mateix símbol o uns pocs símbols;
  • imatges que es puguin ampliar per veure detalls petits (per exemple, un mapa).

L'inconvenient principal que pot tenir el visitant d'una pàgina web que contengui elements de flash pot ser l'exigència d'un plug-in específic per veure aquestes imatges. No és un problema gens greu, perquè ja vé inclòs amb la darreres versions de Netscape i Explorer, i si cal es pot descarregar gratis de Macromedia, sense que trigui molt, perquè el reproductor de flash és relativament petit.

a dalt    { A dalt }


[ Vigital ] [ Manual de diseño digital, en castellano ] [ Contactar ]

idees i suggerències programes per al web Gràfics per al web CSS HTML

Pàgina inicial pàgina inicial