Flash Notes: Simple Button Group With Tweener

July 10th, 2008

This example builds on the previous button group example – essentially a group of buttons that have a “disabled” state indicating which button was clicked last, and some animation effects courtesy of Tweener.

Download the files

These are the new concepts:

Place library items on the Stage dynamically using addChild
create array and put button instances in it
apply tweener to those instances (event.currentTarget)

In the previous example I put the buttons on the Stage manually and added their instance names. When dealing with a bunch of objects, it’s generally better to do this dynamically. In AS2, you’d use attachMovie. AS3 uses addChild.

To set up an object in the library for addChild, get its Symbol Properties and check the box “Export for ActionScript”. With this example, the symbol now has a class of “button”. The code to place an instance of “button” on the Stage is:

var myInstance = new button();
addChild(myInstance);

You can then manipulate the button via the var myInstance:

myInstance.y = 30;
myInstance.alpha = 0.5;

Anyhow, since I want to manage a bunch of buttons, I created an array and put all button instances in there using a loop within an “init” function – that key bit of code is “buttons_array[i] = myinstance;”. total_buttons is defined as a variable at the top of the script. Note I also added event listeners to all the buttons. Since all the buttons have the same behavior, I can assign it in the for loop:

var buttons_array:Array = new Array(); // array to put button instances

function init ():void{
for (var i=0; i < total_buttons; i++){
var myInstance = new button();
addChild(myInstance);
myInstance.x = ((60 * i) + 30); // spreads the buttons out horizontally
myInstance.y = 30;
myInstance.alpha = 0.5;
myInstance.buttonMode = true;
myInstance.mouseChildren = false; // keep textfield from responding to the mouse
myInstance.name_txt.text = (i + 1);
myInstance.addEventListener(MouseEvent.ROLL_OVER, myButtonOver);
myInstance.addEventListener(MouseEvent.MOUSE_DOWN, myButtonDown);
myInstance.addEventListener(MouseEvent.MOUSE_UP, myButtonUp);
myInstance.addEventListener(MouseEvent.ROLL_OUT, myButtonOut);
buttons_array[i] = myInstance;
}
}

init();

Next, the event listeners are defined in the normal fashion, but I added some animation using Tweener, a simple way to add animation effects. I’ve talked about installing and using Tweener before.

function myButtonOver (event:MouseEvent):void{
Tweener.addTween(event.currentTarget, {alpha:1, scaleY:1.5, time:0.2, transition:"linear"});
}

The above function is called whenever the cursor rolls over a button. The key conecpt is “event.currentTarget” which applies the tween to the button that’s calling the event (as opposed to “this”). The parameters to create the tween should be pretty self-explanatory; for more check out the Tweener documentation.

It’s also necessary to define the functions myButtonDown, myButtonUp, and myButtonOut – and a “reset_buttons” function should be called within myButtonUp.

Lastly, the reset buttons to get the buttons to behave as a group is slightly different. Instead of walking through the instance names, the loop runs through the array instead:

function reset_buttons ():void{
for(var j:uint = 0; j < total_buttons; j++){
Tweener.addTween(buttons_array[j], {alpha:0.5, scaleY:1, time:0.2, transition:"linear"});
buttons_array[j].buttonMode = true;
buttons_array[j].gotoAndStop("_up");
}
}

Please subscribe to the Webomatica RSS Feed!