Today I’m going to show you how to create movie clips that behave like buttons. Unlike buttons, movie clips allow me to dynamically control the button text and reuse the same buttons as many times as I need to. Plus, a button only has three states: up, over and down. I like mine to have active and disabled states as well. By using a movie clip I can define as many states as I need.

Start off by opening my sample. Open the library (CTRL-L) and double-click button_mc. There are two layers in the clip: one for button text, and one for the button itself. The button text should span all frames cleanly without a keyframe. The text field must be dynamic and must be named. In this example I named mine month_txt. The layer containing the button graphic has a keyframe in each of the four frames to reflect its current state. The text is placed on a seperate layer so that I don’t have to continually re-assign the button name in each state.

Navigate back to the main timeline where you’ll see two layers. Layer 1 contains my AS. Layer 2 contains twelve instances of button_mc (in the next post I’ll show you how to place them dynamically.) If you click on the first few buttons one at a time you’ll notice that I’ve given them all the same name with an incrementing number at the end (btn0, btn1, btn2, etc.). This is going to allow me to dynamically assign functions to each while performing a simple loop.

In this example, I programmatically assign month abbreviations to each button and code them to populate the button text with the full month name. Make sure you have your Actionscript panel open (F9) and click on the frame in layer one with the small a in it. You’ll notice that the first thing I do is define an array of values that I want to assign to the buttons:

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”});

Next I loop through each button and assign them unique values based on the array:

for (var a=0;a < month_array.length;a++) {
this["btn"+a].monthName = a;

The next line is a little bit tricky. Because I can’t use my looping variable in my function I’m going to assign a
property to the button and give it the value of the looping variable at the time of the loop. This property will define which
record in my array is assigned to the current button:

this["btn"+a].monthName = month_array[a].fullNm;

Now I can proceed to define the current button’s functionality:

this["btn"+a].onRelease = function() {
fullMonth_txt.text = this.monthName;
};

And that’s it for the basics! Execute your SWF and watch the button names dynamically populate. Click a button and you’ll see the full name of the month appear in the dynamic text field. With less than ten lines of code and one movie clip I created a set of twelve buttons, each with its own function.

In Part 2 I’ll show you how to use Actionscript to change button states.
-rG

Also available: Part 2, Part 3