Søk i Webskolen:

Globale linker

• Linker
• Oppgaver

Dreamweaver

• Intro
• Site-management
• FTP
• Arbeids-området
• Tekst
• Bilder
• Tabeller
• Celler
• Kommentarer
• Invisibles
• Pageproperties
• HTML styles
• Rollovers
• Library items
• Frames
• Layers
• Timeline
• Stylesheets 1
• Stylesheets 2
• Stylesheets 3

<timeline>

Dreamweaver's evne til å kunne lage tidsbasert animasjon gjør den unik blant web-baserte verktøy. De som er kjent med Macromedias animasjonprogram Flash og Director, vil raskt føle seg komfortabel med Drewamweavers Timeline-palett.

Timelines forandrer attributter over tid. For å få et layer til å forflytte seg, forandres posisjonsattributtene - left og top - over tid. For å få objekter til å forsvinne og dukke fram igjen, forandrer du visibility egenskapene over tid. For å forandre stacking-orderen til layere, forandrer du z-indexen over tid.

Animasjonene som DW lager, trenger ikke brukeren ha et plug-in for å kunne se. Brukeren må derimot ha browsere som kan vise DHTML - det betyr IE4/NS4 eller høyere.

Når du lager en Timeline, putter DW inn JavaScripts i koden din. JavaScriptene definerer Timelinens alle funksjonaliteter. Man kan ha flere Timelines i et dokument.

Timelines paletten finner du under Windows menyen.

Timelines paletten

For å animere et layer, tar du tak i den lille firkanten over layeret, og drar det inn i Timelinespaletten. Da får du en blå strek som i bildet over i channel 1. Sirklene i denne blå linjen er keyframes. På keyframes skjer det noe viktig; animasjonen startes eller sluttes, en forandring i retning, etc.
For å «utvide tidsaksen» tar du tak i den siste keyframen i den blå linjen og trekker mot høyre (Husk at hvis FPS står til 15, vil tiden løpe 1 sekund pr. femtende frame). Den første keyframen er der layeret vil være ved begynnelsen av animasjonen, den siste er der den vil være ved slutten av animasjonen.
For å få til bevegelse klikker du på den siste keyframen i Timelinespaletten, går ut på arbeidsområdet, klikker og flytter layeret til det stedet du vil den skal bevege seg til. I arbeidsområdet vil du se at du får en strek fra startpunktet til sluttpunktet; det er den banen layeret vil følge når Timelinen spilles av.
Vil du forandre bane, legger du til keyframes i channel 1 ved å klikke og markere hvilken frame du vil retningsforandringen skal finne sted på og så høyreklikke og velg «Add Keyframe» og går ut i arbeidsområdet igjen og flytter layeret.

Den aller enkleste måten å få et layer til å bevege seg er å markere layeret, og høyreklikke på den lille firkanten på toppen av layeret og velge «Record Path». Nå er det bare å ta tak i layeret ved å klikke og holde på den lille firkanten og flytte på det i de retningene du vil at det skal bevege seg. Du vil se at du får en «sti» etter layeret der du flytter den. Dette er «stien» layeret vil følge i animasjonen.

Husk å krysse av for Autoplay i Timelinespaletten før du forhåndsviser med F12, for ellers får du ikke satt i gang animasjonen.

Ta en titt på denne siden for hvordan du lager en dropdownmeny med layers og timeline.

Vær også klar over at man kan bruke timeline sammen med behaviors på andre elementer på en side, f.eks bilder, og forandre bilde hvert 2 sekund. Bildene må være like store for at dette skal se noenlunde pent ut.

Fremgangsmåten er som følger:

• Åpne Timelinespaletten
• Klikk i B-linjen på Frame 30
• I Behaviorspaletten , klikker du på +tegnet og velger «Swap Image», (ta bort «Image Restore» i paletten som dukker opp,hvis du har det valget) og velg hvilket bilde som skal vises istedetfor det du har satt inn.
• I Timelinespaletten igjen, markerer du Frame 60 i B-linjen.
• Tilbake til Behaviorspaletten velger du «Swap Image Restore».
• Så var det Timelinespaletten nok en gang, her krysser du av for «Autoplay» og «Loop».
• Lagre og test

Det var en innføring i Layers og Timelines. La fantasien løpe fritt og lek deg!

Neste side er om eksterne stylesheets