Hey guys, hope you’re all well.
As you know I’ve been working on a flash game recently that is due out soon (I’ll keep you posted) and one of the things I’ve found most over-complicated and time consuming is creating and managing buttons. For example, if we want to create a simple button that runs a function we’d have to write something like this:
1: button.addEventListener(MouseEvent.CLICK, someFunction);
2: button.buttonMode = true;
3: button.mousechildren = false;
4:
5: function someFunction (e:MouseEvent)
6: {
7: //button function here
8: }
That’s quite a lot for just a simple button, and what if we want a mouse over animation? Then it looks something like this (using Tweener):
1: button.addEventListener(MouseEvent.CLICK, someFunction);
2: button.buttonMode = true;
3: button.mousechildren = false;
4:
5: button.addEventListener(MouseEvent.MOUSE_OVER, overFunction);
6: button.addEventListener(MouseEvent.MOUSE_OUT, outFunction);
7:
8: function someFunction(e:MouseEvent)
9: {
10: //button function here
11: }
12:
13: function overFunction(e:MouseEvent)
14: {
15: Tweener.addTween(e.currentTarget, {_brightness: 1, time: 0.3, transition: "easeInOutSine"});
16: }
17:
18: function outFunction(e:MouseEvent)
19: {
20: Tweener.addTween(e.currentTarget, {_brightness: 0, time: 0.3, transition: "easeInOutSine"});
21: }
That’s a lot more already, and this is just for one button with a simple animation!
Then we have the issue of removing event listeners when we don’t need/want them anymore. In AS3 we need to write something like this:
1: button.removeEventListener(MouseEvent.CLICK, someFunction);
That might look like a relatively simple one line operation, but baring in mind we have to do this for every listener the button has (click, mouse over, mouse out etc) and we have to already know what listeners are attached and what function they perform, the whole process becomes far too time consuming for something that really shouldn’t be.
I’m not having a go at adobe for making the process convoluted, I agree with the methods used and I wouldn’t want it changed, but to save time I wrote a QuickButtons class to do all this stuff quickly and easily.
To setup the class initially you just put this variable definition:
1: public var qb:QuickButtons = new QuickButtons();
Then whenever we want to add a function button anywhere in your code we can just write:
1: qb.setupFunctionButton(button, someFunction, true);
Where ‘button’ is the movie clip you want turned into a button, ‘someFunction’ is the function you want it to run and ‘true’ means it will add the default over/out animations (this can be defined at the bottom of the class file).
So that’s nice and simple, but what if we want to do a custom animation for this button? Then we have this:
1: qb.setupCustomButton(button, overFunction, outFunction, someFunction, true);
Where ‘button’ is the movie clip you want turned into a button, ‘overFunction’ and ‘outFunction’ are the over/out animation functions, ‘someFunction’ is the function you want it to run and ‘true’ means it will use the hand cursor.
If we want to setup a button that opens a URL we can use:
1: qb.setupURLButton(button, "http://someURL.com", "_blank", true);
Where ‘button’ is the movie clip you want turned into a button, the first string is the url you want to link to, the second string is the target frame and ‘true’ means it will add the default over/out animations.
I also wrote a function for text that automatically places a catchment box behind it, it looks similar to the above:
1: qb.setupTextURLButton(button, "http://someURL.com", "_blank", true);
There is some more in there too but you can find them in the class once you’ve downloaded it.
We still have one more issue however, what about removing listeners? Unfortunately we don’t have a magical ‘removeAllEventListeners’ function built into flash, but I have written my own one that will work only with events added to buttons by my class. We simply put:
1: qb.removeListeners(button);
If you want to see how this works just have a look in the class. In a nutshell it stores all the added events in and array on the button’s movie clip and then removes them one by one.
So, there we have it, the first version of my QuickButtons class. I’ll add to it as I work perhaps but its good enough to save you a lot of time as it is now. You can use it and edit it for anything as much as you like, so long as you keep my name at the top I don’t mind :) Let me know if you need any help with it in the comments, you can download the class here.
Enjoy!
-Ben
Jan 12, 2010 at 3:22 PM | 
Ben Beckford
