ActionScript and Mouse Events pt. 1

For my final flash project, a big part of the action will be directed by mouse clicks. The user will click to have something happen, or will hover over the object for some effect.

We looked in class at how to animate a button using the “up/over/down/hit” functions, which correspond to:    “normal/hover/click/visited”, respectively. ActionScript can do the same sort of thing for each object! This is going to be one of the biggest tools I know I’ll use in my flash project.

To start, pull up a flash project with an object on the stage. I am using a really basic hand-drawn set of objects on mine.

Second, you need to create an “actions” layer. It doesn’t matter what you call it; the important thing is that you have it on a separate layer. I learned the hard way that having actions and actual elements like symbols on the same layer can mess with your Script.

Once I’ve added an action layer, this is what my timeline looks like:

You also need to make sure your graphics are converted to symbols, and registered as movie clips. After that, you can give it an instance name. The instance name is important because it is how flash is going to find the object you’re scripting to. Take a look at mine:

It’s time to start coding!

Now, what we need to get our Flash looking for a mouse click is an EVENT. These, as far as my beginner brain can tell, are pretty important when it comes to coordinating different things like the mouse, outside of the Flash interface. It’ll be a big part of any interactivity.

When you add an event to an object, you think in terms of the object itself. Meaning that first you must write code that says for that object to pay attention for a mouse click. So go ahead and open up your Actions window.

First, you must specify the object. In this case, I want my bowl of oatmeal to look for a mouse click. I already created an instance name for the oatmeal, called “oatmeal”. (Just to make things simple.) So first I write that. The next step is adding a piece of code to listen for a specific event. This is the “addEventListener.”

Next, we need to write some code that says WHAT event is taking place. In this case, it is a mouse click. This is called “MOUSE_DOWN.”

Ah ha! I added the “onClick” at the end because we will need to tell it what to do now. onClick is sort of like a class or ID in CSS. The computer knows when it sees something with this label, to make it look a certain way. Same thing with flash. When these conditions are just right (when we have “oatmeal” clicked and flash realizes it), it goes to the section of code that says exactly what is supposed to happen when something is clicked.

This command to actually DO something is a function. Time to make one of our own….

Since I am not good with advanced functions yet, there is a simple one that lets us test what we have working in Flash so far. Using the output panel, we can trace what code is properly read by Flash. This is the trace function. This simply gives us an output in the Output panel (just some text) that can help us determine if the code is right.

This Trace function is useful to make sure everything is coded correctly. Here is what it looks like:

Go ahead and test your movie when this is done. You should be able to click on the Oatmeal (or whatever you used) and have text output to the Output panel!

Round two on DIY: learning to have a pop-up appear on click! More to come…


~ by avanim on April 7, 2010.

%d bloggers like this: