Simple Flash Preloader using ActionScript

1. Create 2 layers called actions and preloader. The actions layer will contain the action script and the preloader layer will contain the preloader.

 

 

 

2. In the first frame of the preloader layer. Select the rectangle tool and set the stroke color to black and fill color to a lighter shade and draw a rectangle as shown below.

 

3. Selecting both the stroke and fill of the rectangle press the F8 key to convert it to a symbol. In the name textbox, name the movie clip as preloader_mc and set the registration points to top-left corner and click OK to convert it to a movie clip.

 

 

 

4. Click the preloader_mc movie clip and in the properties panel, give it the instance name preloader.

 

 

 

 

5. Double click on the preloader_mc movie clip to go inside the movie clip. Once you are inside, click on only the fill area to select it and press the F8 key to convert it to a symbol. In the name text box, name the movie clip as loadBar and set the registration points to top-left corner and click OK to convert it to a movie clip.

 

 

 

 

6. Click the loadBar movie clip to select it and in the properties panel, give it the instance name loadBar.

 

 

 

 

 

7. Create a new layer called picture to display a picture after the preloader completes loading.

 

 

 

 

8. Insert a blank keyframe in the second frame of the picture layer and import a picture to the stage.

 

 

 

 

9. Select the first frame of the actions layer and enter the following lines of code

stop();
preloader.onEnterFrame = function()
{
            filesize = _root.getBytesTotal();
            loaded = _root.getBytesLoaded();
            preloader._visible = true;
            if (loaded != filesize)
            {
                        preloader.loadBar._xscale = 100*loaded/filesize;
            }
            else
            {
                        preloader._visible = false;
                        gotoAndStop(2);
            }
};

10. Test the movie by pressing Ctrl+Enter 2 times to simulate download or else the preloader would not be visible as you are directly loading it from the hard disk.

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!