Preloader using ONLY the drawing API

[Warangel]

Drawing API Preloader

Recently, I have noticed that my work has become very thin, which is a good thing. I think one of the best things about Flash is the small file sizes. My average project is about 14k nowadays. A lot of this has to do with organization, and with managing what content is loaded when. So I got to thinking, why not use the drawing API in Flash MX to create the preloader at runtime, instead of wasting file size for something that is only seen briefly. This tutorial will teach you how to do just that.

STEP1:

Open a blank document in Flash MX. Please add 10 frames, putting a keyframe in frame 10. Import a relatively large MP3 into frame 10. The reason we are doing this is to actually have content to preload. Otherwise, it is quite difficult to see preloading occur.

STEP2:

This is where the fun begins. You will notice I put this preloader in a function. Is that necessary? Well, no. You could just put it wherever you need it. I put it in a function, so that I can call it at anytime from anything. Just more convenient.
In that function, we start by declaring some global parameters.

function preloader() {
startX = 100; // Where the Preloading bar starts
startY = 100;
barWidth = 250; // How wide do you want the bar to be?
barHeight = 10; // How tall do you want the bar to be?
ptotal = this.getBytesTotal();

This piece of code sets up the drawing API to know at what X and Y coordinates we want to start drawing our preloading bar, how wide it will be, and its height. We also define ptotal as the total amount of bytes for the object we wish to preload.

this.createEmptyMovieClip("preloadBar", 2);

Next, we create an empty Movie Clip (MC) to contain our preloader.

this.createTextField("percentText",4,97,80,30,20);

The preceding code creates an empty textField to hold a numerical representation of the percentage loaded.

I then chose to use an enterFrame event to run the preloader. You all probably know by now how much I prefer to use setInterval, but for something small like this, I just went with enterFrame.

// this function runs every frame until it is done loading.
this.onEnterFrame = function() {

Every frame an if statement is run against a condition. This condition is that if our amount loaded is equal to the total amount AND the total amount is not equal to zero, do something. Why do I add that extra condition? Simply because when you first run your movie, the loaded AND the total will equal zero for the briefest of seconds, and I don’t want Flash to just skip over my preloader entirely.

if (ploaded == ptotal && ptotal != 0) {
preloadBar.removeMovieClip();
percentText.removeTextField();
this.onEnterFrame = null;
} else {
ploaded = this.getBytesLoaded();
percent = Math.round((ploaded/ptotal)*barWidth);
percentText.text = Math.round((ploaded/ptotal)*100) + "%";
// this is the drawing API, that will draw your preloading bar for you.

As you see above, if the object is loaded, the enterFrame is nulled so it won’t run anymore, and the preloader is removed from the stage. It is the else statement that is interesting. The first line simply gets how many bytes are loaded this frame, and then percent is defined through an equation each and every frame.
Below, is the drawing API code we will use. The first thing I do is clear whatever has already been drawn in my MC. This isn’t necessary in some cases, but I do it anyway to ensure minimal memory usage.

preloadBar.clear();

The moveTo command tells our drawing API where to start drawing. It refers to the arguments we specified at the beginning of this tutorial.

preloadBar.moveTo(startX, startY);

BeginFill defines the colour of our bar, and how much alpha it will have. Our tutorial bar is red, with 100% alpha, so it is completely solid.

preloadBar.beginFill(0xFF0000, 100);

This next part, with the lineTo actions, draws our rectangle. You should notice however, that the width of this bar is defined by percent, which we know increases every frame, causing our bar to grow as it loads.

preloadBar.lineTo(percent+startX, startY);
preloadBar.lineTo(percent+startY, startY+barHeight);
preloadBar.lineTo(startX, startY+barHeight);
preloadBar.lineTo(startX, startY);
preloadBar.endFill();

}
};
}


STEP3:

We call the function in frame one to start it running. And that’s it. To test this preloader, press CTRL+ENTER on your PC, then when it is playing, press it again. This causes Flash to simulate real-time downloading of your movie, so you can gage how it plays online. If you are not familiar with this, read up on the Bandwidth Profiler.

// Call the function.
preloader();
stop();
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[nomi]

Yes.Warangel - this is worth of the time you spent on it.Good thing - worked without ANY problems.You're truly the master of actionscript.

[Warangel]

Actually, Nomi, I did notice one thing wrong with it unfortunately. If you move its position, it screws up. I am trying to figure out why now.

Master of actionscript? Hardly. I am the least among my peers. Thank you for the compliment. I do what I can, and try to share as much as possible.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[Mystique]

I love your work!!! I can really use this preloader... I do have some questions...

Once it reached the text at 100%.. the % was cut off. Also, I placed a video clip on frame 10 and it didn't show up at all. Could it be because you have a stop() action at the end of the code?

Also, how can you make the progress bar with a frame around it to give the user a visual "indicator" of how much more the bar needs to grow? Can you change the font of the text field?

Thanks, sweetie!
_________________

[Warangel]

Lots of questions. I love it.

The 100% thing is coz the textField isn't wide enough and I didn't use autoSize for it.

It didn't play because in the If statement that removes the clip and textfield, I didn't tell it to go and play or anything. It just sits there.

You could use the same createEmptyMovieClip command to create a holder for the bar, and place it the same way. You would probably change the barWidth to be equal to your holder._width so that they line up properly.

Yes, you can use all of the text formatting codes available to MX to change the text color, or the bar colour, or anything you want. That is why I did it this way, as it is fully extendible.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[Mystique]

My Master, You know that me + Code = MUD!!!

Can you please add the code to make the text field autosize, to tell it to go and?

I'll try to figure out how to make the boarder around the bar... but I may need some guidance Master. The force is week in Florida today

Thanks,
Your young Padawan
_________________

[Warangel]

lol. You had your chance at being Padawan, but decided getting a life was more important. How ironic you butter me up now. Send your FLA to me and I will make the changes for you, then you can post it here for all to see.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[K-dog]

[Warangel]

Yeah well, I am just jealous of all you people with lives I guess.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[nomi]

Did i give this topic it's life ?
Anyway it works well for me.But of cos i'm not gonna use it.

[Kim Raznov]

Okay, I understand most of this preloader, but ...

first of all.... if I have a movie that is 760X420 and I want the loader bar to be centered on the screen.. why if I change the startX and startY variables to say 380 and 100, does it give me a strange shape... aren't these variables setting the x and y starting postitions on the stage.

second....when you get to the part with the line to actions....
I want to make the loaderbar fill in vertically instead of horizontally, but I am lost here...I don't understand how to interpret these lines???


preloadBar.lineTo(percent+startX, startY);
preloadBar.lineTo(percent+startY, startY+barHeight);
preloadBar.lineTo(startX, startY+barHeight);
preloadBar.lineTo(startX, startY);


Thanks, KIM

[Warangel]

Hi Kim. I don't know why the strange shape occurs. I have been working on this.

The other four lines are basically your values for the rectangle. You define the points for the rectangle.

startX = 0;
startY = 0;
percent is a standard preloading formula;
barHeight is how tall you want your bar to be, say 10 in this case.

preloadBar.lineTo(percent+startX, startY);
preloadBar.lineTo(percent+startY, startY+barHeight);
preloadBar.lineTo(startX, startY+barHeight);
preloadBar.lineTo(startX, startY);

So you can see you are constantly redrawing the rectangle, and the only values that change are percent, which is what causes the bar to grow. To make this vertical, you would just rearrange the values.

Start by making your bar statically, then work on using values.

preloadBar.lineTo(10, 0);
preloadBar.lineTo(10, 200);
preloadBar.lineTo(10, 0);
preloadBar.lineTo(0, 0);
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[Kim Raznov]

I'm sorry Marcus, I am still totally confused. The four lines of code...


preloadBar.lineTo(percent+startX, startY);
preloadBar.lineTo(percent+startY, startY+barHeight);
preloadBar.lineTo(startX, startY+barHeight);
preloadBar.lineTo(startX, startY);

I don't understand how they draw the rectangle.

Is there another way you can explain it. I mean can you translate it into common language for me maybe.. I just can't see how it draws the shape. Am I making any sense? I am totally frustrated. I tried a few static examples with very strange results.

The one example in the help file draws a triangle.

moveTo (200, 200);
lineTo (300, 300);
lineTo (100, 300);
lineTo (200, 200);


I tested it.. it does draw a rtriangle.. but I absolutely do not understand how. I mean in what order does it draw those lines.. I tried sketching it out even.

Please help.

KIM

[Warangel]

ok, if you have some grid paper, it will help. The drawing API places the points. Once all the points are made it fills them all in. This would be easier if I were sitting with you to draw on that graph paper.

From the help file:

moveTo (2, 2);
lineTo (3, 3);
lineTo (1, 3);
lineTo (2, 2);

I removed the hundreds at the end to translate this into grid blocks. So start by drawing a point over two blocks, then down two blocks. Then draw another point at the interesection of three, three. Think Battleship. Once all your dots are finished, connect the dots. You will have a triangle. This is then filled.

The rectangle simply adds on extra point. I hope this helps out.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[Kim Raznov]

Oh... now I see. I thought that the lineTo and the two coordinates were drawing a line. But they are placing point on the grid and then it is being filled in.

I am going to play with it a bit and try to make the rectangle fill vertically now.

By the way... what is Diaries of War all about... I really like the animation.

KIM