go to the bottom of the page
home
dölj meny

5. Button del 2

Detta exempel utgår från att du har en knapp placerad på Stagen. Detta kan du lära dig i exemplet Button del 1.

Bild 5.1. Button placerad på Stagen

Bild 5.1. Button placerad på Stagen

ActionScript är ett kodspråk som används av Flash. Det används exempelvis för att påverka symboler såsom Buttons och MovieClips. I detta exempel kommer ActionScript användas för att utföra en handling vid tryck på knappen. Det första som måste göras är att ge knappen ett instansnamn. Då du drog knappen från libraryt till Stagen i föregående exempel skapade du en instans av objektet. Det kan vara svårt att förstå precis vad det betyder i det här läget, men du kommer lära dig mer och mer i takt med att du använder Flash.

För att ge knappen ett instansnamn, markera knappen genom att trycka på den med Selection tool, i Properties menyn i fältet för instance name, skriv in instansnamnet knapp_a_btn. Properties menyn sitter oftast längst ned i Flashprogrammet. Se bild 5.2.

Bild 5.2. Button får ett instansnamn

Bild 5.2. Button får ett instansnamn

Du kanske undrar varför knappen fick ett så konstigt namn. Jo, det är bra att döpa Buttons instansnamn till namn som slutar på _btn, detta gör att ActionScript känner igen att det är en Button. På samma sätt bör MovieClips döpas till instansnamn som slutar på _mc.

Låt oss fortsätta. 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. För att hålla god ordning är det bra att döpa lagren till passande namn. Dubbelklicka på det nya lagret där det står Layer 2. Döp det till exempelvis ActionScript. Döp på samma sätt Layer 1 till Content. Se bild 5.3.

Bild 5.3. Skapa nytt lager att fylla med ActionScript

Bild 5.3. Skapa nytt lager att fylla med ActionScript

Högerklicka nu i frame 1 i lagret ActionScript, i Dropdownmenyn som visas tryck på Actions. Nu öppnas fliken Actions. Den kod vi skriver i denna ruta påverkar det som är i frame 1. Se bild 5.4.

Bild 5.4. Fliken för ActionScript

Bild 5.4. Fliken för ActionScript

Du kan skriva ActionScript genom att markera det stora vita fältet i Actionsfliken. För att skapa en händelse då knappen med instansnamnet knapp_a_btn trycks på, skriv eller klistra in följande kod :

knapp_a_btn.onRelease=function(){
   trace("knappen nedtryckt");
}

knapp_a_btn, hänvisar till att det är denna instans av knappen som händelsen är kopplad till. onRelease innebär att något skall hända då musknappen släpps från knappen. Trace innebär att text skrivs till ett så kallat output fönster, detta är bra för att testa Flashfilmen. Testa flashfilmen genom att trycka i översta menyn Control>Test movie, eller tryck CTRL + ENTER. Prova att trycka på knappen. Nu skall ett Output fönster visas med den text du skrev i Trace funktionen. Se bild 5.5.

Bild 5.5. ActionsScript skriver till Output fönstret

Bild 5.5. ActionsScript skriver till Output fönstret

På liknande sätt kan du nu ändra i ActionScript koden för att andra saker skall hända vid knapptryck. Prova nu att ändra föregående kod till:

knapp_a_btn.onRelease=function(){
   knapp_a_btn._x=knapp_a_btn._x+10;
}

_x innebär positionen på knappen i x led. Koden betyder att x värdet på knappen skall bli lika med x värdet på knappen plus 10 vid tryck på knappen. Testa flashfilmen genom att trycka i översta menyn Control>Test movie, eller tryck CTRL + ENTER. Se bild 5.6.

Bild 5.6. Button som flyttas i x led vid tryck. Tryck på knappen för att testa.

Du är nu klar med övning 5. Men om du vill kan du bygga vidare. Prova att ändra i ActionScript koden så att knappen fungerar på andra sätt. Försök få knappen att fungera som exemplen nedan. Ett tips är att titta i Dropdownmenyn som visas då du i ActionScript skriver instansnamnet, i nedanstående exempel ändras knappens _x,_y,_alpha och _width.

Bild 5.7. Button som flyttas i x och y led vid tryck

Bild 5.8. Button som tonas ut vid tryck, alpha värdet ändras

Bild 5.8. Button som blir bredare, får större värde i width, vid tryck

Läs mer:
http://www.echoecho.com/flashbuttons.htm
http://www.video-animation.com/flash8_007.shtml