Photoshop Tutorials, Flash Tutorials, 3Ds Studio Max Tutorials, Web Design Tutorials

Home  |  Submit Tutorial  |  Top Sites  |  Free Templates (NEW)  |  Website templates  |  Privacy Policy  |  Link Exchange  |  Contact Us

Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!
Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!

Welcome To ProDesignHost.com Flash Tutorials Area - update AfterEvent 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()
{
//change a few movieclip properties
//blah blah blah
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()
{
this._x=_root._xmouse;
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()
{
this._x=_root._xmouse;
this._y=_root._ymouse;
updateAfterEvent();
}

Click to Enlarge
Click to enlarge

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.
Author: Guy Watson
Advertisements

Premium Partners

  Free Website Templates - Flash templates, Affordable Website Design, Website Templates, Website Redesign, Custom Website Design, Web Design Tutorials, Flash Tutorials, Promotion Tutorials - that is what we do. Metamorphosis Design Studio offers quality, free and low cost web site templates for your business and personal life, we also offer affordable web design and site re-design.
  Vertex Website Tempales - It saves tones of time and money to use pre-made web designs to build your web site. You need a web site but you don't want to pay thousands dollars to professional web design companies? Our web templates is just for you! They are designed to be easilly edited by your favorite html editor, like MS FrontPage
  Website Design Tutorials - Web site design is an area that simply takes experience to perfect. Get started with these tutorials covering everything from page layout to content tips. At Webdesigntutorials.net you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced Adobe Photoshop, Macromedia Flash MX and 3D Studio Max software.
Free website templates and paid web templates are great tools to make your websites look perfect! You will save time and money with our flash templates and free website templates Our visitors are satisfied with the quality of our free and paid website templates! Please visit our free website templates and paid website templates sections. We offer free web templates, free web layouts, free web page templates and other stuff for free download. All templates come with the html and external css file so you may easily edit HTML with your favorite HTML editor. Feel free to download our free web templates for your personal websites.

Terms of use depend upon the website template vendor.

Home  |  Submit Tutorial  |  Top Sites  |  Free Templates  |  Website templates  |  Privacy Policy  |  Contact Us

All Right Reserved by ProDesignHost.com