Percentage Preloader

Click here to view example

Download Source (zipped)

This is a very common request. A lot of people want a preloader that they can use to indicate the download progress of their movie before it actually plays. This has the benefit of preventing the movie from playing while it is still streaming (when the movie can look quite jerky.

There are several ways to accomplish this. This is the most precise, and gives a live percentage of the movie frames loaded. The best use for this is with frame-by-frame animations (such as those generated by Vecta3D, for example), where each frame contains a different image.

Start with the movie you want to preload. I made mine in Vecta3D, because it produces a frame-by-frame animated sequence.

The next step is to insert 2 blank keyframes at the start of the timeline (before any of the 'main' movie frames are visible.
Next, add two more layers to the timeline. One of these is for the preloader actions (the scripting) and the other is for the percentage display.



In the Percentage layer, put a text field. Make this editable by clicking on the 'ab|' button in the tool palette. Then edit the properties of the text field, using the settings shown below, giving it the name 'Percentage'. Note that I've only included font outlines for numbers and the % symbol, because that's all we need. You might also want to un-check the 'Draw border and background' option.

Next, insert a keyframe in the third frame (at the start of the main movie sequence) and remove the text field in this frame. This prevents the percentage display from being shown after the preload sequence. This is illustrated below.

Now we're ready to add the actions.
Insert a second keyframe in the 'Actions' layer. This second keyframe is where the actions will all be placed.
Double-click on this second keyframe and go to the 'Actions' tab.
Add the following actions:

This uses the general formula for percentages:

It also makes use of the built-in _framesloaded and _totalframes properties of the movie to get the percentage of movie frames currently loaded.

So to summarise, we calculate the percentage (and round it to the nearest integer using the 'Int' function) and then add a '%' symbol to it and place the result in the Percentage text field.
Then, to make the preloader run in a loop, we check to see if the number of frames loaded is less than the total. If it is, the movie hasn't completely downloaded, so we loop back to the previous frame. If all the frames are loaded, the movie won't loop again and the movie will continue on to the main sequence.

Here's another screenshot, showing you what the 'Actions' box should contain. You should make sure you set the 'abc' / '=' button to the right of the 'Value' box to '=' for the 'Set Variable' lines. Otherwise you'll just see the text of your formulae on the screen instead of their values...

One final note: you will need to put a 'Stop' action at the end of your timeline, or else some script to loop back to frame 3. This will ensure that your preloader does not play again.

Click here to see the result.

Note that this preload movie will only show the preloading the first time you view it. After that, it is likely to be cached by your browser, and so will already be loaded. If you want to see the preloading again, download the source and preview it with the 'Show Streaming' option turned on under the 'Control' menu.

Download Source (zipped)