Kom godt igang med buttons i ActionScript 3

Kategori: Tips og tricks | Kommentarer (1)
Gemt: 2007-06-14 15:52


I AS3 har måden man arbejder med buttons, som næsten alt andet, ændret sig lidt, og derfor er her en hurtig gennemgang så du kan komme godt igang med dem, blandt andet også et eksempel på den nye mulighed for at detecte dobbeltklik.

I forhold til AS2 er der to store ændringer:
- Ingen kode på knappen
- onRelease er blevet til MouseEvent.CLICK

Og et par tilføjelser:
- MouseEvent.DOUBLE_CLICK
- Nye properties der sendes med når der bliver klikket

Men, lad os tage dem fra en ende af:

Ingen kode på knappen
Ja, du læste rigtigt. I ActionScript 3 kan en designer (eller andre som lige skal lave et hack) ikke længere tilføje kode direkte på selve knappen, den skal tilføjes på en keyframe.

Det er både godt og skidt. På den ene side tvinger den alle til at gøre det på den rigtige måde, og gør det dermed nemmere at overskue hvor der er kode og hvor der ikke er. Men på den anden side kan det gøre det lidt mere besværligt for en designer, som lige skal lave en hurtigt demo på en menu eller lignende.

onRelease er blevet til MouseEvent.CLICK
Den kode som man skal skrive i keyframen for at fange klikket har ændret sig lidt.

AS2:

my_btn.onRelease = minFunktion;
function minFunktion():void {
   trace("klik");
}

AS3:

import flash.events.MouseEvent;

my_btn.addEventListener(MouseEvent.CLICK, mySingle);
function mySingle(event:MouseEvent):void {
	trace("enkelt klik");
}

Import skal kun være der én gang, uanset hvor mange knapper eller events du har.

Så, alt i alt ikke den helt store ændring der, omend det altid er svært at huske i starten.

MouseEvent.DOUBLE_CLICK
Som jeg skrev kan man nu også detecte dobbeltklik, og det gøres stort set ligesom med et enkelt klik:

import flash.events.MouseEvent;

my_btn.addEventListener(MouseEvent.DOUBLE_CLICK, myDouble);
my_btn.doubleClickEnabled = true;
function myDouble(event:MouseEvent):void {
	trace("dobbelt klik");
}

I stedet for modtage eventen MouseEvent.CLICK bruger man i stedet MouseEvent.DOUBLE_CLICK, og så skal man også huske at sætte doubleClickEnabled = true.

Man kunne naturligvis også detecte dobbeltklik i AS2, men her skulle man skrive en skræddersyet funktion til det, og fordelen ved den nye event er også at den bruger de indstillinger for dobbeltklikshastighed som brugeren selv har sat i operativsystemet.

Nye properties der sendes med når der bliver klikket
Som du har kunnet se på koden, så har der til funktionen været medsendt et event:MouseEvent.
Dette event-objekt indeholder nogle yderligere værdier som kan være ganske nyttig:

ctrlKey: True hvis ctrl blev holdt nede
shiftKey: True hvis shift blev holdt nede
currentTarget: Det objekt der blev klikket på
localX og localY: Lokal _x og _y værdi for musepilen i det øjeblik eventen skete
stageX og stageY: Global _x og _y værdi for musepilen i det øjeblik eventen skete

Her et eksempel med ctrlKey, men det fungerer naturligvis lige sådan for de andre værdier:

import flash.events.MouseEvent;

my_btn.addEventListener(MouseEvent.CLICK, mySingle);
function mySingle(event:MouseEvent):void {
	trace("enkelt klik");
	trace("ctrlKey: " +  event.ctrlKey);
}

Det var lige et par hurtige tip til at komme godt igang med buttons i ActionScript 3, god fornøjelse!

NB: Der er også sket andre ting end dem jeg har nævnt i denne artikel, men disse vurderede jeg som værende de mest interessante, kig i dokumentationen for at få det fulde overblik.

Tilføjelse: 2 knapper
Jeg fik en mail fra en som spurgte hvad man gør hvis man har mere end én knap, og det kan man umiddelbart gribe an på 2 måder.

Den ene mulighed er ved at have 2 funktioner, en til hver knap:

my1_btn.addEventListener(MouseEvent.CLICK, myFunction1);
function myFunction1(event:MouseEvent):void {
	trace("klik på knap 1")
}

my2_btn.addEventListener(MouseEvent.CLICK, myFunction2);
function myFunction2(event:MouseEvent):void {
	trace("klik på knap 2")
}

Den anden måde er kun at have en funktion, men i stedet teste hvilken knap der blev trykket på, og det er her at event-objektet pludselig bliver nyttigt:

my1_btn.addEventListener(MouseEvent.CLICK, myFunction);
my2_btn.addEventListener(MouseEvent.CLICK, myFunction);
function myFunction(event:MouseEvent):void {
	if(event.currentTarget == my1_btn) {
		trace("klik på knap 1")
	} else if(event.currentTarget == my2_btn) {
		trace("klik på knap 2");
	}
}

Hvornår man vælger den ene tilgang fremfor den anden er lidt en smagssag, typisk bruger jeg selv flere funktioner hvis knapperne gør noget meget forskelligt, mens jeg kun har en funktion hvis de gør næsten det samme, eksempelvis hvis de er en del af en menu.