Buttons met static var

[Adidass1990]

Beste allen,

Omdat ik nog een noob ben op actionscript gebied ga ik ook waarschijnlijk een noob vraag stellen.

Ik heb 2 buttons gemaakt die een korte scale animatie doen bij MOUSE_OVER, en een scale animatie terug bij MOUSE_OUT.
Nu wil ik er voor zorgen dat als men klikt de scale van de geklikte button op 1 komt te staan en van de andere button op 0.
Waarschijnlijk moet ik iets doen met een static var, maar weet niet zo goed hoe ik dat het beste kan doen.

Ik heb een movieClip(myBut1) aangemaakt met daarin een movieClip(blue). Deze heb ik met actionscript op "scaleX = 0" gezet.

Nu heb ik al wel wat actionscript geschreven, zodat jullie een kleine impressie krijgen wat ik bedoel.

import flash.events.MouseEvent;
import caurina.transitions.Tweener;

myBut1.blue.scaleX = 0;
myBut2.blue.scaleX = 0;

myBut1.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
myBut1.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
myBut1.addEventListener(MouseEvent.MOUSE_UP, upHandler);

myBut2.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
myBut2.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
myBut2.addEventListener(MouseEvent.MOUSE_UP, upHandler);

function overHandler(e:MouseEvent):void {
if(e.target.name == "myBut1") {
Tweener.addTween(myBut1.blue, {scaleX:1, time:2, transition:"EaseOutRegular"});
} else {
Tweener.addTween(myBut2.blue, {scaleX:1, time:2, transition:"EaseOutRegular"});
}
}

function outHandler(e:MouseEvent):void {
if(e.target.name == "myBut1") {
Tweener.addTween(myBut1.blue, {scaleX:0, time:2, transition:"EaseOutRegular"});
} else {
Tweener.addTween(myBut2.blue, {scaleX:0, time:2, transition:"EaseOutRegular"});
}
}

function upHandler(e:MouseEvent):void {
trace("Er is op " + e.target.name + " geklikt!");

if(e.target.name == "myBut1") {
myBut1.blue.scaleX = 1;
} else {
myBut2.blue.scaleX = 1;
}
}

[nuvorm]

daar heeft een static var niet zo heel erg veel mee te maken maar je kunt het gebruiken. In dit geval kun je de public scaleX var gebruiken zoals je doet.

het lijk mij trouwens moeilijk om ergens overheen te rollen met de muis als scalex op 0 staat maar dit terzijde.

waar een static var handig voor is:

je hebt een pagina met 100 buttoninstances van dezelfde class.
en je wilt de rollover sound van alle buttons aanpassen.

in plaats van alle button instances in een array op te slaan en een for loop gebruiken om de propertie aan te passen, kun je een static var gebruiken.

[Adidass1990]

Thanks voor je toelichting ver static vars.

het lijk mij trouwens moeilijk om ergens overheen te rollen met de muis als scalex op 0 staat maar dit terzijde.
De movieClip(blue) die in mijn button movieclip(myBut1) zit staat op scaleX 0. De button zelf niet.


Wat ik eigenlijk wil is als ik op button 1 klik, dat hij dan actief is en scaleX 1 is en als ik op button 2 klik dat die dan actief is en op scaleX 1 staat. Alle andere buttons die dan niet actief zijn animeren dan terug.

[Fronk]

nuvorm, dat static klinkt wel interessant want ik heb nogal ns veel instances van dezelfde class. Ik heb wel ns begrepen dat je dan niet met var ding:Ding=new Ding() moet werken, dus geen constructor aanroepen. Maar hoe t wel moet??

Kun je me op een spoor zetten?

[Adidass1990]

Ik ben eruit...! :D


Even een korte uitleg voor de mensen die ook nog niet zo ver zijn met actionscript 3 als ik:

Ik wist dat ik iets moest doen met een variabele. Uiteindelijk heb ik geen static var aangemaakt maar een gewone var.

De movieClip zelf heb ik even veranderd. Het zijn 2 vierkante blokjes. Als je over eentje heen hovert dan veranderd zijn scaleX van 1 naar 4 met een mooie easeOut(Tweener). Bij je mouseOut bounced(Tweener) hij terug naar scaleX 1.
Als je nu op een blokje1 klikt scaled hij naar scaleX 4 en blijft hij staan. Klik je vervolgens op blokje2 scaled deze vervolgens naar scaleX 4 en blokje1 scaled terug naar scaleX 1 met een mooi tween effect.

Hiermee heb ik een mooie actieve button weten te maken wat handig kan zijn voor menu's e.d.
Ik kan me zo voorstellen dat dit nog niet echt OOP is. Als er 8 buttons moeten komen wil je dit natuurlijk een stuk mooier opschrijven. Wellicht in een for loop.

Mochten er mensen zijn die het leuk vinden om dit uit te breiden naar een iets mooier OOP script, graag..!

De code:
import flash.events.MouseEvent;
import caurina.transitions.Tweener;

var activeBtn:Number = 0;

myBut1.scaleX = 1;
myBut2.scaleX = 1;

myBut1.buttonMode = true;
myBut1.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
myBut1.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
myBut1.addEventListener(MouseEvent.MOUSE_UP, upHandler);

myBut2.buttonMode = true;
myBut2.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
myBut2.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
myBut2.addEventListener(MouseEvent.MOUSE_UP, upHandler);

function overHandler(e:MouseEvent):void {
if(e.target.name == "myBut1") {
Tweener.addTween(myBut1, {scaleX:4, time:1, transition:"EaseOutRegular"});
} else {
Tweener.addTween(myBut2, {scaleX:4, time:1, transition:"EaseOutRegular"});
}
}

function outHandler(e:MouseEvent):void {
if(e.target.name == "myBut1" && activeBtn != 1) {
trace(activeBtn);
Tweener.addTween(myBut1, {scaleX:1, time:1, transition:"EaseOutBounce"});
} else if (e.target.name == "myBut2" && activeBtn != 2){
trace(activeBtn);
Tweener.addTween(myBut2, {scaleX:1, time:1, transition:"EaseOutBounce"});
}
}

function upHandler(e:MouseEvent):void {
if(e.target.name == "myBut1") {
activeBtn = 1;
myBut1.buttonMode = false;
myBut2.buttonMode = true;
myBut1.scaleX = 4;
Tweener.addTween(myBut2, {scaleX:1, time:1, transition:"EaseOutBounce"});

trace(activeBtn);
} else {
activeBtn = 2;
myBut2.buttonMode = false;
myBut1.buttonMode = true;
myBut2.scaleX = 4;
Tweener.addTween(myBut1, {scaleX:1, time:1, transition:"EaseOutBounce"});

trace(activeBtn);
}
}

[Fronk]

Hoi Adidass1990,
mooi dat t werkt! Maar als je met deze methode later knoppen wil toevoegen wordt t wel lastig.
Groeten van Fronk

[Adidass1990]

Hoi Adidass1990,
mooi dat t werkt! Maar als je met deze methode later knoppen wil toevoegen wordt t wel lastig.
Groeten van Fronk

Kan je ook aangeven waarom? en wat dan een betere oplossing zou zijn??

[jaspermuts]

Je checkt steeds of de naam van de button waarop je hebt geklikt myBut1 is, en zo niet, dan ga je uit van myBut2, maar als het eigenlijk (later dus) myBut3 zou zijn, dan ga je alsnog uit van myBut2. Je kunt het allemaal vereenvoudigen door de met de button uit e.target (of e.currentTarget, zie mijn onderschrift) te werken, ipv door e.target.name te testen en dan de button weer op te halen

import flash.events.MouseEvent;
import caurina.transitions.Tweener;

var activeBtn:MovieClip;

myBut1.scaleX = 1;
myBut2.scaleX = 1;

myBut1.buttonMode = true;
myBut1.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
myBut1.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
myBut1.addEventListener(MouseEvent.MOUSE_UP, upHandler);

myBut2.buttonMode = true;
myBut2.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
myBut2.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
myBut2.addEventListener(MouseEvent.MOUSE_UP, upHandler);

function overHandler(e:MouseEvent):void {
var button:MovieClip = e.currentTarget as MovieClip;
Tweener.addTween(button, {scaleX:4, time:1, transition:"EaseOutRegular"});
}

function outHandler(e:MouseEvent):void {
var button:MovieClip = e.currentTarget as MovieClip;
if(button != activeBtn)
{
Tweener.addTween(button, {scaleX:1, time:1, transition:"EaseOutBounce"});
}
}

function upHandler(e:MouseEvent):void {
var button:MovieClip = e.currentTarget as MovieClip;
activeBtn = button;
button.buttonMode = false;
button.buttonMode = true;
button.scaleX = 4;
Tweener.addTween(button, {scaleX:1, time:1, transition:"EaseOutBounce"});
}

(foutjes voorbehouden)

[Adidass1990]

Hoi Jaspermuts,


Ik ben een beetje laat met mn reactie maar wil je sowieso bedanken voor je post.
Echter snap ik niet zo goed hoe je upHandler gemaakt hebt.

Wat ik namelijk gedaan heb is dat als ik op een knop klik, dat dan alle andere buttons terug schieten naar hun beginpositie.
Nu moet ik er eerst overheen gaan voordat hij terug gaat naar beginpositie.

hoe kan ik dat met jou oplossing maken?

Check ook even mijn upHandler. Mijn if en else statement

function upHandler(e:MouseEvent):void {
if(e.target.name == "myBut1") {
activeBtn = 1;
myBut1.buttonMode = false;
myBut2.buttonMode = true;
myBut1.scaleX = 4;
Tweener.addTween(myBut2, {scaleX:1, time:1, transition:"EaseOutBounce"});

trace(activeBtn);
} else {
activeBtn = 2;
myBut2.buttonMode = false;
myBut1.buttonMode = true;
myBut2.scaleX = 4;
Tweener.addTween(myBut1, {scaleX:1, time:1, transition:"EaseOutBounce"});

trace(activeBtn);
}
}

[nuvorm]

nuvorm, dat static klinkt wel interessant want ik heb nogal ns veel instances van dezelfde class. Ik heb wel ns begrepen dat je dan niet met var ding:Ding=new Ding() moet werken, dus geen constructor aanroepen. Maar hoe t wel moet??

Kun je me op een spoor zetten?


je kunt gewoon instances aanmaken van een klasse door
var dinga:Ding=new Ding()
var dingb:Ding=new Ding()

Ding.VARIABELE="een soundnaam.wav";
te gebruiken.

een klasse variabele (static var) is handig om zoals ik eerder uitlegde bijvoorbeeld de sound van alle Dingen in 1 keer te veranderen zonder dat je daarvoor de instanties per stuk (middels bijvoorbeeld het lopen door een array waar je de instanties in hebt opgeslagen) hoeft aan te roepen.

je kunt dan diect de klasse variabelen zetten door Ding.VARIABELE="een andere sound naam.wav" te zetten. (zie boven)

in de klasse zelf definieer je de variabele zo:

public static var VARIABELE:String="nog geen sound naam.wav";
je kunt de variabele VARIABELE in elke instantie aanroepen omdat deze instantie rechtstreeks voortkomt uit de klasse Ding.

ik hoop dat ik het een beetje duidelijk heb uitgelegd.

groet, Wouter