First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing! | Flash Jobs
Search tutorials
Author: Tim Murray | Website: http://www.gmg.com.au

Adding a load indicator

We could use a preloader for this, but that wouldn't make the best use of Flash's streaming capabilities. What we are going to do is show how much has loaded and then let the visitor play any part that Flash has cached. We thought this would be best achieved with a slider. So let's make one.

Our first task is to create a progress bar movie clip to contain our slider.

Create a layer in the media-controls movie clip in test.fla for our slider. I put the layer between the actions and rew layers and named it "slider". Select the "Insert > New Symbol..." command (Ctrl+F8) and name it "progress-bar", giving it a Behaviour of Movie Clip.

Select the slider layer you created and drag the progress-bar movie clip on to the stage to the left of the buttons we have completed (or put it anywhere else you feel is appropriate).

Open the progress-bar movie clip and now draw the background rectangle that will form the basis for our slider. I made mine with a black fill and border. My dimensions for the rectangle were 171 wide and 4 high. Rename "Layer 1" to "base" ('cos it's the base of our slider). You should have this (the stage is zoomed in a bit):

Now for the highlight that will grow within this base as more and more of the audio file is loaded.

Create a layer above the base layer and name it "highlight". On the highlight layer, draw a rectangle (any colour you like), select and delete the rectangle's border, and align it with the start of the base layer's rectangle. Like this:

To be able to change the size of this in code, it needs to be a movie clip, and it needs to have an Instance Name.

Select your grey (or whatever colour you chose) rectangle and use the "Insert > Convert to Symbol..." command (F8). Name it "frames-loaded" and give it a Behaviour of Movie Clip.

Make sure that your new frames-loaded movie clip is selected. In the Properties panel, set the to "progressBar".

Time for a slight diversion.

The code for the slider will get a little tricky. To minimise confusion and to make code maintenance easier, we are going to keep as much of our code in one place as we can. That place will be a functions layer that will contain our ActionScript code. So create a new layer at the top of the timeline and name it "functions".

Out of habit, we usually have some standard layers in all of our FLA files:

Layer name

What we use it for

labels

Contains a whole bunch of labelled keyframes and nothing else. This makes it easy to see where our labels are and what they are called.

actions

ActionScript that needs to be executed as the movie is playing. We don't put any functions in this layer, just code that needs to be executed on a keyframe.

functions

This is for ActionScript functions that we call from the actions layer or in event handlers on movie clips or buttons. When we have the majority of code in one place, it makes debugging much easier because it is easy to find the code.

That's it. Diversion over. Back to our progressBar code.

Our first function will set the size of the progress bar according to the sound download progress. This code needs to go into your newly created "functions" layer:

function setProgressBar() {
        var parentLoaded = 170 * _parent._parent._framesloaded / _parent._parent._totalframes;
        progressBar._width = parentLoaded;
}

We are setting the _width of the progressBar movie clip to a fraction of the width of our rectangle on the base layer. I made the rectangle 171 wide and indented the progressBar movie clip by 0.5 from the left, so I want the same distance in from the right, giving 171 - 0.5 - 0.5 = 170. The fraction of 170 that we want is given by the usual _framesloaded / _totalframes. No new stuff here! The only tricky thing is that we have to go up far enough so that _framesloaded and _totalframes will refer to the Flash movie that has the sound streaming on the timeline.

The following table shows what code accesses which movie clip:

Variable

Movie clip

_framesloaded

progress-bar

_parent._framesloaded

media-controls

_parent._parent._framesloaded

Main timeline

And now back to the progressBar movie clip. This is the code that needs to go on it to call the setProgressBar function:

onClipEvent (enterFrame) {
        _parent.setProgressBar();
}

Test this (Ctrl+Enter) with streaming (Ctrl+Enter again). As Flash simulates the download, you should see the grey bar in the black slider background growing until all of your sound has loaded.

Save now.

» Level Advanced

Added: 2004-02-17
Rating: 8 Votes: 63
(10 being the highest)
» Author
Tim is a co-director of the Glasson Murray Group, providing quality graphic design, illustration, 3D visualisation, interactive environments, virtual reality, multimedia and website services.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.