0

I have a whole bunch of buttons that all need to have both a mouse over effect as well as a toggle effect (on click) which changes the hue. I have made the functions for each hue change and that parts works quite well. Sadly I cant figure out how to get my toggle function to work how it is supposed to.

Below is my code for the toggle button. It works fine, except that my variable is global instead of specific for the instance. Therefor it only works if I have just one button. How can I change it to use a variable that is for the one button in focus?

Thanks in advance!

var primary = false;

function clickOn(e:MouseEvent):void{ 
    if (primary == false)     {
            greenHue(e.target);
            primary = true;
    } else {
            noHue(e.target);
            primary = false;
    }
}
0

3 Answers 3

2

The best thing to do is to extend the class you used for the buttons and add the functions to it, so all your buttons that derive from it will have the idependant behavior you want.

class ColoredButton extends Button {
    var primary = false;  

    public function ColoredButton() {
        this.addEventListener(MouseEvent.CLICK, clickOn);
    }

    private function clickOn(e:MouseEvent):void {   
        if (primary == false)     {  
            greenHue(e.target);  
            primary = true;  
        } else {  
            noHue(e.target);  
            primary = false;  
        }  
    }

    ...
  }
Sign up to request clarification or add additional context in comments.

4 Comments

This seems like a nice solution, but the thing is I need to store it for the button as when the mouse leaves the button, it needs to leave it the right color. I was hoping I could create a variable from the name of the instance like this. var e.target.name + "primary" = true;
You will have to move your hover event to the extended code, just below the click event and it will be run for each instance separatelly, not interfering on other. Please, post your updated code in the question.
Thanks for the code. I ended up setting up var primary:Array = new Array; and then refering to it using primary[e.target]. Works like a charm
if you solved your perlbem and don't want more feedback on this question, please post your solution as an answer and mark it as correct.
0

It depends on how you chose the design for your application, really. I mean, if you have a limited number of buttons and you know exactly what they are and they stay the same (say, button1, button2, button3 or hue, saturation and light), you can have three toggle variables. So you want to do:

var primaryH = false;
var primaryS = false;
var primaryL = false;

then, the three event declarations:

buttonH.addEventListener(MouseEvent.CLICK, clickOnH);
buttonS.addEventListener(MouseEvent.CLICK, clickOnS);
buttonL.addEventListener(MouseEvent.CLICK, clickOnL);

and the three function declarations:

function clickOnH(e:MouseEvent):void{ 
    if (primaryH == false)     {
            greenHue(e.target);
            primaryH = true;
    } else {
            noHue(e.target);
            primaryH = false;
    }
}

...

Otherwise, the best thing would be to create the toggle variable and functions in the button object. It would be "more OOP" and allow you to create as many buttons as you like without having to write the same thing over and over again.

Comments

0

This is what I did.

var primary:Array = new Array;



    if (primary[e.target.name] == true || secondary[e.target.name] == true) {
        noHue(e.target);
        primary[e.target.name] = false;

    } else {

            greenHue(e.target);
            primary[e.target.name] = true;

        }
    }

}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.