Flash MX Event Model

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:

onMouseMove //Mouse is moved
onMouseDown //Mouse is pressed
onMouseUp //Mouse is released
onKeyDown //A key is pressed
onKeyUp //A key is released

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:

Actionscript:
  1. //create a new empty object
  2. myobject=new Object()
  3.  
  4. //now register our interest with the Mouse objects broadcast
  5. 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:

Actionscript:
  1. //create a new empty object
  2. myobject=new Object();
  3.  
  4. //now register our interest with the Mouse objects broadcast
  5. Mouse.addListener(myobject);
  6.  
  7. //define the onMouseMove event handler for our object
  8. myobject.onMouseMove=function(){
  9. trace('Mouse was moved');
  10. }

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:

Actionscript:
  1. //create a new empty object
  2. myobject=new Object();
  3.  
  4. //now register our interest in the Mouse objects broadcast
  5. Mouse.addListener(myobject);
  6.  
  7. //define the onMouseMove event handler for our object
  8. myobject.onMouseMove=function(){
  9. trace('Mouse was moved');
  10. }
  11.  
  12. //now register our interest in the Key objects broadcast
  13. Key.addListener(myobject)
  14.  
  15. //define the onKeyDown event handler for our object
  16. myobject.onKeyDown=function(){
  17. trace('Key was pressed');
  18. }

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:

Actionscript:
  1. //create a new movieclip on the _root timeline
  2. _root.createEmptyMovieClip('mymovieclip',1)
  3.  
  4. //define the 'onMouseMove' event handler for our Movieclip
  5. _root.mymovieclip.onMouseMove=function(){
  6.  
  7. //move this movieclip to the mouses position
  8. this._x=_root._xmouse;
  9. this._y=_root._ymouse;
  10. }

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:

Actionscript:
  1. onClipEvent(mouseMove){
  2. this._x=_root._xmouse;
  3. this._y=_root._ymouse;
  4. }

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:

Actionscript:
  1. on(press){
  2. trace('Our button was pressed');
  3. }

The above code can now be written in Flash MX, using the new event model as follows:

Actionscript:
  1. yourbutton.onPress=function(){
  2. trace('Our button was pressed');
  3. }

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.

Comments are closed.