Preloaders!

[h1]Preloaders
Easy[/h1]

Here it is!

<a href="http://graphicaddicts.net/ssj/Preloader/preloader.swf" target="_blank">http://graphicaddicts.net/ssj/Preloader/preloader.swf</a>
Just so you can see it load =]!

Idea
To make a bar stretch to the percentage of the total loaded bytes. Okay, that’s just the weird way of saying it. I’m sure you all know what a Preloader is. You’ve seen them, you use them, and you love them. But can you make them on your own? If you can, then why are you reading this? If not, then this tutorial is where you want to be!

Need to know

Variables
Movie Clip Properties (IE: _xscale, _yscale)
Basic Action Script

[/color]

Setup
Okay, this is very simple. Start by making your main timeline have 2 key frames. Now, on the first keyframe, add this:

Code:

stop();

Just that, and on the frame itself.
Next up, make the preloader!
Start off by drawing the basic preloader outline, here's what mine looks like right now:

Screen Shot

If you notice, that's a dynamic text box. I converted it to static right after I put the text I want in it. I used a dynamic text box, because I can size it, and it won't change automatically.

Now, select all of your preloader, and press F8, this will bring up the “Convert to Symbol” menu. Select Movie Clip, name it whatever you like, for the sake of this tutorial, I named it “Preloader”.

Double click the new Movie Clip to 'go into' it. Now, you have all your stuff in a new timeline! There are a few things we need to do from here. First, let's make a new layer BELOW the current one. Here, use the rectangle tool and make the bar itself. I did this because if you look, my preload bar isn't an even square. This will give it a 'perfect fit' effect:

Screen Shot

Now, I convert that loading bar into a Movie Clip, and I put the 'Registration' option to the left.

Screen Shot

Give that new Movie Clip any instance name, but I will use "bar".

Now, touch up the rest of the preloader, mine ended up like this:

Screen Shot

Here are the Dynamic parts. Insert a new layer, above the loading bar, but below the preloader graphics. Here's a screen shot of the dynamic text properties:

Screen Shot

Position the text box over the bar, but under the graphics. I use white, but that's because at the end, the background of the flash will be black, oh, and the instance name can be anything, but I used "pre_info". Just a bit more to go before I do the scripts! Insert another new layer above all of them. Now, insert a keyframe in the top layer (for frame 2), a normal frame (F5) in the other three. Now, insert another keyframe in the top layer (frame 3 now), a normal frame in layer 2 (the one with the graphics), a keyframe in layer 3 (with dynamic text), and a normal frame in layer 4(with loading bar). Confused? Good. Here's a screen shot of the timeline once you're done:

Now, to fill these frames with what's necessary!
(In accordance with my above screen shot):
Actions layer: Leave Blank for frames 1, 2, and 3
Graphic: Leave the same for 1 and 2, and 3
Text: Leave the same for 1 and 2, but on three, replace it with a 'Play' button. <-- Note that I made a Movie Clip because I'm adding an effect to it. See this topic to know what I'm doing: Here
Bar: Leave the same for 1, 2, and 3

[/color]
Action Time!
Okay, here's the fun part! Actions! Add this to the first frame in the "Actions" layer:

Code:

per_load = Math.floor(_root.getBytesLoaded()/_root.getBytesTotal()*100);
pre_info.text = per_load+"% / 100%";
if (per_load != 100) {
bar._xscale = per_load;
} else {
bar._xscale = 100;
gotoAndStop(3);
}

And add this to the second frame:

Code:

gotoAndPlay(1);

Okay, you're wondering what all that is...so here's the part where I explain it bit by bit...but instead of giving it all at once, I'm giving the script as I explain it! So, in this part, I create a loop! It starts off with the

Code:

per_load = Math.floor(_root.getBytesLoaded()/_root.getBytesTotal()*100);

part. This is setting the variable "per_load" to the Number of Bytes Loaded, divided by the Total (giving a decimal), then multiplied by 100, making it a percentage! Now, I've also put some Math in there, Math.floor() is round down. It will, no matter what, round down. This keeps it even. Next up is a very east if statement. saying that if the movie isn't fully loaded, just go on set the _xscale of our "bar" Movie Clip to "per_load" (it's a percentage, and that's how _xscale works, by %!). And if it is fully loaded, go to frame 3! Now, this is where the loop comes in. According to the Movie Clip's auto-play, it will go to the next frame (2), which tells it to go back to 1, and keep playing! See how it loops?

Now, add this to the button on frame 3:

Code:

on (rollOver) {
this.gotoAndStop(2);
}
on (rollOut, dragOut) {
this.gotoAndStop(1);
}
on (press, dragOver) {
this.gotoAndStop(3);
}
on (release) {
_root.play();
}
onClipEvent (enterFrame) {
if (this._currentframe == 1) {
if (this._alpha>50) {
this._alpha--;
}
} else if (this._currentframe>1) {
if (this._alpha<100) {
this._alpha++;
}
}
}
onClipEvent (load){
this.stop();
}

If you remember form before, I explained what this script does in another post. If you don't want to use it, you don't have to. Now, go back on the main timeline, go to frame 2, and just draw something. For the sake of testing the preloader, I imported some music (to keep filesize up). And, add a "stop();" on frame 2 (main timeline). Well, that's about it, my preloader is at the top.

Oh, as stated in the flash, that’s Long Beach Dub All Stars – Sunny Hours.

If you like this tutorial, please Click Here to register.

Click the link below to download the Flash files for this tutorial. Note: Music has been removed for the download.
Preloaders FLA

Graphic Addicts Forums