Browse > Home / ActionScript, Tutorials / The ‘new’ Class keyword and creating dynamic buttons in AS3

| Subcribe via RSS

The ‘new’ Class keyword and creating dynamic buttons in AS3

January 6th, 2010 Posted in ActionScript, Tutorials

I use dynamic movieclips in almost every project I work on and AS3′s new method of adding dynamic movieclips to the stage makes it easy, instead of using AS2′s duplicateMovieClip() method. I will show you some tips and tricks to easily create applications in which dynamic movieclips are used and easily manage those movieclips.

1. Create a movieclip with a linked Class
First create a new AS3 project in Flash and create a new movieclip (Insert > New Symbol…), let’s call it MenuButton. In the Linkage properties (click the Advanced button if needed), check the Export for ActionScript box and for this example just leave all the settings like they are so click OK. You can put anything inside the movieclip you want but for this example I’m putting in a black box with the following properties: X:0, Y:0, width:100, height:20. Now return to the root scene, highlight the empty keyframe and open the actions tab.

2. Placing instances of the movieclip on the stage
First we create two variables, one for counting in a loop and one for the movieclip.

var i:uint;
var butn:MenuButton;

And now we create a loop to create 5 buttons, set the Y position of them and add them to the stage.

for (i = 0; i < 5; i++) {
     butn = new MenuButton();
     butn.y = i * 22;
     addChild(butn);
}

Now you should see 5 black boxes, one underneath the other with a 2 pixel space in between.

3. Referencing the movieclips easily
We’re gonna add another variable to create an array that will store all the buttons. Then when we create the buttons in the loop, we push the buttons into the array. So the code will now look like this:

var i:uint;
var butn:MenuButton;
var butns:Array = new Array();

for (i = 0; i < 5; i++) {
     butn = new MenuButton();
     butns.push(butn);
     butn.y = i * 22;
     addChild(butn);
}

So now you can call the third button for example by saying butns[2] (2 because the array count starts at 0). This can come in handy in many situations.

4. Making the buttons active/clickable
First we’re going to activate the movieclips as buttons and add a listener to them to pick up mouse clicks. We also have to add a variable to the button so we know which one go clicked. So now the loop block of the code will look like this:

for (i = 0; i < 5; i++) {
     butn = new MenuButton();
     butns.push(butn);
     butn.y = i * 22;
     butn.num = i;
     butn.buttonMode = true;
     butn.addEventListener(MouseEvent.CLICK, butnClick);
     addChild(butn);
}

And then we create the butnClick function:

function butnClick(e:MouseEvent):void {
     trace("button " + e.currentTarget.num + " was clicked.");
}

And now when you test the movie you will see that you can tell which button you clicked on. So if you wanted to create link outs you could do the following:

function butnClick(e:MouseEvent):void {
     if (e.currentTarget.num == 0) {
          navigateToURL(new URLRequest("yourURL.com"));
     } else if (e.currentTarget.num == 1) {
          navigateToURL(new URLRequest("yourURL2.com"));
     }
     // and so on...
}

5. Further possibilities
You can also add a dynamic text field within the button movieclip and fill it with the appropriate text – easiest using an array filled with the text and then saying butn.mytextfield.text = buttontitles[i];.
You can also use XML file in connection with this application and create the buttons and/or contents declared in the XML.

Leave a Reply

Security Code: