1.8 Mouse Events

This exercise aims to introduce mouse interactivity in Flash. We will create 2 graphical object, and by clicking in one, the other will disappear. To create interactivity, however, we need first to discuss how Flash deals with events in AS3.

1. First then, some thoughts on events and interactivity in Flash. In AS3, creating event listeners, and associating them with objects, became the privileged form of dealing with interactivity (besides other uses, as we will see).

When you create an event listeners, you specify what kind of event Flash should “listen” or wait for, and what function will be executed when it occurs. An event listener should also be associated with an object – different objects will be suitable for different events.

2. Let’s create our exercise, starting with drawing 2 objects on the stage.

The first object, a yellow 100×100 pixels square, will be passive, so a shape object will suffice as its container:

var mySquare:Shape = new Shape();
stage.addChild(mySquare);
mySquare.x=400;
mySquare.y=100;
mySquare.graphics.beginFill(0xFFDD33);
mySquare.graphics.drawRect(0,0,100,100);

The second object will be our red circular “button”, and will be interactive, so we can use for example the Sprite class to contain it:

var myCircle:Sprite = new Sprite();
stage.addChild(myCircle);
myCircle.x=200;
myCircle.y=100;
myCircle.graphics.beginFill(0xFF0000);
myCircle.graphics.drawCircle(0,0,50);

We haven’t used the drawCircle class before, but it’s quite simple. It accepts 3 parameters: x, y and radius (in this case, 50 pixels).

3. In order for the circle to behave more like a button, showing the hand cursor on rollover, let’s use the buttonMode property and add the following line:

myCircle.buttonMode = true;

4. Now let’s create the listener which will check if the user has clicked on the circle, and associate it with the circle by using the method addEventListener. For that association, we need an event called CLICK, which belongs to the class MouseEvent. We will associate the event with a function we will call “hideSquare”, which we will create next.

myCircle.addEventListener(MouseEvent.CLICK, hideSquare);

Basically this means: when a user clicks on myCircle, run function hideSquare.

5. Let’s define the function hideSquare. The function is a void function – it will not return any value. Inside, we must define a parameter, connecting it to the listener – the MouseEvent. This is a very useful feature – if more than one event listener triggers this function, it allows us to trace back which was the object that triggered the event. It is not the case with this example, where only one listener triggers the function.

We want that the square disappears when a user clicks on the circle. For that purpose, we will use the property visible, which accepts boolean values.

function hideSquare(myEvent:MouseEvent):void{
mySquare.visible = false;
}

Please note that, instead of “myEvent”, I could have written any other name for the event.

6. Some additional notes: MouseEvent contains many other useful types of mouse interaction that we can use, such as DOUBLE_CLICK, ROLL_OVER, ROLL_OUT, MOUSE_UP, MOUSE_DOWN

7. Here is the complete code:

var mySquare:Shape = new Shape();
stage.addChild(mySquare);
mySquare.x=400;
mySquare.y=100;
mySquare.graphics.beginFill(0xFFDD33);
mySquare.graphics.drawRect(0,0,100,100);

var myCircle:Sprite = new Sprite();
stage.addChild(myCircle);
myCircle.x=200;
myCircle.y=100;
myCircle.graphics.beginFill(0xFF0000);
myCircle.graphics.drawCircle(0,0,50);
myCircle.buttonMode = true;

myCircle.addEventListener(MouseEvent.CLICK, hideSquare);
function hideSquare(myEvent:MouseEvent):void{
mySquare.visible = false;
}

The end result looks like this (red circle is interactive in the .swf):

Download files: ex6-mouse_event.zip

Advertisements

About Nuno Correia

audiovisuals+interaction
This entry was posted in 1. User Interface Design and tagged . Bookmark the permalink.

2 Responses to 1.8 Mouse Events

  1. Pingback: Teaching Designing Interaction with Electronics course | nuno correia .com

  2. Pingback: Flash and ActionScript | Software Studies for Media Designers

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s