One of my favourite new features of Flash MX, has to be the new event
model, it just makes life so much easier and makes coding so much more
fun and so much more organised. If you dont know much about it, then
now is the time to find out, you really are missing out, but no doubt
you are already using it without even realising. This article will
hopefully help everybody that reads it, whether you are a beginner or a
flash super user, understand the flash event model, and help you to use
it. I think the best way to explain something new to somebody so that
they can learn from it is to compare the subject with something that
humans can relate to in their everyday lifes; A real world Analogy, so
this article uses analogies to convey some of the concepts...
What you need to know:
To understand some of the explanations and terms used in this article,
you need to know certain things about flash, firstly you need to
understand that flash is now Object Oriented and therefore you should
already have a basic understanding of Object Oriented Programming with
flash, if you can answer the questions below, you will can continue to
read this article and hopefully you should understand everything,
otherwise you should checkout this excellent site that gives an
in-depth explanation of Object Oriented Programming for flash:
Robin Debreiul
What is an object?
What is a method?
What is a property?
What are the predefined objects in flash?
What is the difference between a function and a method?
What is the difference between a variable and a property?
The Event Model:
Most of us want to know what is going on in the world or in our local
area, for that we look to newspapers, the television and the web to
inform us what is happening. The news consists of a collection of
‘events’ that have occurred recently, they are labelled ‘events’
because they are important moments in time that other people want or
need to know about.
Think of the Event Model in Flash to be the news bulletin, it is the
flash players way of telling us that something important has occurred
in a flash movie, the news that flash brings us isn’t of course as
important as what goes on in our everyday lifes, but it can be very
important to a script.
So in terms of Actionscript, the event model is the internal workings
of the flash player that notify the flash movie when something
important occurs.
An Event:CNN for example, send out reporters to look for
important news. When something happens in the world, such as a volcano
erupting, that is labelled an event, it is something important then
people may want or need to know about, so the news reporter that saw
the volcano erupt quickly calls the head office and tells them to add
this latest hot news story to the news bulletin, shortly following, the
latest news story is then spread throughout the world for everybody to
see via the means of television, the web, the radio and other such
technologies. The same thing happens with your flash movies but on a
much smaller scale. The flash player has news reporters, when the user
of a flash movie moves his mouse for example, a news reporter that
spotted the mouse moving, quickly calls head office(the flash player)
and asks them to add the latest breaking story to the news bulletin
because the reporter knows that this is something that the objects of
the flash movie may want to know, very shortly after(milli-seconds) the
latest ‘event’ is broadcasted to the flash movie.
So in actionscript terms an event, is a nofitication that occurs in
reponse to an action, a change in state; such as a key on the keyboard
being pressed, the mouse being moved, or an xml document fully loading.
An Event Handler:The flash players news bulletin shares the
latest news with us so that we can act, meaning we can run a piece of
code when we are told that an event has occurred. This is where Flash
Event Handlers come into play.
An event handler is an instruction that you specify for a user defined
object, that tells the object what to do when a specific event occurs.
So in actionscript terms an event handler is simply a property of any
specific user defined object that contains a reference to an
actionscript method. That method is called and the code inside that
method is executed when the related event occurs.
Categorised Events:The Flash Players news bulletin is split
into separate departments that deal with different events, these are
known as objects, each of the predefined actionscript objects, such as
Key, Mouse and Movieclip has its own news reporter that is experienced
in watching out for events that relate to that object. So for example
the Mouse object news reporter is only employed to notify the Mouse
head office when the mouse is pressed, when the mouse is released and
when the mouse is moved. When one of these events occur, the news
reporter notifies the Mouse head office, which then in turn broadcasts
a news bulletin.
The list of events that each departments news reporter is employed to
look out for are listed in the actionscript dictionary.
Here is a list of some of the most commonly occurring events and their
associated event handler:
Event Description / Event Handler
Mouse is moved/onMouseMove
Mouse is pressed/onMouseDown
Mouse is released/onMouseUp
Key is pressed/onKeyDown
Key is released/onKeyUp
So in terms of actionscript, each of the Predefined Objects, such as
Mouse, Key and Movieclip has its own set of events that are related to
that object. It wouldn’t make sense for the Key object to contain
events relating to the Mouse and so on…..
Listeners:Listeners are user defined actionscript objects that
are registered with specific departments of the flash players news
bulletin, because they are interested in seeing the news that those
departments broadcast. After an object has registered interest with one
of the news bulletin departments, whenever an event occurs, that the
news bulletin department is looking out for, a news broadcast is sent
out and the registered object will receive it. So in actionsript terms,
a listener is an object that contains event handlers, the object
registers with a specific predefined object so that it can receive the
events related to that predefined object.
Using the Listener Methods:We have methods that allow us to
register and unregister our interest in the broadcasts from the news
bulletin departments. To register an objects interest with a news
bulletin department we use the addListener method and to unregister our
interest with a news bulletin department we use the removeListener
method. Here is the process we go through to register our interest with
a news bulletin departments broadcast, in this example our object is
interested in the Mouse objects broadcast:
//create a new empty object
myobject=new Object()
//now register our interest with the Mouse objects broadcast
Mouse.addListener(myobject);
Here is the process that we would use to unregister our interest in the Mouse objects broadcast:
Mouse.removeListener(myobject);
So in actionsript terms, now, whenever a Mouse event occurs, the object
named ‘myobject’ will be notified that a Mouse event occurred and which
Mouse event occurred.
Adding event handlers to objects:For the empty object we
created named ‘myobject’ to act on the broadcasts it receives from the
news bulletins Mouse department, we need to tell it what to do when a
specific event occurs, so as you should now know, we have to define
event handlers for the object. To define an event handler that will
output the words “Mouse was moved” to the output window, whenever the
mouse is moved, we would use the onMouseMove event handler, as follows:
 Click to Enlarge |
//create a new empty object
myobject=new Object();
//now register our interest with the Mouse objects broadcast
Mouse.addListener(myobject);
//define the onMouseMove event handler for our object
myobject.onMouseMove=function(){
trace(“Mouse was moved”);
}
Lets
be clever and output the words “Key was pressed” to the output window,
whenever a key is pressed, by registering our interest for the object
above, with the Key news bulletin department and using the onKeyDown
event handler:
//create a new empty object
myobject=new Object();
//now register our interest in the Mouse objects broadcast
Mouse.addListener(myobject);
//define the onMouseMove event handler for our object
myobject.onMouseMove=function(){
trace(“Mouse was moved”);

//now register our interest in the Key objects broadcast
Key.addListener(myobject)
//define the onKeyDown event handler for our object
myobject.onKeyDown=function(){
trace(“Key was pressed”);
}So,
lets explain what happens now when the user clicks his mouse in
actionscript terms. Whenever the user clicks his mouse, the Mouse
object notifies the object named ‘myobject’ that the onMouseDown event
has occurred and then the onMouseDown event handler is triggered, which
in turn runs the code that outputs the words “Mouse was moved” to the
output window.
Movieclips and Buttons listen automatically:As mentioned
previously, for an object to receive event notification it has to be
registered with the predefined actionscript object that provides those
events. Since Flash 5, Movieclips were objects that inherited from the
Movieclip class, now, in Flash MX, Buttons are objects that inherit
from the Button class. All instances of the Moveclip class have their
interest registered with the Movieclip news broadcast automatically and
all instances of the Button class have their interest registered with
the Button news broadcast automatically. This means that you do not
need to explicity use the addListener method, for a Movieclip to be
notified of any Movieclip events, and the same goes for Buttons. So it
is possible to do the following:
//create a new movieclip on the _root timeline
_root.createEmptyMovieClip(“mymovieclip”,1)
//define the ‘onMouseMove’ event handler for our Movieclip
_root.mymovieclip.onMouseMove=function(){
//move this movieclip to the mouses position
this._x=_root._xmouse;
this._y=_root._ymouse;
}
So lets explain what happens now when the the user moves his mouse in
actionscript terms. Whenever the user moves his mouse the Movieclip
object named ‘mymovieclip’ is notifed that the onMouseMove event has
occurred and then the onMouseMove event handler is triggered, which in
turn executes the code that moves the movieclip to the mouses position.
All Movieclips automatically receive notification of the Key, Stage and
Mouse events automatically.
Flash 5 Event Model: Flash 5 introduced a basic event model for
movieclips and button, this involved the use of the onClipEvent event
handler. So in the last example, we moved a movieclip to the mouses
position whenver the mouse was moved, if we wanted to achieve the same
thing using the Flash 5 Event model, we would place the following code
on the outside of the movieclip, we wanted to move:
onClipEvent(mouseMove){
this._x=_root._xmouse;
this._y=_root._ymouse;
}
Or if we wanted to run some code whenever our button was pressed we would place the following code on the outside of our button:
on(press){
trace(“Our button was pressed”);
}
The above code can now be written in Flash MX, using the new event model as follows:
Yourbutton.onPress=function(){
trace(“Our button was pressed”);
}
You can still use the old Flash 5 Event model in Flash MX for the sake
of backwards compatibility, it is not officially deprecated by
Macromedia, but in my opinion you should consider it to be. There are
absolutely no advantages that can be gained from using the old event
model.
Flem is no longer needed in Flash MX:
Branden Hall created an event model in the form of an actionscript exstension named
Flem
in the early days of Flash 5. This gave you the same capabilities that
the in built Flash MX Event model now provides therefore, the usage of
this library is no longer required.
Advantages of using the new event model:The first thing that you
gain by using the Flash MX event model as opposed to the old event
model is that you can change your event handlers at any time, thus
changing the function that is executed when an event occurs. Also,
because an event handler is now just a property of an object, it can
also be deleted thus saving cpu usage, which could not be achieved
without a bit of trickey once the movie was running with Flash 5. In
flash 5 you couldn’t attach a movieclip from the library using the
attachMovie method and then assign an event handler to it because the
onClipEvent() event handler had to be defined on the movieclip as
opposed to inside of it, at authoring time. It is now very simple to
achieve that in Flash MX. Finally the new Flash MX event model is a lot
cleaner, easier to use and more organised than the old event model that
Flash 5 provided.