How to Create a Progress Load Bar in AS3

Written by mark stansberry
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create a Progress Load Bar in AS3
Use progress loadbars in Flash to let your Web visitors how long they will have to wait. (Comstock/Comstock/Getty Images)

Progress bars let your website visitors know how long they will have to wait for a picture, video or song to download before it can be viewed, heard or played. Web designers often include progress bars so visitors won't leave their site because of a perceived lack of content. You can make a progress bar with Flash, and by writing ActionScript code (AS3). The AS3 code used will depend on what type of content you are loading. In this example, a song is downloaded.

Skill level:
Moderately Challenging

Other People Are Reading

Things you need

  • Adobe Flash Professional (Versions CS3, CS4 or CS5)

Show MoreHide

Instructions

  1. 1

    Start Flash. Click "File," "New." Click the file type "Flash File(ActionScript 3.0)" from the "New Document" dialogue box. Click "OK."

  2. 2

    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" men. Type "ProgressBar" into the instance name text box.

  3. 3

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

  4. 4

    Click "Component Inspector" from the "Windows" menu. Type "Load White Rabbit" in the label text box.

  5. 5

    Select "Actions" from the "Windows" menu. Place your cursor on the first line of the "Actions" editor. Click and type this code to import the necessary flash utilities to use the Progress Bar:

    import fl.controls.ProgressBar;

    import flash.events.ProgressEvent;

  6. 6

    Type this code, starting at the next line in the "Actions" editor, to place a TextField on the Flash stage to be used to display the percentage of the MP3 music file downloaded:

    var ProgressStatus:TextField = new TextField();

    ProgressStatus.x = 200;

    ProgressStatus.y = 100;

    ProgressStatus.width = 400;

    add Child(ProgressStatus);

  7. 7

    Type the following code, starting at the next line in the "Actions" editor, to declare a sound object to hold the music file downloaded and to use as the source file for the Progress Bar to monitor loading progress with:

    var music:Sound = new Sound();

    ProgressBar.source = music;

    var musicFilelocation:String = "http://173.192.206.135/cgi-bin/dl.cgi/ze6fl4bvyep6nqwg7fcgcwlb4msqhqpawhws2aeogy/z6ipwi6m53na.mp3";

    var musicrequest:URLRequest = new URLRequest(musicFilelocation);

  8. 8

    Type the following code, starting at the next line in the "Actions" editor. This will detect when the music file has completed downloading; instruct Flash to begin downloading the music file when the load Sound button has been clicked; update the Progress Bar on the percentage of the file downloaded and begin playing the music file after it has completed downloading.

    ProgressBar.addEventListener(ProgressEvent.PROGRESS, progress Handler);

    ProgressBar.addEventListener(Event.COMPLETE, soundLoaded_fn);

    loadSound.addEventListener(MouseEvent.CLICK, getSound_fn);

    function progress Handler(event:ProgressEvent):void {

        ProgressStatus.text = ("File Loaded is " + ProgressBar.percentComplete + " Percent Complete");
    

    }

    function soundLoaded_fn(event:Event):void {

    music.close();
    
    loadSound.enabled = false;
    
    music.play();
    

    }

    function getSound_fn(event:MouseEvent) {

    music.load(musicrequest);
    

    }

  9. 9

    Copy and paste this code into the "Actions" editor to ensure that the Progress Bar program runs error-free:

    import fl.controls.ProgressBar;

    import flash.events.ProgressEvent;

    var ProgressStatus:TextField = new TextField();

    ProgressStatus.x = 200;

    ProgressStatus.y = 100;

    ProgressStatus.width = 400;

    add Child(ProgressStatus)

    var music:Sound = new Sound();

    ProgressBar.source = music;

    var musicFilelocation:String = "http://173.192.206.135/cgi-bin/dl.cgi/ze6fl4bvyep6nqwg7fcgcwlb4msqhqpawhws2aeogy/z6ipwi6m53na.mp3";

    var musicrequest:URLRequest = new URLRequest(musicFilelocation);

    ProgressBar.addEventListener(ProgressEvent.PROGRESS, progress Handler);

    ProgressBar.addEventListener(Event.COMPLETE, soundLoaded_fn);

    loadSound.addEventListener(MouseEvent.CLICK, getSound_fn);

    function progress Handler(event:ProgressEvent):void {

        ProgressStatus.text = ("File Loaded is " + ProgressBar.percentComplete + " Percent Complete");
    

    }

    function soundLoaded_fn(event:Event):void {

    music.close();
    
    loadSound.enabled = false;
    
    music.play();
    

    }

    function getSound_fn(event:MouseEvent) {

    music.load(musicrequest);
    

    }

  10. 10

    Click the "TestMovie" option in the "Control" menu to download the music file and watch the Progress Bar move from left to right as the file is downloaded.

Tips and warnings

  • If the MP3 file on the website you are accessing has moved, the music file will not play. You will have to use a different website address and MP3 file name in the musicFilelocation variable in the code.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.