Menu
• Indhold

Lette animationer

Resumé

Af Jan Toksvig, UNI-C
16/04 1999

GIF-animationer, billedskift ved hjælp af JavaScript samt dynamisk HTML er måder hvorpå man kan lave små animationer, der ikke kræver hjælpeprogrammer for at kunne køre, ikke fylder ret meget og er forholdsvis enkle at gå i gang med. Koder man animationen i JavaScript eller dynamisk HTML, behøver man ikke først at købe programmer til at lave animationerne med.

Indhold

 

Bevægelse fanger blikket

Bevægelser fanger øjet, men sammenhængen mellem bevægelse og reklamer på websider har måske gjort læserne 'banner-blinde'.

En af måderne hvorpå man kan henlede opmærksomhed på et bestemt område, er ved at lave bevægelser, fx animationer i det pågældende område. Folk, der laver reklamebannere til websider, har længe benyttet sig af netop bevægelser og animation for at trække opmærksomheden fra det egentlige budskab på siden og hen til annoncen, der typisk er placeret i kanten af skærmen, et sted hvor læseren ikke i første omgang ser [1].

Rutinerede læsere af websider er i stigende grad blevet vant til, at når noget bevæger sig på en webside, så er det en bannerreklame, som man kan ignorere (af nogle kaldet "Banner Blindness")[2].

Om Bevægelse fanger blikket

Nyhedsbrev

Tilmeld dig til IT-temaets nyhedsbrev



 

Websider er grundlæggende statiske

HTML-sider er grundlæggende statiske. Der var tidligere ikke mulighed for at lave meget dynamik på siderne.

En web-browser regner løbende sidens opbygning ud, mens den henter den på serveren. Når den en gang har regnet sidens opbygning ud (bl.a. hvor linier skal brydes, hvor brede søjler i tabeller skal være, hvor høje rækker i tabeller skal være, hvor billeder skal stå, og hvor høje og brede de skal være), 'printer' den siden ud på skærmen. Når det først er sket, kan siden kun ændres ved at hente siden på web-serveren igen. Sådan var det i princippet i de ældste versioner af hhv. Netscape Navigator og Microsoft Internet Explorer.

Men nye brugere kom til. Brugere, der ønskede mere end blot mulighed for at kunne udveksle tekster og figurer på et fælles format.

GIF
GIF-animationer gav dog en mulighed for at lave en smule dynamik på en ellers statisk side. Princippet bag en GIF-animation er, at flere billeder sættes sammen som rammer i et stort billeddokument [3].

GIF-animationer kan ikke synkroniseres med lyd eller med andre animationer på siden. Når en GIF-animation er startet, kører den til den er færdig, uden mulighed for fx at holde pause og starte den igen.

 

Artikler af

Jan Toksvig
 (11/07 2007)

 

JavaScript

JavaScript giver mulighed for at lave animationer, der i højere grad reagerer på brugerhandlinger.

Da Netscape (version 2) og Microsoft Internet Explorer (version 3) indførte muligheden for at benytte JavaScript koder i HTML-dokumenter [5], blev det muligt at ændre visse ting, som fx at skifte billeder ud med andre. Det er stadig ikke muligt at ændre på fx den tekst, der er skrevet, eller de tabeller, der er skrevet.

Uheldigvis har de to browserfabrikanter hver deres version af JavaScript, så kode skrevet til den ene browser kan ikke nødvendigvis forstås af den anden, heller ikke nødvendigvis ældre versioner af samme browser.

Vi skal ikke gennemgå de forskellige versioner af JavaScript. Yderligere informationer kan findes under "Baggrundsartikler" [5].

Eksempel
Vi skal nu se på, hvordan man på en nem måde kan lave en såkaldt 'mouseover' (eller 'rollover') effekt, dvs. skifte et billede ud med et andet, når musen kommer ind over billedet.

Effekten kan med fordel anvendes til at tydeliggøre, at her er der noget man kan klikke på.

Hvis man kører musen hen over nedenstående billede, bliver billedet erstattet af et andet. Når man flytter musen væk fra billedet, kommer det oprindelige billede på igen.

Koden og forklaring kan ses i et andet vindue.

Eksempel
Billeder i en sekvens kan skiftes automatisk ved brug af en timer. Denne lidt simple animation minder i funktion meget om en GIF animation, men den kan fx startes og stoppes ved tryk på en knap, eller ved klik på links.

Koden og forklaring kan ses i et andet vindue.

Fordele og ulemper ved JavaScript

Blandt fordelene er at man kan benytte flere visuelle effekter til at understøtte navigering på websider, man kan lave forklaringer til fx avancerede forsøgsopstillinger, hvor elementer i forklaringen ved klik (eller 'mouseOver') kan fremhæves på en illustration af forsøgsopstillingen.

Programmering af JavaScript-kode er forholdsvis nemt at gå til. Man kan på www finde mange artikler og eksempler, som man kan lade sig inspirere af.

Blandt ulemperne skal igen nævnes, at de to førende browsermærker ikke benytter samme JavaScript-kode. Man er som programmør af JavaScript nødt til at forholde sig til dette problem og som et minimum sikre sig at kode, der virker med en browser, ikke får en anden type browser til at gå ned.

Enhver bruger kan slå browserens fortolkning af JavaScript til og fra. Det er med andre ord ikke sikkert, at brugerne ser animationer lavet vha. JavaScript.

JavaScript animationer kan ikke direkte synkroniseres med lyd, men de kan til en vis grad koordineres med andre animationer på samme side.

 

Dynamisk HTML

Dynamisk HTML giver flere muligheder for at lave interaktive websider.

Dynamisk HTML (DHTML) gør det muligt at manipulere også tekstelementer dynamisk.

DHTML giver bl.a. mulighed for at lave flere lag af elementer, der kan flyttes uafhængigt af hinanden. Ved at flytte en person (et billede) rundt på et kort (et andet billede), kan man konstruere en gåtur rundt i en park (se Monet at Giverny) eller rundt i en bygning.

Eksempel
Tekst kan animeres. Vi skal se på et eksempel, hvor vi lader en overskrift flyve ind over skærmen et par gange og derefter stille sig på skærmen.

Animeret overskrift

Tag et kig på koden. Se også [7].

Med dynamisk HTML kan man vise og skjule elementer. Dette kan bl.a. benyttes til at lave dynamiske indholdsfortegnelser, hvor underpunkter først vises, hvis man klikker på hovedpunktet, og skjules igen ved næste klik.

Man kan benytte samme ide til at lave spørgsmål med skjulte svar som i det næste eksempel.

Eksempel

Svaret er 42.

Fordele og ulemper ved dynamisk HTML

Fordelene og ulemperne nævnt ved JavaScript går igen her. Dynamisk HTML giver mulighed for at lave sider med en større grad af brugerinteraktion.

De flere muligheder betyder dog, at det ikke er så simpelt at programmere dynamiske HTML-sider. Det bliver bestemt ikke nemmere af, at der er forholdsvis stor forskel på den måde, koden skal skrives på for at hhv. Netscape Navigator og Microsoft Internet Explorer kan forstå det. Man kan heldigvis finde mange eksempler på Internettet at lade sig inspirere af.

Hvis nogen har erfaringer med brugen af JavaScript eller dynamisk HTML i forbindelse med undervisning, det være sig fx problemer, tips eller tricks, så vil vi meget gerne høre fra jer. Skriv til designv@uni-c.dk. Vi vil også gerne høre jeres mening om artiklerne, samt høre hvad I gerne vil se mere af.

 

Baggrundsartikler

  1. Læsere ser først midt på skærmen. Se 4. regel i "Syv gyldne regler for at skrive på nettet"
  2. Om banner-blindhed:
  3. Når en browser skal vise en GIF-animation, hvilket browseren teknisk set ser som et billede, vises først den første ramme tegnet linie for linie oppefra og ned. Når hele første ramme er tegnet, startes der forfra på anden ramme med at tegne oven i første linie igen. Sådan fortsættes indtil sidste ramme er tegnet.
  4. Index DOT html. Generel information om de enkelte HTML-tags og de tilhørende attributter.
  5. Javascript
    • Dokumentation af JavaScript hos Netscape
    • Dokumentation af Microsofts JavaScript version, kaldet JScript. Også adgang til Microsofts eget scriptsprog, VBscript, som Explorer browseren kan forstå. Under "JScript" er der bl.a. adgang til nogle eksempler.
    • Kodeeksempler fra Netscape
    • Eiffeltårnet flytter sig vha. JavaScript hos Netscape
  6. DHTML
  7. insideDHTML eksempler