Animation på webbet 4

Med DHTML kan vi udvikle interaktive letvægtsanimationer, som ikke kræver plugins.

Zap, zap, zap: kræver vore animationer plugins, og har de lange downloadingstider, kan vi være så godt som sikre på, at de ikke bliver brugt. Oversete og overvægtige ligger de og samler støv på det ellers så dynamiske og smallivede Internet.

Derfor er vi på jagt efter teknologier, der gør det muligt at udvikle interaktive animationer, uden at browseren skal udstyres med et plugin.

Desværre kan browsere ældre end version 4 ikke fremvise interaktive animationer, med mindre de udvikles i formater, der kræver plugins.

Med browsere fra Internet Explorer (IE) 4 og Netscape Navigator (NN) 4 har vi straks flere muligheder. For ud over HTML kan browserne også fortolke teknologierne Cascading Style Sheets (CSS) og JavaScript.

Ved at kombinere disse teknologier kan vi skjule/vise/flytte på websidens forskellige objekter, efter at websiden er blevet downloadet til browseren. Dynamiske kaldes websiderne og den sammenkogte teknologi for DHTML.

Teknologien står altså for selve afspilningen af animationens billeder - der er tale om tekstbaseret kode, der skal være meget omfattende før animationen ikke længere kan regnes i letvægtsklassen kB. Da DHTML oven i købet ikke stiller krav om plugin, er der flere og flere animatorer, der vælger DHTML frem for FLASH i de tilfælde hvor de ønsker at udvikle små, lette animationer.

Bevægelserne i DHTML-animationer skabes ved at skjule/vise eller flytte objekter.

Når vi er ude at rejse er det en fordel for os at have en rejsetaske ved hånden. En beholder, hvor vi kan opbevare vores skiftetøj, så vi slipper for at rejse hele vejen hjem hver gang, vi vil have rene sokker på.
Websiderne i DHTML følger det helt samme princip. De er udstyret med en materialebeholder, der indeholder alle de delelementer, som websiden vil få brug for under animationen. Når de downloades over nettet, afleveres beholderen med materialer i browserens hukommelse. Websiden kan nu afspille animationen, uden at browseren af den grund behøver at lave flere forespørgsler over nettet.

Bevægelse skabes ved at skjule, vise og flytte objekter
DHTML skaber bevægelser ved at skjule, vise eller flytte animationens forskellige objekter. Da objekterne ligger oven på hinanden, lag på lag, vil det for brugeren se ud som om nogle objekter befinder sig længere væk end andre. Objekterne kan nærme sig eller bevæge sig længere væk ved at bytte plads (Se eksempel i [10]).

I DHTML ligger objekterne oven på hinanden i lag. I dette eksempel er der to lag: en rød og en blå firkant, som indbyrdes kan bytte plads og flyttes. Taylor har hos HotWired skrevet en artikel om DHTML. Her har han også et godt eksempel på objekter, der flyttes rundt om et bord [10].

Som animatorer kan vi gøre omrokeringen mere eller mindre påvirkelig af brugerens forsøg på at interagere med animationens objekter: vi kan bede browseren om at fremvise eller skjule objekter, når brugeren ruller eller klikker på objekterne med musen. Da hvert objekt kan skjules, vises eller flyttes, er der et utal af måder, hvorpå billederne kan kombineres. Det betyder, at billedsammensætningen kan gøres meget mere fleksibel og i langt højere grad tilpasses den enkelte brugers behov end, hvad tilfældet er med animationer i formater, der kræver plugins.

Objekterne skjules, vises eller bevæges ved hjælp af JavaScript, der også tolker brugernes interaktioner. Objekternes indbyrdes placering er defineret igennem CSS og objekternes udseende kodet i CCS og HTML.

I [11] kan du se et eksempel på, hvordan DHTML er i stand til at vise/skjule objekter, uden at lave flere forespørgsler over nettet.

DHTML-animationer kan udvikles ved hjælp af editorer, der programmerer koden, mens vi sammensætter indhold.

"At lære hele tre teknologier på en gang. Det går virkelig ikke."
Den følelse melder sig ofte hos os animatorer, når vi hører om DHTML den første gang. Som formidlere synes vi, det er sjovt at sammensætte animationens indhold og mindre spændende at bruge tid på den bagvedliggende teknologi.

Derfor er der flere og flere DHTML-animatorer, som vælger at udvikle deres animationer ved hjælp af WYSIWYG-editorer (What You See Is What You Get). Det skyldes, at editorerne gør det muligt for os at udvikle DHTML-animationer uden at kende noget som helst til koderne i DHTML.

Editoren minder meget om Word og Frontpage, hvor udvikleren kan producere og layoute sit indhold ved hjælp af menuer i stedet for at skulle programmere det hele selv.

I dag findes der flere forskellige WYSIWYG-editorer, som kan bruges til at fremstille DHTML. De to mest kendte er Adobes GoLive og Macromedias Dreamweaver. Den sidstnævnte er den mest populære, nok fordi dens opbygning minder så meget om andre kendte editorer som Microsofts Frontpage eller Word.

Dreamweaver 2.0 kan downloades i en gratis 30-dages demo-version fra Macromedias hjemmeside.

I Dreamweaver kan vi få lov til at udvikle DHTML-animationer på ægte Frankensteinsk vis: objekterne skal produceres (html), indbyrdes placeres (Cascading Style Sheets) og tidsligt koordineres (JavaScript).

Bevægelse og interaktivitet - JavaScript
Tidslinjen [2] er Dreamweavers absolut vigtigste værktøj. Det er denne tidslinje, der er årsagen til, at vi kan få objekter til at tænde, slukke eller flytte sig.

Hver enhed kan tilknyttes forskellige former for interaktivitet igennem behavior-paletten [4], der giver en samlet liste over de interaktive muligheder for det enkelte objekt. Antallet af interaktive muligheder varierer alt afhængig af, hvilken browser animationen udvikles til. Det skyldes, at browserne ikke har samme DHTM-implementering [7]. Derfor er Behavior-paletten knyttet sammen med den palette, hvori vi vælger browsertype.

Layout - Cascading Style Sheets
Tidslinjen kan kun håndtere objekter, som vi har defineret som et lag ved hjælp af Dreamweavers Layer-funktion [3]. Et lag kan sammensættes af flere forskellige objekter: tekster, som vi har formuleret ved hjælp af Dreamweavers teksteditor, importerede fotografier, grafiske billeder, eller importerede lydfiler. Inden for hvert lag kan vi arbejde videre med objekternes form, størrelse, farve og fonte.

Tiden er nu kommet til at sammensætte de enkelte lag, så de fremstår som en helhed på skærmen. Websiten skal med andre ord layoutes [5]. I editoren kan vi vælge at give objekterne en absolut placering i forhold til websidens ene hjørne. Objektet får altså tildelt nogle faste koordinater uanset hvordan de andre objekter ellers opfører sig på websiten. Objekterne kan også tildeles en relativ placering, dvs. at dens placering er afhængig af de andre objekters placering på websiten.

Produktion af delelementer - HTML
For at kunne samle objekter i lag, må vi have nogle delelementer at samle af. Dreamweaver har en teksteditor [5], men desværre ikke noget billedbehandlingsprogram. Det betyder, at vi må udvikle billederne ved hjælp af andre værktøjer og importere dem i Dreamweaver, når de er færdige.

Vi kan altså udvikle DHTML-animationer, selv om vi ikke kender noget til de enkelte teknologier. Et overordnet kendskab til teknologierne er dog altid en fordel, for vi vil hurtigt opdage, at vi ikke altid er enige med den måde, hvorpå editoren fortolker vore ønsker. Hvis vi kender koderne, vil vi kunne gå direkte ind i programmet og ændre det de steder, hvor vi er uenige. Taylors vejledning giver et godt overblik over koderne i DHTML [10].

Sammenlignet med de andre animationstyper [6] har DHTML-animationerne flere fordele: DHTML-animationerne kan gøres interaktive, men fylder alligevel meget lidt. Den største fordel er, at teknologien kan afspilles uden plugins - vel at mærke hvis brugerne er i besiddelse af browserne NN 4, IE 4 eller yngre.

Og her er vi så godt i gang med ulemperne. For dertil kommer, at Netscape og Microsoft ikke er blevet enige om en fælles standard, så vi bliver nødt til at udvikle to versioner af den samme animation. Her er vi imidlertid godt hjulpet med Dreamweaver, der kan oversætte animationen til de to DHTML-versioner. Problemet med de to DHTML-versioner er imidlertid ved at løse sig selv, idet Netscape og Microsoft er ved at udvikle en fælles DHTML-standard, som kan fremvises i alle browsere.

Artikler om DHTML

1. Hotwired fortæller om teksteditoren i Dreamweaver.
2. Hotwired fortæller om tidslinjen i Dreamweaver.
3. Hotwired fortæller om layers i Dreamweaver.
4. Hotwired viser, hvordan vi kan udvikle interaktivitet ved hjælp af Dreamweaver.
5. Dynamo duo har forklarende artikler om HTML.
6. Designværkstedet fortæller om de forskellige animationstyper.
7. Zdnet fortæller om problemerne med DHTML, og hvordan du bedst kan omgås dem.
8. Macromedia har en spændende DynamicHTML-zone.
9. Netscape har en meget omfattende website om DHTML.
10. Taylor (HotWired) lærer dig at kode DHTML.
    Se også figurere løbe rundt omkring et bord.

Eksempler på DHTML-animationer på webbet:

11. Disse små spil giver en god forståelse af DHTML-princippet.
12. DHTML-Demos giver eksempler på DHTML-animationer.
13. Webmaster Central har samlet links til websites med spændende DHTML-animationer.
14. Små spil lavet vha. DHTML. Kan tilsyneladende kun vises ved brug af Internet Explorer.
15. Spil dig glad med DHTML.