sign up!

Are you interested in learning, then sign up to be notified about new tutorials.

Email:


helpfull links


website solutions

Do you need a website?
We can have you online in 24 hrs for less then $100


master flash

Are you looking to learn flash? If so you need to check out Flash, the Information you need. You will find all of these tutorials, source files and more...

Get your copy today!

Flash, This Information you need

a few friends


follow Us On

FrenchSquared on Linked in

FrenchSquared on Twitter

Frenchsquared on Facebook



Flash Tutorial, Event Listeners

In Flash an event is something that happens, such as a mouse click that Flash can respond to. Events are often things a user does, such as pressing a key or moving the mouse, but events do not have to be user initiated. A function ending or a sound playing can also trigger a response from Flash. Flash and ActionScript needs a way to detect and respond to these events. An event listener or event handler is created to give your object the ability to hear. In basic terms an event lister is something that tells Flash to do this when that happens. Sounds similar to a function, but this event can be user initiated.

Building event listeners

Click on the first key frame on the time line layer called actions and press F9 to open the actions panel.

ActionScript

Copy and past the example code onto the empty key frame on the actions layer. Remember that objects need to be named. In this tutorial we have already named the circle yourObject_mc.

function onClick (yourObject_mc:MouseEvent):void {

trace("yourObject has been clicked")

};
yourObject_mc.addEventListener (MouseEvent.CLICK, onClick);

Press Control-Enter and Test your Movie.

So first you created a function called onClick you then told Flash that onClick would used with yourObject_mc and a MouseEvent, :Void is the data type tag. You currently set it to Void. Everything inside the {} is the actually action you want to happen, in this case trace “your object has been clicked“. The last part is when you actually gave the MovieClip yourObject_mc the ability to hear. You added an event listener to yourObject_mc by first defining the name of the object you want the event listener applied to. (yourObject_mc). Next, addEventListner was applied to the named object. Finally, you defined the event listener by filling in the parameters (MouseEvent.Click, onClick).

Making a custom mouse cursor

Lets make a custom arrow that will replace the mouse cursor. Click on the first key frame in the Action Layer and add the following code.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

function onMove (motion:MouseEvent):void {

trace("mouse is moving")

};
stage.addEventListener (MouseEvent.MOUSE_MOVE, onMove);

Im not going to go into detail because this is the same thing you did above. The only difference is this function is based off the MOUSE_MOVE instead of the CLICK listener. The stage. name was used because we want the stage to listen for the action not the arrow. If you press Control-Enter you should see that your output panel displays mouse is moving. That means Flash is listening and knows when the mouse is moved. So, now we need to make the arrow do something. We need to set the arrows location to be the same as the mouses.

Replace the line trace(“mouse is moving“) with arrow_mc.x = mouseX; We are taking arrow_mc’s .x coordinate and setting it equal to the x coordinate of the mouse (mouseX).

function onMove (motion:MouseEvent):void {

arrow_mc.x = mouseX;

};
stage.addEventListener (MouseEvent.MOUSE_MOVE, onMove);

Press Control-Enter and test you movie.

The Arrow should follow the mouse along the x axis. Now you need to do the same thing for the y axis. Add the line arrow_mc.y = mouseY; under the arrow_mx.x + mouseX;

function onMove (motion:MouseEvent):void {

arrow_mc.x = mouseX;
arrow_mc.y = mouseY;

};
stage.addEventListener (MouseEvent.MOUSE_MOVE, onMove);

Press Control-Enter and test you movie.

If you entered the code correctly the arrow should now follow the mouse.
Something still doesn’t seem quit correct. I said lets make a custom mouse cursor. That implies that it replaces the mouse. So we need to hide the mouse, add the code Mouse.hide(); to the 1st line in the actions panel.

Mouse.hide();

Press Control_Enter and see your curser.

Download Tutorials