how to code a loading action in flash ?

Question

i am trying to design a website in flash , and would like to know how to design a loading flash movie , something like a circle rotating till the website loads . I might not be able to explain properly , but its like when you install a software , the installation bar that you get , how to get that on a website using flash or java script?

Answer 1

If you just want a circle rotating until the website loads, please don't use flash.

You should just have an animated gif that waits for the page to load then disappears and shows the content when everything is loaded.

Animated gifs are fully supported accross browsers and will be about 1/100th of the size of the flash animation.

Answer 2

Alright so you would need a preloader ( I am assuming you are using ActionScript 3.0). This will be a small SWF file that loads your main Flash file. Smallest implementations (like the following) are around 1-2 KB

So in your Flash IDE (Flash CS3,CS4,CS5) you want to create a new fla, lets call it preloader.fla. In this file you will want to have two layers. Name the first layer as actions and the second layer as content.

In your content layer just place a dynamic text field on the stage. Name it txt/percent or whatever you feel like... I am using txt.

In your actions layer you want select the first keyframe and open the actions (code) panel

Then you want to use the loader class to load the external file (your main flash movie) as follows

var ldr:Loader = new Loader();

To handle animations and so forth you will want to listen to the ProgressEvent. You will do this by listening to loading information within the contentLoaderInfo as follows

ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, update);

So as you main file's data gets loaded this event is fired . 'update' will be the function we will call to handle the progress in data.

A next event to listen to will be for when the loading of the main file has completed and we want to display it.

ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, display);

Then we have a function display which handles the completion and displays the main file.

The last thing will be to load the content ,e.g. main.swf.

ldr.load(new URLRequest("main.swf"));

Here we will have text field just show a loading of the bytes from 0 - 100%;

function update(e:ProgressEvent):void {
    var percent:Number = e.bytesLoaded / e.bytesTotal;
    txt.text = Math.ceil(percent*100).toString();

}

Below is the function that removes the textfield (txt) and adds the main.swf to the display list.

function display(e:Event):void {
    removeChildAt(0);
    txt=null;
    addChild(ldr);
}

Now you can change the txt in the content layer to something different if you want for example as you said a circle rotating...depends on how you want it displayed so I have placed some links below you can follow. Cheers.

Example 1 : [ Demo ] [ Source Code and Files ] Example 2 : [ Demo ] [ Source Code and Files ]