Groups » Flash Maniacs » Topics » Create A Preloader

Listing 1-14 of 14    1   of  1
Author Message
Flash Mod

M/22
,
Instant Message
Send Message
Reply with this quote Reply to this Post Posted:  Mar 25, 2007 7:49 PM
This tutorial has 3 parts to it:
Part 1:
Shows how to make just a standard LOADING text and explains the majority of the action script involved.

Part 2:
Shows how to add a dynamic text field that shows the % loaded for the flash file with one extra line of action script.

Part 3:
Shows how to add a loader bar that grows as the % loaded increases with one extra line of action script.
Flash Mod


M/22
,
Instant Message
Send Message
Reply with this quote Post a reply to this Topic Posted: Mar 25, 2007 8:01 PM
Set Up:

For this example, I am going to have the file to be loaded just be a large (1.1MB)file. That way it will be easy to see the preloader in action.

To start, you want to go to your Scene Panel and if you do not have your scene panel open then press Shift + F2 to display it.

By default, we are in Scene 1 well just to make life a little simplier, lets rename this scene "main"

Now click the + symbol at the bottom of the Scene Panel to create a new scene. Rename this scene "loader"
And drag the loader scene above the main scene. This will make sure that the loader appears before the rest of the flash file does.

Now make sure that you are on the loader scene and we will begin part 1 of this tutorial.
Flash Mod


M/22
,
Instant Message
Send Message
Reply with this quote Post a reply to this Topic Posted: Mar 25, 2007 8:35 PM

Part 1:
Creating a LOADING movie clip

In your loader scene, first place a static text field that says LOADING. Now press F8 to make it a movie clip and
we will just call it loading text. Now double click on the movie clip to go inside of it.

Leave frame one as is. Now go to frame 10 and add a new key frame then in this key frame add a . after the word loading. Do this a couple more times
spacing the frames 10 apart.

Ex:
Free Image Hosting at www.ImageShack.us

No go back to your main time line. Create a new layer and call it "Actions" and in the first frame of the Actions layer hit F9 to go into your actions panel.


Action Script:

stop();

myInterval = setInterval(preload, 100);

function preload() {
var current = _root.getBytesLoaded();
var total = _root.getBytesTotal();
var pctLoaded = Math.round(current/total*100);

if (current >= total) {
gotoAndStop("main", 1);
clearInterval(myInterval);
}
}


Action Script Explained:

stop();

Makes it so that the file doesn't automatically jump to the main scene.



myInterval = setInterval(preload, 100);

Here we are creating an interval for the preload function so that we can call the function again and again, and telling it that we want to call the function every 100/1000 second.



function preload() {
var current = _root.getBytesLoaded();
var total = _root.getBytesTotal();
var pctLoaded = Math.round(current/total*100);

}

Creates the function called "preload". We have to create a couple variables, one is set to be the number of bytes that are currently loaded, one is the number of total bytes that need to be loaded and the last is percentage loaded.
In order to get the pctLoaded variable, we need to do just a little basic math. So that we only get a nice rouned number with no decimal places, we need to use the Math.round command. Then the simple math is taking the variable current and dividing it by the the variable total and multiplying that by 100.



if (current >= total) {
gotoAndStop("main", 1);
clearInterval(myInterval);
}

And last but not least. We want to create an if statment saying that if the current number of bytes is greater then or equal to (you can just use == if you would like, >= is just a precautionary measure) the total bytes loaded then we will gotoAndStop on the scene labeled main on the first frame. And last, we simply need to clear our interval so the preload function does not keep getting called again and again.

Thats all there is to making a LOADING text preloader!

preLoader1.fla

Be sure to read parts 2 and 3 also!
Flash Mod


M/22
,
Instant Message
Send Message
Reply with this quote Post a reply to this Topic Posted: Mar 25, 2007 8:48 PM
Part 2:
Creating a % loader text field

Back in our loader scene, say you want to let your visitors know how much of your flash is left to load. Well this will show you how to achieve that.

Create a Dynamic text field and make it large enough so that you can fit 100% into it. And be sure to make it right aligned so that the % symbol doesn't jump around at all.
Give this text field an instance name of pct_txt.

Now all we have to do is add one more line of action script.

Right after your var pctLoaded line of code add this code:

pct_txt.text = pctLoaded + "%";

This says that the text property of the dynamic text field called pct_txt will say what the variable pctLoaded is and then it will have a % symbol at the end of it.

Thats all there is to making a % preloader!

preLoader2.fla

Be sure to read part 3 also!
Flash Mod


M/22
,
Instant Message
Send Message
Reply with this quote Post a reply to this Topic Posted: Mar 25, 2007 8:58 PM
Part 3:
Creating a loading bar

Back once again to our loader scene.

Draw a rectangle with whatever color stroke and fill you would like. For this example, we have used a black stroke and a blue fill color.
Make it a long rectangle like you would generally see a preloader bar look like.

Now select only the fill of the rectanle and press F8 to turn it into a movie clip. For this example we are going to name it simply "loader bar".

And give that movie clip an instance name of loaderBar_mc.

Now all we have to do is add one more line of action script.

Right after your pct_txt.text line of code add this code:

loaderBar_mc._xscale = pctLoaded;

This is saying that the x scale of the loaderBar_mc movie clip will be equal to the pctLoaded variable.

Thats all there is to making a loader bar!

preLoader3.fla

Thank you for reading this tutorial. I hope you find it very helpful with your flash animations. For any help with this tutorial or questions, please post only in this forum thread.

~Flash Mods
mike


M/23
Instant Message
Send Message
Reply with this quote Post a reply to this Topic Posted: Mar 25, 2007 9:45 PM
Nice tutorial, this is the <myspace>style</myspace> in which i make my preloaders! Forget all the frame jumping!
Ryan


M/22
Denver,
Colorado
Instant Message
Send Message
Reply with this quote Post a reply to this Topic Posted: Mar 25, 2007 9:47 PM
:D its the best way! haha
AMG


M/28
the 408,
California
Instant Message
Send Message
Reply with this quote Post a reply to this Topic Posted: Aug 25, 2007 7:30 PM
does this work with as3 or is it for as2?
mike


M/23
Instant Message
Send Message
Reply with this quote Post a reply to this Topic Posted: Aug 25, 2007 7:32 PM
AS2

if you need AS3 i can post one if you like.
AMG


M/28
the 408,
California
Instant Message
Send Message
Reply with this quote Post a reply to this Topic Posted: Aug 25, 2007 7:59 PM
that would be great thanks a lot.
Jul[y]™


M/90
Orange County,
California
Instant Message
Send Message
Reply with this quote Post a reply to this Topic Posted: Aug 31, 2007 3:46 AM
Is there a way to substitute the loading bar for a different animation?
Ryan


M/22
Denver,
Colorado
Instant Message
Send Message
Reply with this quote Post a reply to this Topic Posted: Aug 31, 2007 10:56 PM
July wrote:
Is there a way to substitute the loading bar for a different animation?


like what?
Jul[y]™


M/90
Orange County,
California
Instant Message
Send Message
Reply with this quote Post a reply to this Topic Posted: Aug 31, 2007 11:56 PM
Like a design that draws itself onto the stage. It was one of Copenhagen's old tutorials.
Listing 1-14 of 14    1   of  1

dspPostReplies v29