Intro to Using v2 Components in Flash

Using Built-In Components

The sample above uses v2 components (the ones that come built-in with Flash MX 2004 and are part of a framework that includes focus management, pop-up window management and other things necessary to build an application). The small subset above are all part of the UI Components, which can be seen in, and accessed from, the Components panel (Window, Development panels, Components). UI Components are movieclips associated with a particular class that provide a specialized functionality, like choosing one of multiple options (radio buttons), choosing from a dropdown menu of choices (combobox), or selecting various options (checkbox). They can be used to provide html-like forms in a Flash movie, or, as above, to control other aspects of the movie.

The movie above contains a movieclip with instancename man_mc, with 4 sequences in it: an initial frame, a jump sequence, a run sequence, and a backflip sequence. As can be seen in the screenshot below, the last frame of each motion sequence contains code to send the playhead back to the start of the sequence:

Three types of components are used to control the behavior of man_mc: radio buttons set up in a radio button group with a pushbutton determine which sequence to play, several checkboxes allow one or more simultaneous properties of the movieclip to be set, and a combobox (dropdown menu) allows the contents of a textarea component to be changed. Starting with v2component_intro_start.fla (available via link under Files at right), here are the steps to create the sample above:

Setting up the radio buttons and radio button group

Radio buttons can be used whenever a unique choice is required out of several possible choices. To set up the radio buttons in this sample, we dragged a radio button component out of the Component window onto the stage, opened the Properties panel, and entered the information shown below (instance name=rbJump, data=jump, groupName=sequenceGroup, label=jump). Data refers to whatever information you want to have access to when this radio button is selected -- in this case, it will be the name of the framelabel we want to jump to.

Looking in the library, we can see a copy of the radio button component there. We could drag another copy out to set up the next button, but instead we'll just copy and paste the one we already have, keeping the same groupName and renaming the other options to instance name=rbRun, data=run, and label=run.

Instead of having the sequence change as soon as a radio button option is selected, we'll set up the movie to wait until the push button component is clicked to change the sequence. Drag a pushbutton component onto the stage, call it btnDoSequence, set its width to 50 and its label to "Do It" (without qutoes).

Setting up the checkbox components

Drag a checkbox out of the Compoent panel onto the stage, call it chkSmaller, and set its label to "make smaller" (w/o quotes). Copy and paste this, call the new checkbox chkGreen and set its label to "make green". Same for 3rd checkbox: chkUpsidedown, label = turn upside down. Since any or all of the checkboxes can be set independently of what the others are doing, there is no group name to be set.

Setting up the combobox component and speech bubble

Drag a copy of the combobox component onto the stage, call it chooseName, make it 200 pixels wide, click the little magnifying glass next to the labels row in the Properties panel, and use the + button to enter these rows:

Whatever name is selected will show up in a speech bubble above man_mc, so create a layer below him, draw a speech bubble in it above the man and drag a TextArea component to the middle of it. Set it 80 pixels wide and name it taSpeech. There is no way to hide the border in the Properties panel, so we'll use code to do that.

The code

Before we put in the component code, we need to set up some initial conditions in the movie. Add an actions layer and put this code in it:

// create a color object to control the man's color
var mancolor:Color = new Color(man_mc);

// make the textarea border invisible
taSpeech.setStyle("borderStyle", "none");

How to write code for components

All the v2 components are set up to broadcast messages to Flash when certain events occur (a button click, a new selection in a combobox, eg). Those events are dealt with by assigning a listener to the component to handle each event you want to respond to. This is the framework for dealing to do that (where everything in bold should be replaced with an appropriate string:

function handlerFunction(evt:Object) {
   // use evt.target to access the component
}

componentName.addEventListener("someevent", handlerFunction);

With the above code in place, handlerFunction is called whenever someevent occurs for componentName. To find the event name (the thing called "someevent" above) for a particular component, look in the Flash help under Using Components, Components Dictionary. There are entries which list the properties (include event names) and methods for each component.

Combobox

For example, let's look at the combobox. Its name is chooseName, and the event we want to respond to is "change". When a change event occurs (meaning a new selection was made from the combobox), we want to change the content of taSpeech accordingly. So here is the framework above modified for the combobox:

// set up handler for combobox
function setSpeech(evt:Object) {
   if (evt.target.selectedIndex > 0) {
      taSpeech.text = "My name is " + evt.target.selectedItem.label;
   }
}
chooseName.addEventListener("change", setSpeech);

In the code above, evt.target gives us a link back to the calling combobox. We could have just used the combobox's name instead, but if there are multiple comboboxes using the same handler function, evt.target provides the name of the one that caused the handler to be called (like "this" in movieclip event handlers). The combobox's selectedIndex property provides a numeric pointer to the item selected (0=first item in dropdown, 1=second, etc). The selectedItem property provides access to the data associated with the selected item in the combobox. selectedItem.label refers to the content we put into the combobox's label row when we set it up.

Checkbox

The checkboxes act independently of each other, so each will have its own listener and event handler. Here is the code for the "make smaller" checkbox:

function changeSize(evt:Object) {
   if (evt.target.selected) {
      man_mc._xscale = 60;
      man_mc._yscale = 60;
   } else {
      man_mc._xscale = 100;
      man_mc._yscale = 100;
   }
}
chkSmaller.addEventListener("click", makeBig);

A side note about the registration point

if you're following along with the example fla (v2component_intro_start.fla), you'll notice after adding this code that the man movieclip's scale changes relative to its upper left corner (its registration point) instead of from the center. If you want it to change from the center instead, you'll need to change the content of the movieclip so that it has a center registration point. Here's a review of how to change the content of several keyframes at once.

Changing content of multiple keyframes at once

click the little button at the bottom of the timeline with 2 overlapping blue boxes (that says Edit Multiple Frames when you mouse over it)
stretch the handles that appear at the top of the timeline out to cover all the frames that have content in them that you want to move, resize, rotate, etc
lock all the layers that you don't want to be affected, if any
choose Edit, Select All from the top menu, or cmd-A (PC: ctrl-A) (may have to do multiple times, sometimes it doesn't work right on first click) --you'll see all frames that will be affected highlighted
make the changes (eg, use the transform tool to resize/rotate, or select tool to drag to new place, or align panel to realign)
when changes look right, click that little edit multiple frames button again to unselect it

So we'll click the man movieclip twice to edit it and then follow the steps above, dragging the man so that the middle of him is over the registration point (the + in the picture above), or use the align panel to place the registration point at the exact center of the movieclip (as described in the middle of this page). Test the movie again to see the difference.

Repeat the code above for the chkGreen and chkUpsidedown checkboxes, using the mancolor variable we created at the start of the movie to set the man's color, and setting _yscale = -_yscale to turn him upside down.

Note that if you make the above change to yscale and want to keep the 'make smaller' checkbox working correctly, you'll need to modify the handler for that to check and see if the man is upside down or not. This code will do that:

// set up handler for make smaller checkbox
function changeSize(evt:Object) {
   // check to see if the man is currently right side up or upside down
   var upsidedown:Boolean = man_mc._yscale < 0;
	
   if (evt.target.selected) {
      man_mc._xscale = 60;
      man_mc._yscale = (upsidedown ? -60 : 60);
   } else {
      man_mc._xscale = 100;
      man_mc._yscale = (upsidedown ? -100 : 100);
   }
}
chkSmaller.addEventListener("click", changeSize);

That code uses the ternary operator (the thing with ? and : in it) to check an expression and assign one of two values based on the result. In English it says "If upsidedown is true, then assign -60 to man_mc._yscale, otherwise assign 60 to it." The ternary operator is described with other operators on the operators page.

Radio buttons plus pushbutton

Radio buttons are usually added to an application as part of a group, so that when one radio button in the group is selected, the others are automatically unselected. You can either respond to the user selecting a particular radio button by assigning an event handler to that radio button's click event, or by assigning an event handler to a button and then using the selection property of the radio button group to find out which radio button was selected. To do the latter, add this code to the main timeline:

function doSequence() {
   // jump to frame specified by selected item in radio button group
   man_mc.gotoAndPlay(sequenceGroup.selection.data);
}
btnDoSequence.addEventListener("click", doSequence);

If you trace sequenceGroup.selection in the above, you'll see that it returns the name of the selected radio button (rbJump, rbBackflip, etc) and sequenceGroup.selection.data returns the data associated with that radio button ("jump", "backflip", etc), which is the label of the frame to jump to.

Radio button immediate selection

To make the movie respond to radio button clicks instead of having to wait for the button to be pressed, assign listeners to the radio buttons instead of to the button:

rbJump.addEventListener("click", doSequence);
rbRun.addEventListener("click", doSequence);
rbBackflip.addEventListener("click", doSequence);