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.

Now building a website is as easy as 1-2-3!

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.


Looking for high-quality Flash Website Design? Choose from over 6000 templates!

Gorgeous Page Roll Image Transition Effect in Flash

Creating Page Curl Transition

Creating a Rotating 3D Planet in Flash

Creating Realistic 3D Planet

Best Flash Photo Gallery Website Templates

Best Flash Photo Gallery Website Templates

Burning Image Effect in Flash

maskmn_image055

Realistic Rippling Water Animation in Flash

r_water

Awesome 3D Flash Website Templates

Awesome 3D Flash Website Templates

 

Featured Template
Template # 55836
Type: PSD
Price: $11

Flash Photo Galleries