Easy Movie Clip Buttons Part 2 of 3: Dynamic Button Placement
Start by downloading and opening the sample file. The first difference you’ll notice from Part 1 is that there are no longer buttons on the stage. Part 1 demonstrated how to dynamically populate existing movie clip buttons. In this part, we’ll take it a step further by dynamically placing the buttons. Here’s our finished product:
As in part 1, I start off by defining my array:var month_array:Array = new Array ({month:”JAN”,fullNm:”January”},
{month:”FEB”,fullNm:”February”},{month:”MAR”,fullNm:”March”},
{month:”APR”,fullNm:”April”},{month:”MAY”,fullNm:”May”},
{month:”JUN”,fullNm:”June”},{month:”JUL”,fullNm:”July”},
{month:”AUG”,fullNm:”August”},{month:”SEP”,fullNm:”September”},
{month:”OCT”,fullNm:”October”},{month:”NOV”,fullNm:”November”},
{month:”DEC”,fullNm:”December”});
As you can see, I like defining my ActionScript arrays as arrays of objects. This allows me to treat the array as a recordset with named columns. I find it much easier to refer to a value by name rather than its index value.
The next four lines define new variables that will be used to position the buttons on the screen:
var initX:Number=5;
var nextX:Number = initX;
var nextY:Number = 5;
var wrapY:Number = 6;
initX defines the starting X coordinate of each row. nextX and nextY define the x/y coordinates of the first button. nextX will change with each loop to define the x coordinate of the subsequent button. wrapY defines the number of buttons that will be placed across before wrapping to a new line.
Next, I start looping through my array by creating an empty movie clip that will be used to hold my movie clip button. Each container is named dynamically using the container_mc variable. I chose to name the containers by concatenating ‘cont’ with my loop variable so I end up with 12 containers named cont1-cont12.
var container_mc:String = “”;
for (var a:Number = 0; a < month_array.length; a++) {
container_mc = "cont" + a;
this.createEmptyMovieClip(container_mc,this.getNextHighestDepth());
Before I can proceed to populate the container with the button mc, I need a way to reference it in the library. The object name is not used for this purpose. Instead, we have to define a linkage identifier. If you haven't done this before it may sound complicated but it's simply giving the clip a label we can refer to it by from our ActionScript.
To provide your button movie clip with an identifier, right-click the button_mc object in the library and click Properties. If the advanced properties are not yet open, click the Advanced button. In the Identifier field, type button_mc. I chose to make the identifier the same as the object name but that's not a necessity. I could have made the identifier 'mcButton' or 'buttonClip' or 'bushIsAhabAndIraqHisWhiteWhale' or any other ActionScript-legal name.
Your Symbol Properties popup should now look like this:
button_mc advanced object properties
Now I can use attachMovie to load button_mc dynamically from my library into its container. You'll notice that I also name the instance button_mc. It won't be a problem naming all 12 buttons the same thing because they are each contained in their own uniquely-named container:
this[container_mc].attachMovie("button_mc","button_mc",this.getNextHighestDepth, {_x:nextX,_y:nextY});
I then populate the the dynamic text field inside my button clip (month_txt) with the month abbreviation ('month' in my array) and assign the full month name as a button property named monthName:
this[container_mc].button_mc.month_txt.text = month_array[a].month;
this[container_mc].button_mc.monthName = month_array[a].fullNm;
The monthName property is utilized in the onRelease function that is assigned to each button. When the mouse button is released, the dynamic text field named fullMonth_txt will be populated with the value of monthName:
this[container_mc].button_mc.onRelease = function() {
fullMonth_txt.text = this.monthName;
};
I finish up by using my four positioning variables to either define the next button placement position as 57 pixels to the right of the leftmost position of the current button, or to wrap to the next line if I've already placed the number of buttons specified in the wrapY variable.
if (a == (wrapY-1)) {
wrapY += 6;
nextX = initX;
nextY += 28;
} else {
nextX += 57;
};
};
That's it! Using 25 lines of code and 1 library object I created and coded functionality into 12 labeled buttons. Basic stuff? Sure! But this is the basis of creating your own dynamically populated applications using a data source. In this example, I used an array for ease of demonstration but it could have just as easily been a recordset returned by a remoting call, or an XML data source.
In the third and last part of this tutorial I will be demonstrating how to add button states to your movie clip. I hope to have that posted by next week.
-rG
Also available: Part 1, Part 3Â
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
This is just about exactly what I am trying to accomplish, but my images are loaded thru xml…
This does not work:
dynamicClip = "btn_thumb_section1_"+a;
_root.createEmptyMovieClip(dynamicClip, getNextHighestDepth);
_root.dynamicClip.attachMovie("empty_mc", getNextHighestDepth);
_root.dynamicClip.empty.loadMovie(thumb_folder+section_1_thumbs);
_root.dynamicClip.onRelease = function(){
trace("clicked");
};
but this does:
dynamicClip = "btn_thumb_section1_"+a;
_root.createEmptyMovieClip(dynamicClip, getNextHighestDepth());
loadMovie(thumb_folder+section_1_thumbs, dynamicClip);
_root.dynamicClip.onRelease = function(){
trace("clicked");
};
except that the onrelease doesn’t do anything.
Any ideas?
Hi Derek,
You have a few problems in that first example. The first is that you aren’t putting the parens after getNextHighestDepth. You’re also attaching a movie clip named “empty_mc” but you aren’t giving it a name. attachMovie takes 3 parameters, linkage id, instance name, and depth.
Also make sure that “empty_mc” has a linkage identifier in your library (Right-click the mc, click linkage, then click export for actionscript).
Another problem is that you’re referring to a movie clip named “empty” when you load the thumb but that doesn’t exist.
One other issue that I’m surprised you aren’t running into in the second example is that you’re using a String variable to refer to a movie clip. To do this you should enclose the variable in brackets.
In the end your code should end up looking something like this:
dynamicClip = "btn_thumb_section1_"+a;
_root.createEmptyMovieClip(dynamicClip, _root.getNextHighestDepth());
_root[dynamicClip].attachMovie("empty_mc", "empty", _root.getNextHighestDepth());
_root[dynamicClip].empty.loadMovie(thumb_folder+section_1_thumbs);
_root[dynamicClip].onRelease = function(){
trace("clicked");
};
Hope that helps.
-rG
Hi;
I’m in desperate need of your 3. example for my schoolwork .Please send it here one more ,because it’s deleted.Thanks in advance