Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions Tools to help you create your site Free and shareware fonts to download Photographs to use in your projects Shop for your site needs Free Online classes REcommend this site to others Log in or edit your information when logged in Developingwebs Log Out Change My Account details and preferences
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

Scripting a Preloader Function

You only need one frame at the beginning of your movie to script the preloader function. In this frame you will need a movie clip that contains your loading animation.

The preloader function callback works by using the onEnterFrame event, an event that when you are in the frame it is in, it will play at the frame rate, without any frame advancement. To make it stay ion the same frame we will add a stop first, then the function.

1. Make a layer at the top of your layers, called actions in your movie timeline.

2. Create a keyframe in frame 1 of the actions layer.

3. Click in frame 1 of the actions layer and open the actions panel. Insert a stop on the first line of the actions panel for this frame. Your script appears like this:

stop();

3. On the next line we will set a function callback that will be handled by the event, onEnterFrame. Set  up the function for the _root or main timeline as follows:

stop();
_root.onEnterFrame = function(){
}

Check your syntax.

4. You will next add the action lines within the onEnterframe event on this frame that will decide if you stay in preloader stage or move to the next frame. Within the curly brackets of your function callback, add the condition that will test and compare the values of _totalframes and _framesloaded, global vlaues.

First add your conditional statement: if (_framesloaded >= _totalframes){ }

Check your syntax.  It should look like this:

stop();
_root.onEnterFrame = function(){
   if (_framesloaded >=_totalframes){
   }
}

5. When your movie is fully loaded, or whatever value you give for the right side of the equation,  (_totalframes/2 would mean only half frames loaded), then you can advance to the next frame. Add the script nextFrame();;

stop();
_root.onEnterFrame = function(){
    if (_framesloaded >=_totalframes){
        nextFrame();
    }
}

Check your syntax.

Test your preloader!

We can add a dynamic loading bar now! this is the next tutorial!



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2008 All Rights Reserved
Privacy and Legal