Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Flash Tutorials & Resources > Timeline Preloader   

Flash Tutorials

Basics

Animation & Effects

Actionscript

Creating a Website

Miscellaneous

Flash Articles

Free Flash Resources

Other Flash Resources

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.

 

 

 

  1. 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.

 

  1. 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.

 

 

 

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

 

 

 

 

  1. 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.

 

 

 

 

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

 

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

  1. 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!

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.