Internet Commerce
Developer ChannelFlashKit.com
JavaScriptSource Developer Jobs ScriptSearch WebDeveloper.com Webreference HTMLGoodies HTML5 Dev Center Developer.com jGuru.com PHPBuilder
|
  Tutorials HomeWhat's NewTop RatedSubmitmyTutesRandom!
Search Tutorials
 Tutorials » Audio
Adding a load indicatorWe 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 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:
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:
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.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Flash MX Audio Player
|
 |
 |
|