var myTextField:TextField = new TextField();
myTextField.text = "Doesn't Work";
addChild(myTextField);
myTextField.alpha = .5;

But regardless of the alpha property, the code above will be visible. The reason is that I haven’t specified a font. This means that it will be rendered by the operating system and Flash Player will have no control over it.

With this new knowledge you may figure that setting the font will solve the problem, so you write something like this:

var myTextField:TextField = new TextField();
var myTextFormat:TextFormat = new TextFormat();
myTextFormat.font = "Arial";
myTextField.text = "Still doesn't work";
myTextField.setTextFormat(myTextFormat);
addChild(myTextField);
myTextField.alpha = .5;

But it still doesn’t work. Why? Well, I really have no idea!

Luckily, I ran across a comment left on Adobe Livedocs by Haiducii7 who suggested that by changing the blendMode to something other than NORMAL, alpha will work. The code now, looks something like this:

var myTextField:TextField = new TextField();
var myTextFormat:TextFormat = new TextFormat();
myTextFormat.font = "Arial";
myTextField.blendMode = BlendMode.LAYER;
myTextField.text = "It works!";
myTextField.setTextFormat(myTextFormat);
addChild(myTextField);
myTextField.alpha = .5;

And it worked! According to Flash Help, BlendMode.LAYER “forces the creation of a transparency group for the display object.” I guess that makes sense, but there’s nothing in the documentation that outlines all of the steps needed to make this happen.

Not even Colin Moock’s Essential ActionScript 3.0, a book I’ve treasured in multiple versions, mentions the necessity of BlendMode.

Definitely a tip worth earmarking.

-rG

Let’s start by double-clicking the button in the library to bring it up in enter mode. There four sections defined, each representing a state. This could have been done in four frames but I wanted the labels to be visible. You’ll notice that my ‘button text’ layer extends across all states. This is because the button text will remain the same. If I added a keyframe in each state for the button text, I would have to redefine it every time the state changed.

I placed no ActionScript inside the movie clip button, opting instead to place all of my code in the main timeline. The only code I needed to add when placing the button on the stage was the stop(); on line 14 which places each button as ‘active’:

this[container_mc].button_mc.stop();

Active is the default state of my button. The Over section will appear when the user moves the mouse over the button. Down is for when the user has pressed the mouse button but hasn’t yet released it. Selected is show the user which option is current. Obviously, in this specific example, the value in the fullMonth_txt text field will give that information away but most of the time it won’t be so obvious.

Labeling the frames that start each state section not only makes it easy to find the object states at a glance when viewing the movie clip, but also makes it easy to see what the code is doing. Now that I have a different look for each state, I’ll code the functions for each section.

First I start by defining a variable named selectedButton. Because I don’t want the selected button to change to any other state unless another button is clicked, I need a variable to keep track of which one is selected.

var selectedButton:MovieClip;

Now the only thing I have left to do is code the buttons, which takes very little code. First, a slight modification to the onRelease definition:

this[container_mc].button_mc.onRelease = function() {
fullMonth_txt.text = this.monthName;
if(selectedButton && selectedButton != this) {
selectedButton.gotoAndStop(“active”);
};
selectedButton = this;
this.gotoAndStop(“selected”);
};

Because I start without a selected button, selectedButton starts with a value of undefined. The first thing I added to each state function then is a check to see whether it’s been defined. If so, I then need to make sure that I don’t change the state if of the currently-selected button.

So, in the case of onRelease, providing that the button the user clicks is not the currently selected button, the function will first change the state of the currently-selected button back to active (unselected), then it redefines the selectedButton variable to reflect the new selection, and finally it changes the newly selected button to the ‘selecteds frame.

If that seems pretty easy, you’ll be happy to know that the rest of the state functions are even easier because we don’t even have to worry about a variable to change or whether a button has been selected yet. We simply have to change the movie clip button’s frame to reflect the new state. Here are the rest of the functions:

this[container_mc].button_mc.onRollOver = this[container_mc].button_mc.onDragOver = function() {
if (selectedButton != this) {
this.gotoAndStop(“over”);
};
};

this[container_mc].button_mc.onRollOut = this[container_mc].button_mc.onDragOut = function() {
if (selectedButton != this) {
this.gotoAndStop(“active”);
};
};

this[container_mc].button_mc.onPress = function(){
if (selectedButton != this) {
this.gotoAndStop(“down”);
};
};

The one piece of code here that you may find mildy tricky is the dual-definitions for rollOver/dragOver and rollOut/dragOut. Basically, I’m just using ActionScript to define the same functions for multiple events. It’s the same as writing a = b = c to make a and b equal to the value of c. The only difference in the last three functions is the frame the movie clip moves to. Other than that, they’re identical.

And that’s all there is to it. You now know how to dynamically place and code multiple movie clip buttons with multiple states in only 50 lines of code.

-rG

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 

I recently found myself in a situation where I needed a way to pass certain URL variables to a SWF within a ColdFusion page. This may sound easy on the surface but the catch is that the page is dynamic. It never knows which SWF it’s going to call and each SWF can take different URL variables. I ended up with a pretty clean solution that didn’t take many lines of code. Note that I use SWFObject to place my Flash objects (and so should you) and this solution is specific to that method.

I send one URL variable called customvars that contains all of the variable names and values I want to send to the SWF. Variable names and values are separated by commas and each name/value ‘set’ is separated by a semi-colon. It ends up looking like this:

customvars=user_id,123456;eyecolor,blue;car,accord

Then, in my CF page I put the following code which converts the customvars string into a CF structure:

<cfset flashVars = structNew() />
<cfparam name=”url.customvars” default=”">
<cfif len(url.customvars)>
<cfloop list=”#url.customvars#” delimiters=”;” index=”customFlashVar”>
<cfset thisRecordName = listFirst(customFlashVar,”,”)>
<cfset thisRecordValue = listLast(customFlashVar,”,”)>
<cfset flashVars[thisRecordName] = thisRecordValue>
</cfloop>
</cfif>

Then, in my swfObject code, I loop through the structure assigning the name and variable to swfObject’s addVariables like this:

<cfloop collection=”#flashVars#” item=”key”>
fo.addVariable(“#key#”,”#attributes.parms[key]#”);
</cfloop>

Works like a charm.