Animerade bilder

Se till att du inte har stängt av animeringar i din webbläsare!

Det enklaste sättet att skapa liv och rörelse i en webbsida är att använda en animerad GIF-bild. Eftersom man kan göra animeringen liten, behöver den inte öka nedladdningstiden för sidan särskilt mycket.

Katten ovan är 9 kB stor och faktiskt näst störst av de animeringar som du kan hämta från den här sidan. Den blir stor därför att den kräver en stor bildruta, hela 592x32 pixlar. Den består av 38 bildrutor som visas efter varandra.

Men en animering behöver inte bestå av så många bilder. Det här utropstecknet innehåller bara två bilder och animeringen är 1 kB stor.

Hämta gärna någon av de 11 animeringarna här. Du lägger in dem på sidan på samma sätt som du gör med andra bilder.

Men för både dig själv och besökarna blir det roligare om du gör dina animeringar själv, och det är faktiskt inte alls svårt. I beskrivningen nedan kommer jag att använda JASC Paint Shop Pro och JASC Animation Shop. Animeringsprogrammet ingår i Paint Shop Pro och det finns en utvärderingsversion på SDN:s Medlems-CD år 2000.

Det första steget blir att välja eller skapa de bilder som skall vara med i animeringen. Jag väljer de här åtta bilderna:

Varje enskild bild är 1,468 kB stor, sammanlagt alltså nästan 12 kB.

De bilder du vill använda kan du exportera som transparenta GIF-bilder, som du lärde dig i Genomskinligt och sammanflätat. Det ger dig bra kontroll över de enskilda bildernas utseende.

Bestäm samtidigt vilken ordning bilderna skall visas i och spara dem gärna med nummer som gör att du lätt ser denna ordning. Bilderna ovan heter fjaril1.gif till fjaril8.gif.

Nu öppnar du Animation Shop - du kan göra det inifrån Paint Shop Pro genom att klicka på File och Run Animation Shop.

Klicka på File och Animation Wizard, och markera sedan i tur och ordning Same size as the first image frame (Nästa), Transparent (Nästa), Upper left corner of the frame och With the canvas color (Nästa) samt Yes... och 10 (Nästa).

Nu har du fått upp rutan där du väljer bilder. Klicka på Add image och bläddra dig fram till mappen där bilderna ligger. Markera alla bilder som skall vara med och klicka OK. I listan som du nu har kontrollerar du ordningen mellan bilderna. Med kontrollerna Move up och Move down kan du sortera bilderna i rätt ordning med den första bilden överst. Klicka sedan på Nästa och Slutför. 

I Animation Shop har du nu fått följande bildremsa (men med dina bilder, förstås).

Nu kan du klicka på View animation (vänstra filmremsan till höger i verktygsraden) och se hur animeringen blev. Spara din animering med filändelsen *.gif i din bildmapp - jag sparade bilderna ovan som fjaril.gif.

Och det här blev resultatet. Bilden är 4,01 kB stor och nedladdningstiden är mindre än 1 sekund. Genom att använda Optimization Wizard i Animation Shop kan jag krympa filstorleken ytterligare, faktiskt ned till 3,0 kB utan att kvaliteten försämras märkbart.

De färdiga animeringarna kan du också öppna i Animation Shop och förändra så att de passar bättre till din hemsida. Du kan också använda den flygande fjärilen. Högerklicka på animeringen och välj Spara som...

Men glöm inte att hålla ett öga på sidans nedladdningstid. 

• Hur du sparar en animering som du hittar på Internet
• Hur du på enklaste sätt skapar en animering i JASC Animation Shop
• Hur du lägger in animeringen på hemsidan

Övningsuppgiften till det här avsnittet är helt enkelt att göra en animering och lägga in den på din egen sida.

SupportData.Net