In this tutorial we will learn how to create a preloader bar with percentage in flash 8 with action script.

Step 1

• Create a new document (Ctrl. + J), of size 350*300 pixels
• Use as background color #FFFFFF. Example Fig 1.

Fig 1

Step 2

• Now create a New Symbol (Ctrl + F8 or Insertar >> Nuevo Símbolo)
• Name preload.
• Type Movie clip. Example Fig 2.

Fig 2

Step 3

• The following step is to draw a Rectangle of 125 * 15 pixels, this rectangle will be the loader see Fig 3.
• Place the rectangle in coordinated X = 0.0 y Y = 0.0.

Note draw the rectangle without border.

Fig 3

Step 4

• To select the rectangle and to press (F8 or right button of the mouse >> Convert to Symbol), see fig 4.

Fig 4

Step 5

• Place the Name now (bar) and Type Movie clip.
• Select the part indicated in Registration, See Fig 5.

Fig 5

Step 6

• Write like Instance name (bar) Fig 6.

Fig 6

Step 7

• Change the name of the Layer 1 (preload).
• It introduces a field of Dynamic Text under the bar. Fig 7
• Var: txt.

Fig 7

Step 8

• Create a new layer above preload layer and name it perimeter, hide the preload layer.
• Draw a rectangle without filler, the dimensions will be 125 * 15 pixels see Fig 8
• Place the rectangle in coordinated X = 0.0 y Y = 0.0.

Fig 8

Step 9

• Now return to the scene and change the name of the Layer 1 (preload).
• Click on the symbol (preload) in the Library window, and drag it onto the scene.
• Place the symbol in coordinated X = 170.0 y Y = 190.0.
• Select the symbol (not the fotograma); open the bar of actions and to insert the following code.

onClipEvent (load) {
b_total=_root.getBytesTotal();
}
onClipEvent (enterFrame){
b_loaded=_root.getBytesLoaded();
if(b_loaded >= b_total){
_root.gotoAndPlay(“start”);
}else{
clip=(b_loaded/b_total)*100;
bar._xscale=clip;
txt= Math.floor(clip)+” % loading”;
}
bar._xscale=(b_loaded/b_total)*100;
}

Step 10

• Create a new layer above preload layer and name it actions,
• Select the fotograma and in the bar of Actions – Frame insert stop();  Fig 10
  

Fig 10

Step 11

• Insert an empty key fotograma (F7) in the frame #4.
• Select the fotograma and in the bar of Actions – Frame insert, See  Fig 11

gotoAndPlay(“start”);

Fig 11

Last Step

• Create a third layer and to name image.
• Insert an empty key fotograma (F7) in the frame #3.
• Label this fotograma with the start name, Label type Name.
• In this fotograma import an image (ctrl. + R), the dimensions of the image are (350*300 pixels).

If you want to see your project press Ctrl. + Enter, the loader is observed if you press 2 times ctrl. + Intro

Download the project preload.zip

How to preload the main movie with levels all at the same.

Step 1

Put a stop(); action in the first Keyframe of the movie(s) being loaded and nothing else. No movie clip, no graphic, no music or picture but just an empty Keyframe and a stop(); action. Then you load the movies you want. You can load all the movies at once or just a few.

Step 2

This  is the code to preload the movie(s), put this code on your preloader:

onClipEvent (load) {
// Load Three movies
loadMovieNum (“Music.swf”, 1);
loadMovieNum (“Music.swf”, 2);
loadMovieNum (“Music.swf”, 3);
}

onClipEvent (enterFrame) {
// We devide it by 1000 to get rid of the decimal numbers
Total = Math.floor(_level1.getBytesTotal()/1000)+(_level2.getBytesTotal()/1000)+(_level3.getBytesTotal()/1000)+(_root.getBytesTotal()/1000);
Loaded = Math.floor(_level1.getBytesLoaded()/1000)+(_level2.getBytesLoaded()/1000)+(_level3.getBytesLoaded()/1000)+(_root.getBytesLoaded()/1000);
Percent = Math.floor((Loaded/Total)*100);
_root.PercentDisplayTwo = int(Loaded)+” KB “+”  |  “+(Total)+” KB”+”  |  “+(Percent)+” %”;
if (Percent == 100) {
// Have a frame lable inside the loaded movie so you can park it
// and call it when ever you want
_level1.gotoAndStop(“One”);
_level2.gotoAndStop(“One”);
_level3.gotoAndStop(“One”);
_root.play();
}
}

In this toturial We will learn how to make simple preloader, simple preloaders are useful with small-sized flash files.

Note: With big files, you should always use the “Percentage Preloader”. A percentage indication gives the viewer an idea of how big the file is and whether he wants to wait for it to complete or not.

Step 1

We’re going to place the preloader on the first scene and call it “preloader”. The second scene is where all your content goes, call it “scene“. Example  Fig 1.

Fig 1

When done with the renaming, keep the selection on “preloader” as that’s the scene we’re going to work on in the following steps.

Step 2

Type “Loading“  Example in Fig 2.

Fig 2

Step 3

• Right click on the second frame and select “Insert KeyFrame“.

Do the same with the third and forth frames.

In this toturial We will learn how to make a percentage preloader with Flash MX components.

Things we use:

1. ready-made extension
2. The Loader Extension .mpx file
3. To use the .mpx file, we  need the Extension Manager
   

Download Loader Extension+Extension Manager .zip

What we will do:

• Download the Flash Loader component .

Step 1

After completing the installation of the Extension Manager, and successfully setting up the .mpx loader file, we should be able to see the loader component from the drop-down menu of the Components (Go to  Windows> Components, or press ctrl F7)

Fig 1

And that’s our “percentage preloader” component.

Step 2

We will create two layers as shown in Fig 2 .

Fig 2.

(Go to Control>Test Movie)

Make sure you select “show streaming” in order to see the preloader in action.

Note: If you want to change the preloader text color go On the Actions layer of the loader component, modify the following action on line 31 :

Change this :

this.mTextFormat.color = this.bcolor;

With this:

this.mTextFormat.color = 0×999999;

Today if your flash exceed 700 KB (the size of a larger picture), is if you put a Preloader.

Actionscript 3 is very simple in the first frame put the code

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);

function onProgress(e:ProgressEvent):void{
	var loaded:Number = e.target.bytesLoaded;
	var total:Number = e.target.bytesTotal;
	var pct:Number = loaded/total;
	loaderMc.barMc.scaleX = pct;
}

function onComplete(e:Event){
	play();
}

Where “loaderMc is a MovieClip that contains another MovieClip” barMc. To make things interesting, “barMc” you put on a mask layer in which you can draw like you want to show your progress bar.

Circular Dynamic Preloader Tutorial – Flash ActionScript 3.0 Website Content Loader

If you use flash to create web animations or websites then you really need to know how to make and add a preloader to it. Everyone doesn’t have a superfast internet connection and adding some information that there is something loading keeps the viewers stay for it. In this tutorial I’m going to show you just how to create a simple preloader.

Step 1

Open up the animation you wish to add a preloader to. I’m going to use an animation I have for my podcast intro.

Step 2

Open the Scene panel by going under Window > Other Panels > Scene.

Step 3

Here you will see that there are already a scene present with your animation, it’s currently called Scene 1. Double click the name to rename it to ”animation”. Click the little plus icon (circled in red in the figure above) to add a new scene. Name this ”preloader” (without the quotes, all in lowercase). Then after doing that, click, hold and drag it above animation scene to make it load before the animation, which is what we want for the preloader.

Step 4

Now that we have our new preloader scene set up properly, click on it to get working in it. If you have any backgrounds in your other animation that you wish to have in the preloader, add them in again. However be aware that it should be as lightweight as possible!

Step 5

Now we are going to be designing the main preloader. Start by making a new layer and call it ”loading graphic”. After that, grab the text tool (T) and add the text ”Loading” or similar to your page and position it where you want. The properties box should have the type set to static (as seen in the graphic above).

Step 6

Next, we are going to be adding the text box that will make the loading percentage appear. Create a new layer above the loading graphic layer and name it ”percent”. Grab the text tool (T) and where you want it (probably below the loading text) type the text 100 %. The reason for typing 100 % is pretty simple. It is the longest you will have to go, so you can now style it to your liking. Finally, change the text type from Static Text to Dynamic Text and remove the text you had entered before and scale the box as wide as needed.

Step 7

To be able to control the input in the dynamic text field we just created later with actionscript, we need to give it an instance name. So in the box highlighted in red above, type in ”loadingPercent” (without the quotes, but with a capital P).

Step 8

Now it is time to put all of this together and create the loader with a little bit of actionscript. Create a new layer and call it ”actions”. We also need to expand the timeline because we want an action to happen after we’ve loaded it all. So click on the second frame on the actions layer and press F6 to add a new keyframe. Next click on frame two on the percent layer and shift-click the one on the loading graphic layer. Then press F5 to create a new normal frame there. Your layers panel should now look like the image below.

Step 9

Click back on frame one on the actions layer and bring up the actions window, either by going to Window > Actions or by pressing Option + F9 (PC: Alt + F9). In the actions panel, type the following code:

percent = Math.floor(getBytesLoaded()/getBytesTotal()*100);
loadingPercent.text = percent + " %";

What this code will do is calculate percent, based on the amount of bytes that are loaded, divided by the amount of total bytes of the file, multiplied by 100. Then on the second line it is saying that the variable loadingPercent (which is what we caled the dynamic text field above) is text and that it should have the output of what you get from the percent calculation at the first line and add the percent sign at the end. Relatively simple.

Step 10

Now we do have our basic preloader and we can go ahead and press Command + Enter (PC: Ctrl + Enter) to preview our movie. What you will notice though is that it doesn’t take us to the animation once it has loaded. Well, that’s because we haven’t told it to.

So click on frame two of the actions layer and again bring up the actions panel. Paste the following lines of code in there:

if (percent ==100){
	gotoAndPlay("animation",1);
}else{
	gotoAndPlay(1);
}

To break this down. It is a rather simple if/else statement. What it does is say if the value of percent equals 100 then goto and play the scene names animation and start at frame 1. If percent doesn’t equal 100, then go back and play frame one of this scene.

Step 11

Now that we have added this code we can go ahead and test our movie again and the preloader should load and after take us to the animation.

This is really a simple preloader that could be animated a bit further but just remember to keep it lightweight. People don’t want to wait for the preloader or to preload the preloader.

In this tutorial, I’m going to show you how to build a preloader. You should have your own preloader in minutes!

1. Create a new document.
2. Name the first layer to “loader bar”
3. Draw a line. This line will be our preloader bar.
4. Convert the line into a movie clip. Set the registration point to the top left corner.
5. Give the line an instance name of “preloaderBar”.
6. Create a new layer called “actions”
7. Type the following in the “actions” layer

preloaderBar.scaleX = 0;
var loader = new Loader();
loader.load(new URLRequest("main.swf"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
addChild(loader);

Explanation: First we set our preloader’s X scale to zero. This way, the user can’t see the preloader at the beginning of the loading process. Then, we create a Loader object. The Loader object is used to load SWF files or image files. After the Loader is created, we tell it load our main movie (main.swf). Then comes the important part, we assign event handlers for the loader. To be more specific, we are using the “contentLoaderInfo” to access loading progress information and statistics. In this case, we want to know when the loading is still in progress (progressHandler) and when the loading is complete (onCompleteHandler). Last, we add the loader to the stage.

NOTE: You must have the “main.swf” file in the same directory as this loader file!

8. Now that we have our loader ready, we can write the functions that are responsible for animating the preloader. Type the following

function onCompleteHandler(e:Event):void {
	preloaderBar.visible = false;
}
function progressHandler(e:ProgressEvent):void {
	var per = e.bytesLoaded/e.bytesTotal;
	preloaderBar.scaleX = per;
	loader.visible = true;
}

Explanation: The “onCompleteHandler” is called when the loading is done. In this case, we don’t want to show the user our preloader anymore, so we make it invisible. The “progressHandler” is called everytime the loading progresses. Here, we simply calculate the percentage that has been loaded (loaded/total size). Then, we assign into the preloader’s X scale property the precentage value. So when the percentage is 1 (loading is done), the “preloaderBar” will be at full width (scaleX = 1).

9. Test your movie!

NOTE: You can simulate a download in the Flash IDE. Test your movie and go to View-> Simulate Download.