The Basics of ActionScript

Using Events, Handlers and Listeners

In the previous exercise, if you carefully read the comments, you may have noticed a reference to an “onLoad handler”and ,as you proceed through the Lessons in this course, I will constantly using the terms “events” and “listeners”. These really aren’t terribly mysterious but still, it is important that you be able to distinguish between the three.

An event is something that happens when the SWF is playing. For example, being notified that a text file has finished loading or clicking a button are regarded as events Event Handlers and Listeners are the actions used to manage these events when they occur. In the previous example you used an onLoad event handler. When the text file is loaded the onLoad event is created by Flash and an embedded function was executed.

In Flash there are quite a few events associated with objects you place on the stage. When you click on something on the stage and release the mouse an onRelease event makes things happen. In Lesson 4 you will have text appear in a text field when the mouse rolls off of an object on the stage. This is an onRollOut event. In Lesson 5 you are going to have a sound load into a SWF using a loadSound event. In Lesson 7 a planetoid will move across the stage as soon as the movie starts. The planet goes in to motion due to an onEnterFrame event.

Listeners are a bit different. They are quite similar to event handlers in that they wait for an event to occur before doing something. Where listeners differ is that they are found in objects and they have to be told what event to “listen” for. One of the most common uses of listeners is when you use a User Interface Component on the stage.

Adding a listener to the Button component

Using the components in Flash allows you to build rather rich applications without having to write a large amount of ActionScript. Flash 8 Professional contains 22 User components that perform a variety of tasks ranging from holding text to acting as pop down menus. In this exercise we will add a listener to the button component that will “listen” for the component to be clicked and then open a web page.

1. Open a new Flash document and open the Components panel by selecting Window>Components.

When the panel opens you will see there are five component groupings. The Data group contains six components designed to manage communications with the server and data flow into and out of the SWF. The Media grouping contains components designed to play and control video in a SWF. Media components are used to control video and audio playback in a movie optimized for the Flash 6 or Flash 7 Player. The User Interface group in contains a number of components that are used to construct interfaces in Flash.

Many Flash developers tend to shy away from extensive use or reliance upon Flash’s ready-made Components. They claim they add “unnecessary” bulk to a SWF. They also claim they would prefer to create their own interface elements. If you are new to Flash, don’t pay much attention to these claims. If you add a TextArea component to the Stage your SWF will grow by about 40 K. Add a TextInput component and you add 25 K. On the surface a compelling argument can be made that a 65K increase is unwarranted. However, if you put both components in a movie, the increase is only 42 K . This 30% reduction is due to Flash’s ability to reuse classes and symbols.

2. Open the User Interface group and drag a copy of the Button component to the stage.

When the button is placed on the stage you are going to need to do a couple of things: Shrink the stage and give the button an instance name.

Obviously having a stage that is 500 x 400 containing a single object that is 100 x 22 is a waste of space. Click once on the stage and select Modify>Document to open the Document Properties dialog box. Click the Contents radio button in the Match area and click OK. The stage will shrink to a more reasonable size.

You don’t have to use the menu to access the Document Properties dialog box. Click the Size button on the Property inspector and the Document Properties dialog box will open.

3. Select the button on the stage and, in the Property inspector, give it the instance name of cptMyButton.

Instance names are assigned through the Property inspector. To assign one select the object on the stage and click the properties tab of the Property inspector. In the upper left corner of the Property inspector you will see an icon of the selection and a text input box. Click once in the text input box and type the name.

4. With the button selected click on the Parameters tab of the Property inspector.

Parameters are the arguments-or options- associated with objects on the stage such as a component. The parameter we are going to change is the name of the button. It doesn’t tell the user what the button does. The parameters you see when the Parameters tab is clicked are:

• Icon: You would enter the name of a movie clip or graphic that would be placed in the button instance.

• Label: This is the text that will appear in the button.

• labelPlacement: This is the alignment for the text in the button. The locations are found in the pop down menu that appears when you click this area in the Property inspector.

• Selected: If your button is set to toggle, this parameter forces the button into the selected, or On, state.

• Toggle: When set True, you button will finction as a toggle that turns things on and off on the stage.

Select the word “button” in the label area of the Parameters and enter the word, “Macromedia”. When you press Return/Enter the text in the button will change.

5. Add a new layer named Actions.

To add a new layer, click the Insert Layer icon- it looks like a turned up page, on the timeline. When the new layer appears, double click the layer name to select it and enter the word Actions.
It is a common practice, and one we use throughout this book, to have a layer devoted to ActionScript.

6. Click the first frame in the Actions layer and open the Actions panel.

The steps to creating a listener are not convoluted. You first create the object for the listener. Next you tell the object what to do when the event occurs. Finally, you tell ActionScript which object is the one creating the event.

7. Click once in the Actions panel and enter:

var listenerObject:Object = new Object();

This creates the object. Now you have to create a small function that tells the object what to do when the event is detected. Press the Return/Enter key to go to the next line and enter:

listenerObject.click = function(){

getURL("http://www.tomontheweb.ca");

}

This small function essentially says when a “click” event from the listenerObject is detected go to a web page using the getURL() event.

Now all you have to do is to associate the listenerObject that is going to open a web page with the button on the stage. This is done through the addEventListener() method. This method requires two parameters. They are the event to listen for and the ListenerObject that will “hear” the event and go to a web page or perform some other task.

Press the Return/Enter key and add the following line of code.

cptMyButton.addEventListener("click",listenerObject);

Click the syntax button and, if there are no code errors, close the Actions panel.

You may notice that the event being listened for is “click”. To see all of the events associated with a component, open the Components book and select your component from the list. Open the Events book and all of the events associated with the component will be listed.

8. Save the movie to your exercise folder and test it.

When you click the button, the web page you entered will open in a browser. Go ahead, try it out: