Tuesday, November 5, 2024

updateAfterEvent Explained

It appears that most coders use it, but 50% if not more dont actually know why they are using it, what it does or when they should use it. In the latest article for a regular column in a uk based internet magazine; dot net, a self proclaimed actionscript expert implemented updateAfterEvent in his mouse recording example as follows:

this.onEnterFrame=function()
{
&nbsp&nbsp&nbsp //change a few movieclip properties
&nbsp&nbsp&nbsp //blah blah blah
&nbsp&nbsp&nbsp updateAfterEvent;
}

This and numerous other occasions people are using the function without actually understanding it correctly and thus using it in totally the wrong way….

To begin with, a little background.

The Flash Player runs through each frame of a timeline one by one at a speed determined by the framerate(fps), for each frame, the actionscript if any, for that particular frame is run first, then the flash player renders the latest graphics onto the stage. The Flash player works in this way so that if we were for example to change the property of a movieclip with actionscript, when the flash player updates/renders the stage again, the new changes are visually apparent. The longer it takes for the Flash Player to execute the code for a particular frame, the longer it is before the stage is rendered again, and thus there is a script timeout which means, that if a script on a frame runs for longer than 15 seconds, you as the user have the option to abort the script allowing the flash player to render the latest graphics on the state and not execute anymore code in the movie.

Introduced to Flash 5 was a new event based system, which allows us to execute actionscript when a particular events occur. So for example, i can execute actionscript when a key is pressed on the keyboard, or when the user moves the mouse or when the user presses a mouse button. These events do not necessarily occur in time with the flash players play head, meaning the user doesnt necessarily move his mouse in time with the general linear timeline execution. Thus updateAfterEvent was also implemented into the programming language. The reason behind this new function being that if you were to execute some code which created a visual change in your flash movie i.e. changing the position of a movieclip, or changing the colour of a movieclip when the user moved his mouse, those changes would not be seen until one frame later when the flash player next renders the stage.

updateAfterEvent forces the Flash Player to render the stage after a particular event and thus it is only necessary to include updateAfterEvent in your event based actionscript, when the event you are waiting for is the result of some form of user interaction, as you cannot determine when these events will occur. But remember, there is no reason to use updateAfterEvent if your actionscript doesnt affect the visual state of the stage in anyway. As all it does it render the stage after an event.

Lets take a simple example. I want to replace the mouse cursor with my own mouse cursor and have it move around with my mouse. To achieve this is simple. Create a movieclip on the stage, make sure the graphic is centered inside the movieclip, around the movieclip’s center point. Give the movieclip an instance name. Then with actionscript we hide the mouse cursor and tell the player to update the position of our own mouse cursor movieclip relative to the position of the mouse on the stage, when the mouse is moved:

Mouse.hide();
myMouseCursor.onMouseMove=function()
{
&nbsp&nbsp&nbsp this._x=_root._xmouse;
&nbsp&nbsp&nbsp this._y=_root._ymouse;
}

If you run this Flash Movie, you will notice that you have a new mouse cursor moving with your mouse. However depending upon your framerate it can be quite choppy and will appear to lag behind. Just for the sake of this example set your framerate to 12 fps, you will now notice the lag for sure. This lag occurs, because the code that set’s the position of the movieclip executes whenever the mouse moves, but the stage only re-renders itself 12 times every second. We need the stage to re-render itself and update the position of our movieclip visually on the stage, everytime the mouse is moved. updateAfterEvent to the rescue:

Mouse.hide();
myMouseCursor.onMouseMove=function()
{
&nbsp&nbsp&nbsp this._x=_root._xmouse;
&nbsp&nbsp&nbsp this._y=_root._ymouse;
updateAfterEvent();
}

Lovely jubbly, run the movie again and the lag is none existent. The stage now re-renders whenever the mouse is moved and the cursor moving around the stage is now smooth.

As we know, there is an event in actionscript, that is executed once per frame, which we use if we want a piece of code to execute once every frame. This saves us having to add a particular piece of code to every frame in a timeline, or using the old Flash 4 frame loop. The event is called onEnterFrame. As mentioned previously the stage renders itself at the end of every frame(when the actionscript for that frame has executed) and thus it doesnt make sense for you to tell flash to update the stage inside of an onEnterFrame event. This is because the flash player is going to re-render the stage anyway. Hence why the example that prompted me to write this article is infact bad form.

The setInterval function is a function that will execute a particular function every ‘x’ amount of millseconds. Obviously when setInterval executes a function, this happens independantly of the playhead, meaning that if you were to include code inside of a function called by setInterval, that actually changes the visual state of the stage in anyway, those changes will not be seen until one frame later – when the flash player re-renders itself. The result of a setInterval calling a function can be considered an event, which means that you can also force the flash player to render the stage every ‘x’ milliseconds using the setInterval function:

interval=500 //half a second
setInterval(this,"updateAfterEvent",interval)

Hopefully now people will actually use updateAfterEvent correctly in their actionscript and when they do use it, they will understand why they are using it.

*Originally published at FlashGuru.co.uk

Guy Watson (or FlashGuru as he is also known) has been an active, well
recognized figure in the Flash community for over four years,
supporting the community with tutorials, source files, moderating the
Flashkit forums, and running his own Flash resource Web site,
FlashGuru’s MX 101. Guy was one of two developers who created the ever
popular, award winning zoom interface for Relevare and now runs his
own company, FlashGuru LTD, which builds Flash Games & Applications
for clients such as Comic Relief, Egg and Channel 4.

Related Articles

3 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles