Så här skapar du en knapptypsknapp med Flash CS4

När du ser en Flash-animering hittar du ofta en stor knapp i mitten av bilden: genom att trycka på den spelas animationen. Förutom att titta på filmer kan en knapp i Flash CS4 hjälpa dig att navigera genom tidslinjer eller öppna nya fönster i animeringen. Följ dessa steg för att skapa en knapp i Flash CS4.

Metod 1

Skapa en knapp från bild och text

Öppna ett nytt dokument i Flash CS4.

Välj en bild för knappen. Du kan rita en form och markera den eller välja en befintlig bild.

Om du använder en bild från din webbläsare måste du spara den på hårddisken och sedan dra den till ditt dokument. Du kan inte kopiera och klistra in i Flash en bild som kommer från din webbläsare.

Du kan också infoga en sparad bild i dokumentet genom att välja Arkiv > import > Importera till arbetsområdet.

Lägg till texten för din knapp. Markera Textverktygen från Verktygspanelen och skriv texten på bilden.

Använd markören för att välja text och bild. Starta dialogrutan Konvertera till symbol genom att trycka på F8 eller välja Redigera > Konvertera.

Skriv namnet "Simple" i fältet Namn och välj Knappen i rullgardinsmenyn bredvid Typ. Klicka på OK när du är klar.

Metod 2

Definiera knappens stater

Dubbelklicka på knappen och välj "Ändra till plats" från rullgardinsmenyn.

Titta på tidslinjen. Du borde se rubriker som säger upp, över, ner och träff.

Högerklicka på Layer 1 och välj Insert Layer. Ordna omlag så att lag 1, som innehåller bild och text, är överst.

Välj alla tre ramarna i kolumnen Över. Över-kolumnen bestämmer hur knappen visas genom att flytta markören över den. Högerklicka och välj Lägg till nyckelram i rullgardinsmenyn.

Klicka på Over keyframe i Layer 2. När knappen visas, använd Linjeverktyget för att rita en rak linje under knapptexten. Layer 2-nyckelramen kommer att visas fullt på tidslinjen.

Välj Layer 3-nyckelramen under Över. Rita en rektangel som är tillräckligt stor för att omge din knapp. Placerade markören över knappen, så ser du att en understrukning och en rektangel kommer att visas tillsammans med nyckeln.

Välj kolumnen Ner, högerklicka och välj Insert Key Frame. Se till att kolumnen Ner är markerad.

Klicka på rektangeln till vänster om kolumnrubriken Upp. Ändra knappens färg i läge hovring: Du kommer att ändra den färg som visas när musen svävar. Detta gör det möjligt för knappen att ändra tonhöjd när du klickar på den.

Metod 3

Lägg till koden

Använd markören för att välja knappen. Skriv namnet "myButton" i fältet Namn på Egenskaper-panelen.

Tryck på F9 för att öppna åtgärdspanelen. Sätt in följande kod i fönstret Åtgärder:

funktion setupEvents () {

// associera händelser med händelsehanterare

myButton.addEventListener (MouseEvent.CLICK, clickButtonHandler);

myButton.addEventListener (MouseEvent.MOUSE_OVER, hoverButtonHandler);

}

setupEvents ();

funktion clickButtonHandler (e: MouseEvent) {

trace ("Clicked Button!");

}

funktion hoverButtonHandler (e: MouseEvent) {

trace ("Hovered Over Button!");

}

Välj Kontroll > Försök med animering > Prova kommandot. Applikationen visas i Flash Player-fönstret.

Flytta musen över knappen och klicka på den. Utmatningsfönstret visar en text av typen "Du passerar på knappen!" eller "Du har klickat på knappen!" enligt de åtgärder som vidtagits.

tips

Du kan alltid ändra ActionScript för att få din knapp att utföra olika uppgifter. Kontrollera kodrutan Kodning för att hitta en redan förberedd ActionScript-kod som gör det möjligt att använda många användningar av de vanligaste knapparna.

varningar

ActionScript 2.0 är inte kompatibel med ActionScript 3.0. Av den anledningen kan du, för din knapp, inte kopiera och klistra in koden som skrivs i Action Script 2.0.

Saker du behöver

dator
Adobe Flash CS4

Dela på sociala nätverk:

Relaterade