CDMM1303 Graphics Design Solutions

~Chapter 3: Event Handler and Listener

Laili Hayati Anuar
Faculty of Creative Media and Innovative Technology
IUKL
Content

• Creating objects
• Event Handling
• Creating Event Listener
• Mouse Events
• Keyboards Events
Creating Objects

• Most of the built-in data types, as well as data types defined by

programmers, are complex data types. Some of the complex data
types you probably recognize are:
•MovieClip: a movie clip symbol
•TextField: a dynamic or input text field
•SimpleButton: a button symbol
•Date: information about a single moment in time (a date and time)
Creating Objects

• ActionScript is what’s known as an object-oriented programming

language. Object-oriented programming is simply an approach to
programming.
• It’s really nothing more than a way to organize the code in a
program, using objects.
• There are various characteristics of the movie clip that you can
modify. When it’s selected you can change values in the Property
inspector like its x coordinate or its width.
Creating Objects

• In ActionScript object-oriented programming, there are three

types of characteristics that any class can include:
•Properties
•Methods
•Events
• These elements are used to manage the pieces of data used by the
program and to decide what actions are carried out and in what
order.
Creating Objects

• Properties
• A property represents one of the pieces of data that are bundled together in
an object.
• An example song object can have properties named artist and title; the
MovieClip class has properties like rotation, x, width, and alpha. You work
with properties like individual variables. In fact, you can think of properties
as simply the “child” variables contained in an object.
• Here are some examples of ActionScript code that uses properties. This line
of code moves the MovieClip named square to the x coordinate 100 pixels:
square.x = 100;
Creating Objects

• Notice the common structure: you use a variable (square, triangle)

as the name of the object, followed by a period (.) and then the
name of the property (x, rotation, scaleX).
• The period, known as the dot operator, is used to indicate that
you’re accessing one of the child elements of an object.
• This code alters the horizontal scale of the square MovieClip
making it one-and-a-half times wider than it used to be:

square.scaleX = 1.5;
Creating Objects

Methods
• A method is an action that an object can perform. For example, suppose you’ve
made a movie clip symbol in Flash Professional with several keyframes and
animation on its timeline. That movie clip can play, or stop, or be instructed to
move the playhead to a particular frame.
• This code instructs the MovieClip named shortFilm to start playing:
shortFilm.play();

• This code makes a MovieClip named shortFilm move its playhead to Frame 1 and
stop playing (like rewinding a video):
shortFilm.gotoAndStop(1);
Creating Objects

Events
• A computer program is a series of instructions that the computer carries
out step-by-step.
• However, ActionScript programs are designed to keep running, waiting
for user input or other things to happen. Events are the mechanism that
determines which instructions the computer carries out and when.
• In essence, events are things that happen that ActionScript is aware of
and can respond to.
• Many events are related to user interaction, such as a user clicking a
button or pressing a key on the keyboard.
Creating Objects

• There are also other types of events. For example, if you use
ActionScript to load an external image, there is an event that can
let you know when the image has finished loading.
• When an ActionScript program is running, conceptually it just sits
and waits for certain things to happen. When those things happen,
the specific ActionScript code that you’ve specified for those
events runs.
Creating a Rectangle/Square

• The properties required are:

• the color (0xFF0000, 0x00FF00, 0x0000FF)
• coordinate (x,y) of top left square from top left corner
• Width and height
• The function used is drawRect(x,y,w,h)

rect.graphics.beginFill(0xFF0000);
rect.graphics.drawRect(100,100,50,100);
rect.graphics.endFill();
 Creating a Rectangle/Square

• Create a RED square at coordinate(100,50) from top left corner, and width and height = 100;
 Creating a Rectangle/Square

• Create the second square

at coordinate(100,50) from
top left corner, and width
and height = 100.
• Change the color into BLUE
Creating a Rectangle/Square

• In case of redundancy, the object that is created last will appear

on top of the other.
Creating a Circle

• The properties required are:

• the color (0xFF0000, 0x00FF00, 0x0000FF)
• centre point coordinate (x,y) from top left corner
• Radius (r)
• The function used is drawCircle(x,y,r)

circle.graphics.beginFill(0x0000FF);
circle.graphics.drawCircle(250,150,50);
circle.graphics.endFill();
 Creating a Circle

• Create a circle at
coordinate(250,150) from
top left corner, with radius
= 50 (this will give us 100 in
width, same with the width
of the rectangle).
• Change the color into BLUE
 Exercise!

• Write a program that give the outputs as in the figures below.

Event handling

Basic event handling

• The technique for specifying certain actions to perform in
response to particular events is known as event handling. When
you are writing ActionScript code to perform event handling, there
are three important elements you’ll want to identify:
• The event source
• The event
• The response
Event handling

• The event source: Which object is the one the event is going to happen
to? For example, which button was clicked, or which Loader object is
loading the image? The event source is also known as the event target.
It has this name because it’s the object where the computer targets the
event (that is, where the event actually happens).
• The event: What is the thing that is going to happen, the thing that you
want to respond to? The specific event is important to identify, because
many objects trigger several events.
• The response: What steps do you want performed when the event
happens?
Event handling

• Any time you write ActionScript code to handle events, it requires these three
elements. The code follows this basic structure (elements in bold are placeholders
you’d fill in for your specific case):

Function eventResponse(eventObject:EventType):void
{
// Actions performed in response to the event go here.
}
eventSource.addEventListener(EventType.EVENT_NAME, eventResponse);

• This code does two things. First, it defines a function, which is the way to specify the actions
you want performed in response to the event. Next, it calls the addEventListener() method of
the source object.
Event handling

• The event-handling process

• The following is a step-by-step description of the process that happens when
you create an event listener. In this case, it’s an example of creating a
listener function that is called when an object named myButton is clicked.
• The actual code written by the programmer is as follows:

function eventResponse(event:MouseEvent):void
{
// Actions performed in response to the event go here.
}
myButton.addEventListener(MouseEvent.CLICK, eventResponse);
Event Listener

Identify the Event for each of the EventType/class below:

• Mouse Event Listener
• Keyboard Event Listener
Event Listener

• Create an event listener for the square object that will call the
function rectClick.
• Everytime the object rectangle is clicked, it will print out
“Rectangle clicked”.
Event Listener

• Add another event listener for the Circle that will call the function
rectClick and print out “Circle clicked”.
• Try to click on the rectangle and the circle alternately to test the
event listener.
KeyboardEvent

• You can place an event listener on the Stage to listen for and
respond to keyboard input.
• In order to learn the used key you can use two properties that
belong the the Keyboard Event Class:
• keyCode - The key code is a numeric value representing the position of the
key of the keyboard.
• charCode - The character code is a numeric value representing the
character associated with the key.
KeyboardEvent

• In the following code, an event listener captures a key press, and the
key name and key code properties are displayed:

function myKeyDown(e:KeyboardEvent):void
{
trace(e.keyCode);
trace(e.charCode);
}

The difference between these two becomes apparent when you realize that small
and capital "A" letters have the same keyCode but different character codes.
stage.addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown)
function myKeyDown(e:KeyboardEvent):void
{
trace("You have pressed: " + String.fromCharCode(e.charCode));
trace("Char Code: " + e.charCode);
trace("---------------------------");
}
KeyboardEvent

• Though this might a good indicative way to inform you that the
keyboard is being used, you are more likely need to associate code
with a press of a certain key only and not the whole of the
keyboard.
• In order to do this you need to use a conditional to compare the
value of the keyCode with a constant representing the key you
need to use.
• The Keyboard Class has a number of constants for all the keys you
are likely to need to use.
• For example, if you want to pass a specific command to be
triggered when the space bar is pressed you can use a conditional
to trigger than command this way:

stage.addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown);

function myKeyDown(e:KeyboardEvent):void{
if (e.keyCode == Keyboard.SPACE){
trace("Success!");
}
}
stage.addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown)

function myKeyDown(e:KeyboardEvent):void
{
if (e.keyCode == Keyboard.SPACE)
{
trace("Space bar pressed!");
}
if (e.keyCode == Keyboard.UP)
{
trace("Up arrow pressed!");
}
if (e.keyCode == Keyboard.LEFT)
{
trace("Left arrow pressed!");
}
}
KeyboardEvent

• A KeyboardEvent object id dispatched in response to user input

through a keyboard.
• There are two types of keyboard events:
• KeyboardEvent.KEY_DOWN
• KeyboardEvent.KEY_UP
KeyboardEvent : Move a Plane

• The purpose of this example is to use

the keyboard to move the object
(plane) around the stage.
• Create the object and convert to
symbol and change the instance
name into plane_mc.
KeyboardEvent

• The first step in achieving this is by registering for the Keyboard

Event using the .addEventListener() method.
• You can use the stage instance to register for this event even if
you plan on applying the result of the event to another object.

stage.addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown);
KeyboardEvent

• The next step would be to create the myKeyDown listener function

KeyboardEvent

• Moving the object will involve increase or decreasing the values of

the x and y properties.
• The first action to take is to move the object to the left by
pressing the left arrow.
• To do this we need to use a conditional to check that the left
arrow is pressed and then decrease the value of the x property by
5 to move the object a bit to the left.
• Repeat this process by increasing x property to move the object to
the RIGHT when pressing the right arrow.
KeyboardEvent
KeyboardEvent
KeyboardEvent

• Though properly working, the way we have written our code is

unwieldy, we are using way too many conditionals and the code
could be shortened down by using a simple switch statement.
• The following code carries exactly the same function as the code
above, however, it is written in a more logical structure that
utilizes the case format of a the switch statement.