1. Vad är en knapp i Flash?

En knapp i Flash är en symbol (se  Bibliotek ) som finns till för att underlätta skapandet av knappar i filmen. På denna sida ska vi skapa en enkel knapp. Det är lätt att tappa bort sig när man jobbar med filmer i filmer som vi kommer att göra i detta exempel, men kom ihåg: man kan alltid komma tillbaka till huvudfilmen via Edit->Edit Movie.

•  Titta på knappen! 

2. Skapa en ny film

Vi börjar med att skapa en ny film med storlek 300x50 pixlar och svart bakgrund.

1. Välj: File->New.
2. Välj: Modify->Movie.
3. Ändra bredd till 300 och höjd till 50.
4. Ändra bakgrundsfärg till vit.

3. Skapa en knapp till biblioteket

Vi skapar en knapp som hamnar i biblioteket, och som man sedan kan dra in i filmen.

1. Välj Insert->New Symbol.
2. Döp symbolen till Clicky och välj symboltyp Button.

4. Knappens tidslinje

Den tidslinje som nu kommer upp är ingen riktig tidslinje, ty filmen hoppar mellan de 4 rutorna beroende på vad användaren gör med musen. Nedan beskriver jag de 4 rutorna:

1. Up= Knappen befinner sig i denna ruta så länge muspekaren befinner sig utanför knappens träffyta. Här lägger man en bild som visar knappen i sitt normalläge.
2. Over= Om muspekaren kommer över träffytan så hoppar knappen till denna ruta. Man lägger en något förändrad bild här för att markera att knappen är klickbar.
3. Down= Här lägger man den bild som ska visas då användaren klickar på knappen (inom träffytan). Det är vanligt att man lägger en inverterad bild här så användaren ser att filmen har reagerat på klicket.
4. Hit= Här lägger man en figur som definierar träffytan, d.v.s. området som ska kunna klickas på. Färgen på figuren behöver inte vara genomskinlig, eftersom det bara är den yttre formen som används.

OBS! Alla de olika rutorna kan innehålla filmer, men vi kommer bara att låta Over-rutan innehålla en film i detta exempel.

5. Lägg till objekt till upprutan

Nu är det dags att skapa bildens utseende i normaltillstånd.

1. Välj Window->Panels->Mixer och ändra färg till Röd.
2. Klicka på fyrkanten och gör en fyrkant, detta är själva knappen.
3. I fönstret Mixer kan du ändra färg till svart.
4. Klicka på A-et och skriv in texten Clicky.

6. Kopiera objekten till hela tidslinjen

De objekt vi lagt till i upprutan vill vi kopiera till alla de övriga rutorna i tidslinjen. Detta för att knappens normaltillstånd ligger till grund för hur knappen ska se ut i alla övriga tillstånden.

1. Klicka i upprutan.
2. Välj: Insert->Keyframe. Nu har objekten kopierats till överrutan.
3. Välj: Insert->Keyframe. Nu har objekten kopierats till nerrutan.
4. Välj: Insert->Keyframe. Nu har objekten kopierats till träffrutan.

7. Skapa filmen Grow till biblioteket

När musen rör sig över träffytan vill vi att texten ska svälla. Det betyder att vi måste skapa en film som kan läggas i överrutan. Gör följande:

1. Välj: Insert->New Symbol.
2. Döp till Grow.
3. Välj symboltyp Movie Clip.

Nu ser tidslinjen ut som vanligt igen, men vi är inte tillbaka i huvudfilmen utan i filmen Grow:

8. Skapa effekter till filmen Grow

Nu kommer vi att lägga till texten Clicky som växer.

1. Klicka på A-et och skriv in Clicky så centrerat det går.
2. Markera ruta 1 på tidslinjen.
3. Välj: Insert->Create Motion Tween.
4. Markera ruta 10 på tidslinjen.
5. Välj: Insert->Keyframe.
6. Välj: Modify->Transform->Scale and Rotate.
7. Ändra Scale till 200%.

9. Lägg in filmen Grow i överrutan

Först öppnar vi knappen igen, sedan vill vi lägga in vår film i överrutan.

1. Välj: Edit->Edit Movie för att gå tillbaka till huvudfilmen.
2. Välj: Window->Library.
3. Dubbelklicka på ikonen till vänster om Clicky i biblioteket för att kunna editera knappen.
4. Klicka i överrutan.
5. Dra ikonen till vänster om Grow i biblioteket till till knappen.
6. Välj pilen och flytta Grow så att texterna passar på varandra.

10. Gör nerrutan vit

1. Markera nerrutan.
2. Välj: Window->Panels->Mixer och ändra färg till vit.

11. Lägg in knappen i huvudfilmen

Nu när knappen är klar är allt frid och fröjd skulle man kunna tro, men knappen måste in i huvudfilmen för att synas. Gör följande:

1. Välj: Edit->Edit Movie för att gå tillbaka till huvudfilmen.
2. Dra ikonen till vänster om Clicky i biblioteket till scenen där du vill ha den.

12. Lägg till ett ActionScript till Knappen

För att något ska hända då man klickar på knappen måste ett ActionScript läggas till. I vårt fall vill vi att man ska komma till sidan med filmen från  Rörelse . Gör följande:

1. Klicka på knappen på scenen.
2. Välj: Window->Actions.
3. Klicka på + och sedan på Basic Actions->Get URL.
4. Fyll i Hello.html som URL.

13. Spara och kompilera

1. Välj: File->Save As, och döp filen till Button.fla.
2. Välj: File->Publish.