 |
Animationer |
1. Animerade GIF-bilder
Den här sidan handlar om animationer och hur de är uppbyggda. Den går främst igenom GIF-animationer (avsnitt 1), men berör även andra format (avsnitt 2).
På sidorna om olika bildbehandlingsprogram beskriver jag rent praktiskt hur man skapar animationer. Gå till sidorna om programkunskap >
Du har säkert redan sett exempel på animerade bilder. Det ser imponerande svårt ut, men är i själva verket ganska okomplicerat.
En animerad bild består nämligen av en sekvens av bilder, som fogats samman till en enda bild. Bilden till höger består alltså i själva verket av flera olika bilder.
För att se alla de separata bilderna, som bygger upp animationen, måste man öppna den i ett bildbehandlingsprogram. Det finns många sådana som är billiga eller gratis. Sök i filarkiven efter program med namnet "animation" eller "animator".
På sidan med bildlänkar har jag lagt in lite mer information om bra program. Läs mer >
På sidan med surftips hittar du länkar till filarkiv. Läs mer >
Animationen ovan består av tio olika bilder som satts samman:
I mitt animationsprogram (Fireworks) kommer samtliga upp "ovanpå" varandra. Med kontrollerna i bildens nederkant, kan jag styra vilken bildruta jag vill titta på, om jag vill lägga till eller ta bort rutor, osv.
 |
 |
Det går också att ställa in hur länge varje bildruta skall visas, som bilden till höger visar. varje bildruta (frame) syns då som en rad i dialogrutan. Här kan man ändra tiden för olika frames och skapa olika typer av uppspelningar, t.ex loopar eller spela upp den fem gånger för att sedan stanna.
I original visas varje ruta 10 millisekunder, vilket är ganska lagom. Minskar vi tiden till hälften ser animationen lite ryckig ut. Ökar vi den å andra sidan till det dubbla, kommer varje bildruta att synas för länge, vilket skapar en bieffekt.
Det gäller alltså att välja tiden för varje bildruta korrekt!
| 5 ms | 10 ms | 20 ms |
 |
|
 |
Man exporterar alltid sina animationer som just animationer, eftersom man annars bara skapar en stillbild av den frame man har framme.
Här väljer jag olika paletter, hur hård komprimering som skall göras och liknande.
Jag har inte gjort denna animation själv, utan hämtade den en gång från nätet (med tillstånd). Den webbplatsen är sedan länge stängd och nerlagd. Men kan man inte rita något själv är detta ett utmärkt sätt att få lite finess på sin webbplats.
På min sida med länkar hittar du några bildarkiv. Läs mer >
Man måste dock alltid se till så att man inte bryter mot upphovsrätten. Du kan läsa mer om vad den säger på min sida om lag och rätt. Läs mer >
Hur sparar man en bild från nätet?
- Windows: högerklicka på bilden
- Mac: håll nere musknappen över bilden
När man vill lägga in en animerad bild i ditt dokument, gör man det på exakt samma sätt som med en vanlig bild. Det går bra tack vare att hela bildsekvensen behandlas som en enda bild av browsern.
Tänk på!
...att animationer kan vara tröttsamma att titta på i längden. Allting som rör sig drar till sig uppmärksamheten och du bör därför vara tämligen sparsam med att lägga in rörliga objekt på din sida!
I webläsare kan man ibland klicka på Stopp-knappen för att få animationerna att sluta spela. Ibland finns även alternativen "Stop Animations" under någon av menyerna.
2. Andra format
Förutom GIF-formatet förekommer det också andra animationsformat. Vanligt är att man använder någon slags objektgrafik, t.ex en Flash-fil. De brukar ha filändelsen swf. Sådana kan man inte lägga in direkt på sidan, eftersom webbläsaren måste starta en plugin, ett tilläggsprogram, för att kunna köra filen. Likadant gäller för andra typer av filer, som inte hanteras direkt i webbläsaren, t.ex QuickTime-filmer.
Sådana kommandon måste man programmera, t.ex med JavaScript. Det finns visserligen element i HTML 4.0, men de fungerar inte jättebra.
Du kan läsa mer om hur man lägger in sådana här bilder på sidorna om programkunskap. Läs mer >