Flash Video Tutorial #2: Dynamic MovieClips from Christian Kragh on Vimeo.

Part 1:

Part 2:

Currently, there are 3 games online:
> Cotton Clouds
> Ultimate Pong
> Collect The Falling Apples

And in early November there will be a new addition, Archer, as well as many more to come!

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.

I’m happy to announce that my blog is now equipped with a good spam blocker so I’ll be accepting comments again and plan to post regularly again. Thanks for your patience and support.

Also, I’ve been selling stock Flash files on FlashDen (now ActiveDen) and now I’m starting to sell audio files, specifically music loops for websites, presentations, intros, etc on AudioJungle. The Envato marketplaces are growing fast and I’m excited to see what comes next!

Thanks,
CK