How to Make a Progress Bar in Flash

Start the Flash program. Click "Flash File (ActionScript 3.0)" from the splash window to create a new file for an AS3 Flash animation project.

Click "Components" from the "Windows" menu. Click and drag the progress bar icon onto the Flash Stage from the Components library. Click "Properties" from the "Windows" menu. Type "ProgressBar" into the instance name text box.

Click and drag the button icon onto the Flash stage from the Components library. Type "loadSound" into the instance name text box.

Select the "Actions" option from the Window menu on the main Flash menu bar to open the ActionScript 3 text editor. Position your mouse cursor on the first line of the editor. Click your mouse button and type in the code below to import the necessary Flash utilities for using the ProgressBar and Progress events.

import fl.controls.ProgressBar;

import flash.events.ProgressEvent;

Type the code below in the ActionScript 3 editor to specify and place the graphic files on the Flash stage when the music file is downloading (for a slideshow effect).

var URL:String = "http://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Tetragonias_njalilus_01.jpg/300px-

Tetragonias_njalilus_01.jpg";

var urlRequest:URLRequest = new URLRequest(URL);

var loader:Loader = new Loader();

loader.load(urlRequest);

var url1:String = "http://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Ramon_Enrich_-_enganxats_per_sempre.jpg/120px-Ramon_Enrich_-_enganxats_per_sempre.jpg";

var urlRequest1:URLRequest = new URLRequest(url1);

var loader1:Loader = new Loader();

loader1.load(urlRequest1);

Type the code below starting at the next line of the ActionScript 3 editor to specify the music file as the source file for the ProgressBar to use to generate load events and to download the music file when the user clicks the button that was placed on the stage.

var music:Sound = new Sound();

ProgressBar.source = music;

var musicFilelocation:String = "abeautifulsong.mp3"

var musicrequest:URLRequest = new URLRequest(musicFilelocation);

loadSound.addEventListener(MouseEvent.CLICK, getSound_fn);

function getSound_fn(event:MouseEvent) {

music.load(musicrequest);

}

Type the code below starting at the next line of the ActionScript 3 editor to assign an event listener to the ProgressBar and play the music file when the music has completed downloading.

ProgressBar.addEventListener(Event.COMPLETE, soundLoaded_fn);

function soundLoaded_fn(event:Event):void {

music.close();

loadSound.enabled = false;

music.play();

};

Type the code below starting at the next line of the ActionScript 3 editor to load the first graphic file on the stage when the music file begins loading, load the second graphic file and unload the first graphic file when between 10 and 11 percent of the music has completed downloading, and unload the second graphic when the music file completes downloading.

ProgressBar.addEventListener(ProgressEvent.PROGRESS, progressHandler);

function progressHandler(event:ProgressEvent):void {

if (ProgressBar.percentComplete == 0){trace("1");

addChild(loader);

}

if (ProgressBar.percentComplete >10 && ProgressBar.percentComplete>11){trace("1");

addChild(loader1);

loader.unload(); };

if (ProgressBar.percentComplete == 100){trace("1");

loader1.unload(); };

};

Copy and paste the code below into the ActionScript 3 editor to ensure the progress bar slideshow program runs correctly.

import fl.controls.ProgressBar;

import flash.events.ProgressEvent;

var URL:String = "http://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Tetragonias_njalilus_01.jpg/300px-

Tetragonias_njalilus_01.jpg";

var urlRequest:URLRequest = new URLRequest(URL);

var loader:Loader = new Loader();

loader.load(urlRequest);

var url1:String = "http://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Ramon_Enrich_-_enganxats_per_sempre.jpg/120px-

Ramon_Enrich_-_enganxats_per_sempre.jpg";

var urlRequest1:URLRequest = new URLRequest(url1);

var loader1:Loader = new Loader();

loader1.load(urlRequest1);

var music:Sound = new Sound();

ProgressBar.source = music;

var musicFilelocation:String = "abeautifulsong.mp3"

var musicrequest:URLRequest = new URLRequest(musicFilelocation);

loadSound.addEventListener(MouseEvent.CLICK, getSound_fn);

function getSound_fn(event:MouseEvent) {

music.load(musicrequest);

}

ProgressBar.addEventListener(Event.COMPLETE, soundLoaded_fn);

function soundLoaded_fn(event:Event):void {

music.close();

loadSound.enabled = false;

music.play();

};

ProgressBar.addEventListener(ProgressEvent.PROGRESS, progressHandler);

function progressHandler(event:ProgressEvent):void {

if (ProgressBar.percentComplete == 0){trace("1");

addChild(loader);

}

if (ProgressBar.percentComplete >10 && ProgressBar.percentComplete>11){trace("1");

addChild(loader1);

loader.unload(); };

if (ProgressBar.percentComplete == 100){trace("1");

loader1.unload(); };

};

Click "Test Movie" from the "Control" menu to play the progress bar slideshow program. Observe that the first graphic appears immediately after you click the music download button, the second graphic appears (and the first graphic is removed) after 11 percent of the music has downloaded and the second graphic disappears when the music begins to play. Also note that the progress bar moves to the right as the music file downloads.