5. Creating Events
So far, none of your projects has been interactive. In fact, they haven’t required any user interaction at all to work. When you want to build in the ability for someone to control a project, you are building an interface for it. Interfaces are powered by events. When you need to respond to mouse clicks, keyboard presses, or anything that the user is doing, you’ll use events in ActionScript. Events are Flash’s way of letting objects know that something is happening. In this chapter, you’ll learn how events work and how to create a couple of basic event types.
Events: Explained
Events in ActionScript have two parts, just like a two-way conversation. In a conversation, there is a speaker and a listener. The speaker says something, and the listener is ready to hear what is being said.
Did you ever play the game “Simon Says”? The rules are simple. A group of children listens to the leader, who tells the group to do various things like step forward, jump, sit down, and so on. The trick is that they do these things only if the leader says, “Simon says,” before the requested action. If the children don’t hear it, they ignore the instruction and do nothing.
In ActionScript, the same relationship between the speaker and listener exists. In Flash, instead of a speaker, or leader, there is a broadcaster that sends out notifications that events, or actions, are happening. There are then listeners that listen for these notifications and then take action when they hear an event they are listening for.
Look at the relationship a bit more using the diagram in Figure 5.1.
Figure 5.1. Event Relationship
In Figure 5.1, there is an object that broadcasts a message, in this case the circle_1 instance of BlueCircle. When the user performs an interaction with a MovieClip, the circle_1 instance sends a message describing the event. In the example, the user moved their pointer over circle_1, so the instance broadcasts that the MOUSE_OVER event occurred.
Events include many different types of actions, such as hovering the pointer over an object, clicking an object, using a keyboard to interact with the project, or using a multi-touch screen.
An application has objects called listeners that keep their “ears” open for specific types of events. The listener at the top is listening specifically for the MOUSE_OVER event. When it hears this event from the broadcaster, it springs into action and executes a function called a callback function.
The second listener is looking for the MOUSE_OUT message, which the broadcaster is not sending in this example, and it ignores the MOUSE_OVER message.
To demonstrate this partnership, let’s create a simple event handler that will respond to the click of a mouse. An event handler is a function that will execute based on a specific event taking place.
Creating a Mouse Event Handler
When you create interactive applications, you want to know when the user clicks the mouse on buttons or other elements. You need to create an event handler that will monitor how the mouse interacts with these objects.
For instance, if you want a button to display a message when it is clicked, you need to tell Flash to listen for when the mouse clicks the button. Not all buttons care if they are clicked. Some might be more interested in whether the pointer is hovering over it instead of clicking it. For that reason, you need to specify exactly what you want to track for each item in your Flash project (Figure 5.2).
Only certain types of objects have events associated with them. Drawing objects and other similar elements cannot react to the mouse, so you won’t be able to track interactions with them. The most common object that supports interaction in Flash is the MovieClip object.
1. Create a new project in Flash Professional CS5.5.
2. Create a blue circle on the Stage and convert it to a MovieClip.
3. Give it an instance name of blueCircle. Now you have an object on the Stage, and since it is a MovieClip, you can monitor how the mouse interacts with it using events.
4. Create a new timeline layer for your script and name it as you wish.
5. Go into the Actions panel and make sure the blueCircle MovieClip isn’t selected. You want to add your ActionScript to the frame and not on the object itself, since that isn’t allowed in ActionScript 3.0.
6. Type the following lines in the frame:
blueCircle.addEventListener(MouseEvent.CLICK,circleClick);
function circleClick(e:MouseEvent):void
{
trace("Click!");
}
7. Run the project.
8. Click the blue circle. You’ll see the phrase “Click!” display in the Output panel.
Let’s review what exactly is going on with the first line of code that you typed:
blueCircle.addEventListener(MouseEvent.CLICK,circleClick);
You are accessing the blueCircle object and adding an event listener to the object with the addEventListener command. When you add an event listener to an object, you are telling Flash to listen for a specific event broadcasted from the object and then do something if that event is heard.
Inside the parentheses that follow the addEventListener command are two required items, separated by a comma. The first is the type of event you want to track. There are many types of events; you can even create your own! Some of the most common are mouse events, keyboard events, touch events, and timer events. Since you want to watch for a mouse event, you specify MouseEvent type.
There are several actions you can perform with a mouse: move it, hover over an object, move away from an object, click, double-click, and others. In this example, you want to track if the mouse clicks the blueCircle object. So you append a period and the phrase CLICK in all caps to MouseEvent. You just told the event listener that you want it to listen for a mouse click on the blueCircle object.
When the event listener hears a mouse click, you want it to do something. The second item in the parentheses is that something. In the code example, you are telling the Flash file to run a function with the name circleClick. You’ll notice that you don’t need a set of parentheses after the function name here. In fact, you would get an error if you included them.
If you click outside the blue circle, you’ll notice that the Output panel doesn’t say anything. That is because the mouse isn’t interacting with the MovieClip, which is what the event listener is tracking.
However, when the mouse is clicked over the blue circle, the event is broadcasted, the listener picks it up, determines if it is a click event (which it is), and tells Flash to run the code in the circleClick function. The circleClick executes the trace command, sending the phrase “Click!” to the Output panel.
Figure 5.3 illustrates the simple event you just created.
Figure 5.3. A basic CLICK event example
Take a closer look at the circleClick callback function:
function circleClick(e:MouseEvent):void
{
trace("Click!");
}
Notice that the circleClick function has a parameter called e. When an event handler accesses a function in the listener, the handler sends an event object, in this case it is a MouseEvent type of event object. The event object contains information about the event that was broadcasted that you can use in your function. In this case, you aren’t doing anything with it, but you need to include it in your function parameter definition since the broadcaster is sending it. It is a general practice to call this e, evt, or event in your function parameter declaration.
You aren’t going to work with the event object in this chapter, but later you will work more with the various properties of the object to have greater flexibility in working with events.
Adding Other Events
You can add more ActionScript to your code to track other actions, such as a mouse hover. You should also add comments to make your code easier to understand:
1. Update the code to contain the following:
// Create the event listeners
blueCircle.addEventListener(MouseEvent.CLICK,circleClick);
blueCircle.addEventListener(MouseEvent.MOUSE_OVER,circleHover);
// Create functions for specific events
function circleClick(e:MouseEvent):void
{
trace("Click!");
}
function circleHover(e:MouseEvent):void
{
trace("Hover!");
}
You have added a second event listener. This one is listening for the MOUSE_OVER event, which happens when the pointer moves over a specific object.
2. Run the project.
3. Move the pointer over the blue circle. You’ll see “Hover!” in the Output panel.
4. Click the blue circle. You’ll still see the “Click!” message (Figure 5.4).
There are several mouse actions that you can track, and you can track them in the same exact way you did with the click and hover examples. Table 5.1 lists some common mouse events you can use in your applications:
Table 5.1. Common Mouse Events
Wrapping Up
In this chapter, you learned the basics of working with events, specifically responding to mouse interactions. Events are at the core of building interactivity into your projects. When working with events, here are a set of guidelines to help you avoid errors:
• To create an event, you need to create an event listener by attaching the addEventListener statement to the object you want to listen to.
• To respond to specific events, the addEventListener needs to have two parameters: the event type you are listening to and the name of a function that will run if the listener hears the event.
• Event types have two parts: the type of event, like MouseEvent, followed by a period; and then an all-caps phrase to define the specific event, like CLICK.
• In your event listener, you are naming the callback function, not creating it, so don’t use parentheses after the callback function name.
• When you create the callback function, you need to accept a specific object called a MouseEvent object, typically called e in the function definition.