Macromedia Flash MX 2004 ActionScript Programming Tutorial

Using Components

To create our feedback form, we’re going to use Flash’s built-in components. Components are essentially compiled movie clips that perform specialized tasks. Flash MX ships with several user interface components, and Flash MX 2004 ships with around 20 version 2 components—components that use the broadcaster/listener event model. Flash MX 2004 Professional includes additional media- and data-related components. All these components can all be controlled by ActionScript just as you’d control a movie clip.

To get started, add a new “send feedback” button symbol to the second frame of the Asteroids game, beneath the “Game Over!” text. Add an event handler to it to send the movie to Frame 3, where we’ll create our form:

Add a keyframe to Frame 3 with a stop action. Then create a new “Form” layer. This will help you keep your component instances separate in the timeline. If you like, add some static text at the top of the stage, such as “Send us feedback!”

Now we’ll add some components:

1. Open the Components panel and drag two TextInput components and a TextArea component onto the stage. Then drag three label components onto the stage. If your stage is black, like ours is, you won’t be able to see the labels:

Don’t worry about that just yet; we’ll show you how to fix it.

1. Give each component instance a name in the Property Inspector. We’re using name_txt, email_txt, and comments_txt for the input components and name_lbl, email_lbl, and comments_lbl for the labels.
2. Align and resize the components as necessary to fit a name and e-mail address in each of the TextInput components and comments in the TextArea component.

The parameters for the component are displayed in the Property Inspector:

They’re also displayed in the Component Inspector (which you can open by selecting Component Inspector from the Development Panels submenu in the Window menu).

You can use either of these to set the parameters for the component, including the component’s label (the text that’s displayed to the user). For example, above, the Component Inspector is displaying the parameters of the selected Label component instance on the stage. To change the text of the label, you can type a new label into the text field:

However, we’re going to use ActionScript to define the properties of our components.

1. Select Frame 3 of the Actions layer and add the following code:

name_lbl.text = “Name:”;

email_lbl.text = “E-mail:”;

comments_lbl.text = “Comments:”;

name_lbl.setStyle(“color”, 0xFFFFFF);

name_lbl.setStyle(“fontWeight”,”bold”);

email_lbl.setStyle(“color”, 0xFFFFFF);

email_lbl.setStyle(“fontWeight”,”bold”);

comments_lbl.setStyle(“color”, 0xFFFFFF);

comments_lbl.setStyle(“fontWeight”,”bold”);

You’ll recognize the text property in the first 3 lines—the same property you see in the Parameters tab of the Property Inspector. The text property assigns the text that the component should display. This is just like using the text property of a dynamic or input text field to assign text.

The remainder of the lines uses the setStyle method to change the color and font weight of each of the component instances.

Save and test the movie to make sure the labels are formatted the way you want:

1. Next, we need to add a submit button to our form. From the Components panel, drag a Button component onto the stage. Name the instance “Submit_btn” and change the label to “Submit”. You can quickly do this in the Property Inspector.

In the last section, you learned about using listeners to “listen” for events broadcast by some of Flash’s built-in objects and to execute actions as a result. Flash’s version 2 components use the broadcaster/listener event model, and they all have unique events associated with them. The Button component has a click event, which you saw briefly at the beginning of the tutorial. When the user clicks a button component, the click event is broadcast. However, without a listener, there is nothing to “hear” the broadcasted event (the click), so nothing happens. In order for the click event to actually perform an action, a listener has to be available to “hear” the event and execute the action.

As we mentioned earlier, any object can be a listener, and it can be registered with any other object broadcasting events. For example, you could create a listener to execute an action (such as a “go to” action) when a user selects an item in a combo box. Or, you could create a listener to listen for changes in a text field and execute an action as a result. When you register a listener with a component, you can have it either execute a method you define when you create the listener object (as we did earlier), or you can have it execute any custom function you write.

In the first case, you go about creating the listener the same way you learned earlier. You create a new object to act as a listener for a specific event and execute a resulting action, which is specified in a function:

var myListener = new Object();

(Or, var myListener:Object = new Object();)

myListener.click = function() {

getURL(“http://www.macromedia.com”);

};

The only difference is that instead of using the addListener method to register the listener with the object, you use the addEventListener method:

myButton.addEventListener(“click”, myListener);

The addEventListener method has two arguments: the first is the event being broadcast by the object, and the second can be either the listener object or a function. For example, you could use:

myButton.addEventListener(“click”, myListener.click);

Or you could use:

myButton.addEventListener(“click”, myFunction);

The first example uses the function defined for a listener object. The second example uses a standalone function that can be reused elsewhere. Really, the two are the same in principle; you’re adding a listener to the button. In the first case, the listener is an object and method you defined. In the second case, the listener is a function. We’re going to use the second method to complete our form.

Tip:

Some components broadcast other information, as well, which you can include as a parameter in the listener’s method. Just include the parameter in the parentheses after function when you create the listener. This way, the listener has access to that information.