6. Hemsida del 1

I detta exempel kommer du att skapa en hemsida i Flash. Du kommer att använda det du lärt dig om Buttons, Movie Clips samt ActionScript. Du kommer också lära dig att importera bilder.

Börja med att ställa in dokumentets bredd, höjd och bakgrundsfärg, genom att trycka på knappen Size i Properties fliken. I rutan som öppnas, skriv in önskad bredd och höjd. Välj sedan önskad bakgrundsfärg. Tryck Ok. Se bild 6.1.

Bild 6.1. Document properties

Din sida kan handla om vad du vill, i exemplet skapas en sida om fotboll. Sidan skall först få en logga. Skapa en bild på en logga i exempelvis Photoshop. Spara bilden som .jpg eller .gif (du kan prova att spara som .psd, men detta stöds ej av alla Flashversioner). I Flash, välj meny File>Import>Import to stage. Välj bilden du skapat och tryck Ok. Bilden är nu placerad på Stagen. Dra den till övre vänstra hörnet. Se bild 6.2.

Bild 6.2. Sidan har nu en logga

Skapa ett streck där menyn skall placeras. Tryck på Line tool i Tools. Dra sedan ett streck på Stagen. Med strecket markerat, ställ in tjocklek, typ och färg i fliken Properties. Om du vill böja strecket, dra i det med Selection tool. Det kan nu se ut ungefär som i bild 6.3.

Bild 6.3. Logga och streck

Du ska nu skapa menyns första knapp. Välj Rectangle tool och rita en rektangel på Stagen. Se till att rektangeln är markerad. Ställ in rektangelns bakgrundsfärg och kantlinjefärg i Properties fliken. Högerklicka sedan på knappen, i Dropdownmenyn som visas välj Convert to symbol. I rutan som öppnas skriv namnet knapp_ett och typen Button. Tryck Ok. Se bild 6.4.

Bild 6.4. Knapp skapas

Dubbelklicka på knappen du skapat. Du kan nu ändra knappens utseende. Använd Text tool för att skriva en text ovanpå rektangeln. Markera sedan texten med Selection tool, och ställ in passande färg, font och fontstorlek i Properties fliken. I Properties fliken, se också till att textfältet är inställt på Static text.

Högerklicka sedan i framen Over i Timeline, i Dropdownmenyn som visas välj Insert keyframe. Rektangeln och texten kopierades nu. Markera rektangeln och ändra färg i Properties fliken. Textens färg kan ändras på samma sätt. Du har nu definierat hur knappen skall se ut, och hur den ska se ut då den pekas på. Gör på samma sätt i frame Down och frame Hit i Timeline. Se bild 6.5.

Bild 6.5. Knapp definieras

Gå tillbaks till själva Flashsidan genom att trycka på Scene 1 ovanför Timeline. Visa Libraryt genom att trycka meny Window>library eller CTRL + L. Du kan här se din knapp. För att skapa resterande knappar så snabbt som möjligt skall du nu duplicera denna knapp. Högerklicka på knapp_ett i Libraryt, i Dropdownmenyn som visas välj Duplicate. Nu visas rutan Duplicate symbol. Skriv namnet knapp_tva, se till att typen Button är markerat och tryck Ok. Se bild 6.6.

Bild 6.6. Knappen dupliceras

I Libraryt visas nu en ny symbol, knapp_tva. Dra denna till Stagen. Dubbelklicka på knappen. Du kan nu ändra dess utseende, byt ut texten i knappen till det du önskar i alla frames Up, Over, Down, Hit.

Gå tillbaks till själva Flashsidan genom att trycka på Scene 1 ovanför Timeline. Skapa nu en knapp till på samma sätt, genom att Duplicera knapp_ett, döp den nya knappen till knapp_tre, dra den till Stagen och ändra texten i den. Menyn ser nu ut ungefär som i Bild 6.7.

Bild 6.7. Knappen dupliceras och texten ändras

Nu skall innehållet till varje menyval skapas som MovieClips. Använd Text tool på Stagen för att skriva en rubrik, ställ in så att den får en stor fontstorlek och fet text i Properties fliken. Använd sedan Text tool på Stagen igen för att skriva in en brödtext som hör till rubriken. Välj sedan meny File>Import>Import to stage och placera en passande bild på Stagen. Markera sedan Rubriken, brödtexten och bilden genom att hålla inne shift och peka på vardera med Selection tool. Högerklicka på det du markerat, i Dropdownmenyn som visas välj Convert to symbol. I rutan som visas, skriv namnet innehall_ett och se till att typen Movie clip är markerat. Se bild 6.8.

Bild 6.8. Innehåll som skall visas då knapp ett trycks skapas

Visa Libraryt genom att trycka meny Window>library eller CTRL + L. Du kan här se Movieclippet innehall_ett. Duplicera detta genom att högerklicka på det, i Dropdownmenyn som visas välj Duplicate. I rutan som visas, välj namnet innehall_tva. Se till att typen Movieclip är markerat. Du har nu även Movieclippet innehall_tva i ditt Library.

Dubbelklicka på Movieclippet innehall_tva i Libraryt. Du kan nu ändra i detta Movieclip så att det handlar om det knapp två antyder, i detta exempel om Hammarby. Ordna ny rubrik och brödtext. Importera sedan en ny bild genom meny File>Import>Import to stage. Se bild 6.9.

Bild 6.9. Innehållet ändras

Duplicera och skapa nytt innehåll till även det som knapp tre antyder. Du ska nu ha tre MovieClips i ditt Library med namn innehall_ett, innehall_tva och innehall_tre.

På Stagen ligger en instans av MovieClippet innehall_ett. Markera detta och skriv in innehall_ett_mc som instansnamn i fliken Properties. Se bild 6.10.

Bild 6.10. innehall_ett får ett instansnamn

Dra nu innehall_tva från Libraryt till Stagen. Ge denna instans instansnamnet innehall_tva_mc i fliken properties. Dra även innehall_tre från Libraryt till Stagen. Ge denna instans instansnamnet innehall_tre_mc i fliken properties. Det ser nu rörigt ut då tre MovieClips ligger på varandra. ActionScript kommer snart att användas för att dölja och visa dessa MovieClips enligt menyval.

Sidan är snart klar, det saknas bara en del ActionScript, och att knapparna får instansnamn. Markera den första knappen i menyn och ge den instansnamnet knapp_ett_btn i fliken Properties. Ge på samma sätt de andra knapparna namnen knapp_tva_btn och knapp_tre_btn. Det skall nu se ut ungefär som i bild 6.11.

Bild 6.11. Knapparna får instansnamn

Nästa steg är att skapa ett lager som ActionScript koden skrivs i. Precis under Layers, vänster sida om Timeline, tryck Insert Layer. Nu skapas ett nytt lager. Högerklicka nu i frame 1 i det nya lagret, i Dropdownmenyn som visas tryck på Actions. Nu visas fliken för ActionScript. Skriv följande kod:

De två första raderna av koden innebär att innehall_tva och innehall_tre göms då sidan laddas. Resterande rader handlar om vad som händer då respektive av menyns knappar har tryckts på, onRelease. Då knapp_ett_btn har tryckts på göms innehall_tva och innehall_tre, och innehall_ett visas. På samma sätt fungerar de andra knappparna. De ser till att ett innehåll visas och att de andra göms.

Testa flashfilmen genom att trycka i översta menyn Control>Test movie, eller tryck CTRL + ENTER. Se bild 6.12.

Bild 6.12. Hemsida om fotboll. Tryck i menyn för att testa.

Du är nu klar med övning 6. Du som vill jobba vidare kan även göra övning Hemsida del 2, i denna övning görs sidan mer avancerad.