Animation på webbet 2

Ikke så snart dukker muligheden op for at lave bevægelser på webbet, før vi begynder at stille krav. "Det skal være så nemt som overhovedet muligt at lave animationer, akkurat som vi vil have dem" forlanger animatorerne. "Vi skal uden videre kunne se og forstå de animationer, som animatorerne laver", sukker websurferne.

Hvorvidt det lykkes os at indfri begge parters ønsker, afhænger af hvilken animationstype vi vælger at producere: vi kan vælge at udvikle en GIF-, en DHTML-, eller en plugin-animation, dvs. en animation, der kræver installation af et plugin. Valget er svært, og har afgørende indflydelse på mange af de faktorer, der afgør animationens succes. For det første kan hver animationstype kun udvikles på ganske bestemte måder. For det andet definerer animationstypen, hvilket materiale animationen kan sammensættes af i form af billede, lyd. For det tredje definerer animationstypen mulighederne for interaktivitet. For det fjerde er animationstypen med til at definere de krav, som animationen kommer til at stille til brugerens tekniske ekspertise og udstyr i form af netværk, browser og teknologi.

Vores beslutning får altså konsekvenser. Derfor er det vigtigt, at vi sætter os ned og skitserer, inden vi lægger os fast på en given animationstype. Vi må tænke over, hvad det er for et indhold, vi gerne vil formidle, hvad det er for en målgruppe, vi gerne vil ramme og overveje, hvilket materiale vi har til rådighed. Animationens hensigt kan vi udtrykke i scenariet [1]. Animationens struktur og materialesammensætning beskriver vi i storyboardet.

Inden vi lægger os fast på en animationstype, er det en god idé at udforme et storyboard. For i en verden af blyant og papir har fejltrin ikke nogen konsekvenser. Vi kan uden videre gøre det godt igen ved at flytte rundt på animationens delelementer, indtil vi er tilfredse med resultatet.

Meningen med storyboardet er at give os et overblik over de karakteristika, som animationen skal have. Navigationsstrukturen til venstre opdeler animationen i skærmbilleder: hvert skærmbillede er markeret med en kasse, strukturen angivet med streger, og interaktive muligheder angivet ved hjælp af knappaneler/indtastningsfelter. På indholdssiden skrives de vigtigste egenskaber ned i form af nøgleord. Nøgleordene kunne for eksempel beskrive animationens målgruppe, målgruppens tekniske udstyr, billedmateriale, synkroniseret afspilning af lyd, etc.

Ved at holde nøgleordene op imod animationstypernes generelle egenskaber, kan vi se, hvilken af animationstyperne, der passer bedst på den aktuelle animationsopgave.

GIF

En af de store ulemper ved formatet er, at det hverken understøtter interaktivitet eller synkroniseret afspilning af lyd.

Udviklingsmuligheder: Alchemy Mindworks GIFconstruction set (Windows), Totally Hip GIFbuilder (Macintosh), Totally Hip Webpainter [13] (platformsuafhængigt), Animator Shop (Paint Shop Pro 5) er bare nogle af de værktøjer, som du kan vælge imellem [1,2,3,9].

Plugin-animationer

Formater

Plugin-animationerne findes i forskellige formater.

Macromedias Shockwave (PC og Mac)

I et af formaterne, Shockwave, kan vi udvikle animationer med de mest avancerede former for interaktivitet - interaktivitet, som slet ikke kan lade sig gøre i GIF eller DHTML. Desværre kommer Shockwave-animationer hurtigt til at fylde flere MB. Det skal ses i lyset af, at 1MB tager omkring en halv time at hente hjem med de mest gængse modemmer (28 - 33 K). Derudover skal der også installeres det Shockwave-plugin, der fylder lidt under 1 MB i pakket form og omkring det dobbelte på harddisken.

Udviklingsværktøjer:

Den eneste fornuftige måde at udvikle Shockwave-animationer på er ved at bruge udviklingsværktøjet Director, fra Macromedia. Director-animationer kan dog først bruges på webbet, når de er efterbehandlet med værktøjet Afterburner, der er en udvidelse til udviklingsværktøjet Director.

Macromedias FLASH (PC og Mac)

Et andet format, FLASH gemmer billedinformationerne som matematiske ligninger (vektorgrafik), hvilket får animationerne til at fylde meget lidt. Formatet tillader os at udvikle interaktivitet i form af rollover/klik med mus.

Udviklingsværktøj:

FLASH-formatet har et tilhørende udviklingsværktøj, som lidt forvirrende også kaldes FLASH [12]. Dette værktøj er væsentligt lettere at håndtere end Director. For i modsætning til Director slipper vi for at gå ind og arbejde med selve koden bag animationen. I stedet tilbyder FLASH forskellige brugervenlige arbejdsredskaber, som vi kan udvikle animationen med.

Der findes mange andre interessante animationsformater, der kræver installation af et plugin. Dem kan du læse om i [3].

DHTML-animationer

DHTML (Dynamic Hypertext Markup language) er et programmerings-sprog sammensat af HTML, cascading Stylesheets og Javascript, der bl.a. kan bruges til at lave animationer på webbet. Da DHTML er en udvidelse til HTML, stiller det ikke noget krav om installation af plugins. En klar fordel ved DHTML er, at det tager browseren væsentlig kortere tid at downloade en DHTML-animation end for shockwave-animationer. For hvor shockwave-filernes størrelser regnes i MB regnes DHTML-filerne i KB.

I DHTML er det forholdsvist simpelt at udvikle animationer med interaktivitet i form af klik/rollover. Med hensyn til interaktivitet og afspilningen af lyd overgås den dog i mange henseender af de muligheder, som ligger i Shockwave-formatet. Desværre er det kun de nyeste browsere (nyere end version 4.0), der er i stand til at fremvise DHTML-animationer. Ifølge [8] er der stadig en stor del af brugerne, der bruger ældre versioner. En anden ulempe er, at Microsoft og Netscape har forskellige måder at implementere DHTML-koder. Det betyder, at vi som animatorer må udvikle to forskellige versioner af koden bag animationer.

Udviklingsmuligheder:

Den letteste måde at udvikle DHTML- animationer på er ved at bruge en af editorerne Astound Dynamite [9] (Windows), GoLive CyberStudio 3.0 (Mac) [10], eller Dreamwaver fra Macromedia (platfomsuafhængigt) [11]. Disse værktøjer er WYSIWYG-editorer (what You see is what you get), dvs. at de giver os lov til at designe DHTML-animationer, uden at vi behøver at spekulere over den bagvedliggende kode.

Konklusionen på ovenstående gennemgang er, at animationstyper og udviklingsværktøjer giver os animatorer meget forskellige udfoldelsesmuligheder. Derfor er det uhyre vigtigt, at vi ved, hvad det er for animationseffekter vi gerne vil opnå, inden vi beslutter os for animationstype og udviklingsværktøj. Valget er dit.

Animationer på webbet 3 vil gå mere i dybden med plugin-animationerne.
Se også Animationer på webbet.

Bøger:

1. Multimedia, making it work, 1993, Vaughan, Osborne
2. Designing web animation, Bring your web site to life with animation and special effects, 1997, Nicola Brown, Peter Chen, David Miller
3. Plugins, Udvidelser til Internetbrowsere, Karim Pedersen, Teknisk Forlag
4. Animation on the web, Sean Wagstaff, Peachpit Press, 1999

Vejledninger på webbet:

5. Jakob Nielsen giver gode råd om brugen af animation
6. Quicktime VR hjemmesiden
7. Scenarier og storyboards er to sider af samme sag. I artiklen "Scenarier som udviklingsværktøj, Designværkstedet, Lene Nielsen, Visionik." kan du læse om, hvad et scenario er
8. Stuck With Old Browsers Until 2003, Jakob Nielsens Alertbox
9. Animation on the Internet: the Tools. Robert Gonzales

Software på nettet

10. Hos Adobe kan du finde en nærmere beskrivelse af GoLive, og hvor du kan få fat på det.
11. Kunne du tænke dig at vide mere om Astound Dynamite, kan du kigge på http://www.cnet.com/Content/Reviews/JustIn/Items/0,118,295,00.html
12. Macromedias Dreamwaver kan du downloade fra http://www.macromedia.com/software/dreamweaver
13. Hos Macromedia</> kan du få mere at vide om Flash
14. Webpainter kan downloades fra Totally Hips hjemmeside
15. GIFconstruction set professional kan downloades fra http://www.mindworkshop.com/alchemy/gifcon.html

Eksempler på brug af animation på webbet:
(flere af siderne kræver forskellige plugins)

16. Novo Nordisk har lavet et interaktivt laboratorium
17. Flash kan bruges i animationer til undervisningsbrug
18. Pythagoras sætning bevist ved hjælp af en animation udviklet i Java.
19. Quicktime VR bruges til at skabe en rummelig illusion gennem 360 graders perspektiver.
20. Shockwave bruges til at fremstille interaktive animationer, som for eksempel spil.
21. Et eksempel på en flot dhtmlside