Developing Webs logo
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
RSS Newsfeed
for your site
DW News
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Remember to book mark this site!

Request a Tutorial

Percent Frames Loaded Preloader

  • Import 7 gif or jpg images of measurable size.

I can argue till I'm blue in the face that people hate the preloader and that a preload sequence is far better that entertains while the movie loads many frames ahead, then a loader bar, but people still insist on using a preloader sequence with percent loaded bar. Here it is based on frames loaded.

1. In a new movie, draw a rectangle that is wide and short. Highlight the rectangle and click Insert=> Convert to symbol called percentage and with properties of a movie clip. Open this symbol and highlight the rectangle inside the symbol. Set the X and Y value to 0 so that the registration point is in the upper left corner.

2. Highlight the instance of the rectangle on the stage. Name the instance "bar" in the instance box. Click on frame 2 of the layer 1 and hit your F5 key. Add blank key frames to frames 3-10.

3. Insert a layer called script. Insert keyframes in frame 1 and 2. In frame 1 we want to add a script that sets a variable that will calculate a percentage value for the percent of frames loaded. To do this we need to name the variable, say percentage, and set it equal to the number of frames loaded divided by the total number of frames times 100. This is translated in flash as percent=_framesloaded*100/_totalframes. Add this script to frame one.

4. Our instance of bar on the stage is at 100%. We want the entire instance to display if the entire movie is loaded. We only want a percentage of the bar instance to show if the movie is not all loaded, and it would be even better if we could get the bar to display a fairly accurate depiction of the percent of the movie loaded. We can do this by setting the X scale value of the bar to reflect the percentage. Flash has a property that is called _xscale which will do this. With the registration point at the edge of the bar, the bar will resize only on the opposite size, hence that is why we moved the registration point in #1. 

To do this, we use the following logic: set the property _xscale of the bar to the value of percent which we already calculated. More precisely, we use setProperty ("", _xscale, percent); in frame 1 right under our declaration of percent.

5. In frame 2 of the scripts layer we need to tell the movie to replay frame 1 until all the frames are loaded. We can do that by using the if statement with the condition that _framesloaded < _totalframes play frame 1, or if (_framesloaded<_totalframes) {gotoAndPlay (1);}

6. Add separate images you imported to layer 1 frames 3, 4, 5, 6, 7, 8, 9, and 10.

7. Testing your movie- To view how the movie will load and how the preloader will function use the following settings.

Click control=>test movie. Click the debug to set the modem speed you want to test it at.


Click View and check the folowing:

  • bandwidth profiler
  • show streaming
  • streaming graph



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