Lathund till Fireworks

Skapa en animering

Ett recept på hur du gör en loopad animering som består av fyra delbilder och text.

När du skapar en animering i Fireworks använder du dig främst av tre menyer, Layers, Frames och Exportmenyn. Layers och Frames använder du för att skapa och få en översikt över bildrutorna i animeringen. För att sedan ställa in hur animeringen ska visas, hur den ska loopas och hur länge varje bildruta ska visas etc. använder du Exportmenyn.

1. Skapa ett nytt dokument genom att välja New under menyn File
2. I dialogrutan New Document gör du följande inställningar och sedan klickar du på OK.
- Witdh: - Height: - Resolution: - Canvas Color:	150 pixels 100 pixels 72 pixels/inch White
3. Se till att menynerna Layers och Frames är framme. Du kan ta fram och dölja menynerna med den här knappen Du hittar också menyerna under Window

Du bör nu ha tre bildrutor under fliken Frames. 4. Skriv in text a) Klicka på Frame 1 för att markera vilken ruta du ska arbeta med b) Klicka på textverktyget
c) Klicka på bildytan, du får då upp menyn för text som du fyller i enligt bilden nedan:
d) Klicka på OK

Du bör nu ha en bild som innehåller en text med en blå markeringsram. Att flytta objekt. Du kan flytta texten genom att peka på texten och hålla ned vänster musknapp samtidigt som du drar texten dit du vill ha den. Du kan också använda piltangenterna för att flytta texten över bildytan Att byta färg på texten
5. Kopiera texten till de övriga två bildrutorna För att kunna kopiera bokstäverna måste ordet först vara markerat. Om du inte kan se den tunna, blå ramen runt ordet är det bara att klicka på ordet med markeringsverktyget för att markera bokstäverna. a) Klicka på samma knapp som du klickade på för att få fram menyn där du kunde lägga till bildrutor. b) Klicka på Copy to frames c) Bocka för All Frames och klicka på OK d) Kontrollera att texten har kopierats till alla bildrutor genom att klicka på respektive bildruta under fliken Layers.
6. Anpassa innehållet i de olika bildrutorna a) Klicka på Frame 1 b) Dubbelklicka på texten i bildrutan, du kommer då in i textmenyn igen c) Ta bort bokstäverna E och J d) Klicka på OK e) Klicka på Frame 2 f) Dubbelklicka på texten i bildrutan så att du kommer till menyn för text igen. g) Ta bort bokstaven J h) Klicka på OK Följande bokstäver bör nu finnas i dina bildrutor: Frame 1 H Frame 2 HE Frame 3 HEJ
7. Lägg till en tom bildruta ( se punkt 3 ) I menyn Add frames och bockar du för alternativet At the beginning Animeringen kommer då att starta med en tom ruta. 8. Testa animeringen Längst ned till höger i programfönstret finner du en liten panel som du kan använda för att provköra din animering.
9. Exportera animeringen a) Välj menyn File och därefter Export Preview. b) Klicka på fliken Options och välj Animated gifs i listan vid Formats c) Klicka på fliken Animation och gör inställningarna enligt bilden nedan. I den vänstra delen av exportmenyn (avbildad nedan) ställer du in egenskaperna för animeringen. I den högra delen av menyn får du en förhandsgranskning av animeringen, när du har provspelat animeringen kan du i den högra delen också se nedladdningstid och storlek.

(Du kan också klicka på knappen med trollstaven för att få en liten vägledning i hur du exporterar animeringen)
Editera bildrutor Det finns flera sätt att anpassa animeringens bildrutor genom att använda menyn avbildad här intill. Duplicera rutor Du kan kopiera bildrutor i animeringen. I menyn Duplicate Frames skriver du in hur många kopior du vill ha och var de ska klistras in. Ta bort en ruta Markera rutan du vill ta bort och välj Delete frame

Öppna en animering Du kan öppna animerade gifbilder genom att välja File och Open. I paletterna Layers och Frames kan du sedan få en överblick över animeringens delrutor och gå in och förändra dem.
Tips En animering behöver inte enbart bestå i att du visar eller döljer objekt. Eftersom det är så enkelt att genomföra förändringarpå objekt i Firewors kan du även prova att förändra objektens egenskaper som färg, genomskinlighet och struktur över flera delbilder i en animering. Testa gärna att leka med till exempel dropshadow-effekten.

En webbsida kan alltid bli bättre, kom gärna med förslag på hur den här kan förbättras.
Camilla.Hallgren@educ.umu.se. © Camilla Hällgren 2000
Sidan uppdaterades den 28 mars 2000