AddThis Social Bookmark Button
 Smooth animation using updateAfterEvent

download source files download source files


From the Actionscript 2.0 language reference

updateAfterEvent function

updateAfterEvent() : Void

Updates the display (independent of the frames per second set for the movie) when you call it within an onClipEvent() handler or as part of a function or method that you pass to setInterval(). Flash ignores calls to updateAfterEvent that are not within an onClipEvent() handler or part of a function or method passed to setInterval(). This function works only with certain Mouse and MovieClip handlers: the mouseDown, mouseUp, mouseMove, keyDown and keyUp handlers for the Mouse class; the onMouseMove, onMouseDown, onMouseUp, onKeyDown, and onKeyUp handlers for the MovieClip class. It does not work with the Key class.

Availability: ActionScript 1.0; Flash Player 5

UpdateAfterEvent with the onMouseMove listener

So what 's all about the updateAfterEvent method, well first let's have a look at the 2 movies below.
Both movie have a frame rate of 12 frames per second. The code is the same in both of them, the only difference is that in the second one I am calling the method updateAfterEvent each time a mouse move is detected, try it by yourself.

Drag the spheres around

You will notice that in the second movie the animation is a lot smoother when you drag the spheres.

How does it works ? Without updateAfterEvent the only way to smoothen a jerky animation running in 12 frames per second is to raise the frame rate of the movie, this has been done and will still be done by numerous Flash developers and designers. But the smart way is to use updateAfterEvent which force the screen to refresh independently on the frame rate instead of refreshing it at every frame.


As you can see in the definition given in the Actionscript 2.0 language reference updateAfterEvent does work with the onMouseMove listener. Here is the code for both movies

// ---------------- code movie 1---------------

greenSphere.onPress = function(){
this.startDrag();
}
greenSphere.onRelease = function(){
this.stopDrag();
}

redSphere.onPress = function(){
this.startDrag();
}
redSphere.onRelease = function(){
this.stopDrag();
}

// ---------------- code movie 2 --------------

onMouseMove = function(){
updateAfterEvent();
}

greenSphere.onPress = function(){
this.startDrag();
}
greenSphere.onRelease = function(){
this.stopDrag();
}

redSphere.onPress = function(){
this.startDrag();
}
redSphere.onRelease = function(){
this.stopDrag();
}

// ------------ end of code movie 2 ----------


Note that instead of using :
onMouseMove = function(){
updateAfterEvent();
}
we could attach the following event on one of the sphere and we would achieve the same result:
onClipEvent(mouseMove){
updateAfterEvent();
}
AddThis Social Bookmark Button
If you think this page is providing useful information, don't hesitate to leave a comment.
flashvalley
 
Copyright ©2006-2008 flashvalley.com - All rights reserved