Simple Flash Preloader using ActionScript

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

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.

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.

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

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.

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

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

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

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);
            }
};

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.

This resource is part of the Entheos Free Resources section. These resources & tutorials cover Corel Draw Tutorials, CSS Tutorials, Flash Tutorials, Fireworks Tutorials and Effects, Dreamweaver Tutorials, Design Ideas & Inspiration, Photoshop Effects & Web Design Tutorials.

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.