preloader question

[chaego]

preload question
if anyone can help by all means please =)

just wondering how would u make a preload bar rounded instead of straight wut i mean is it loads instead of left to right it becomes a circle's outline ....i kno it has something to do with maskin but im clueless on the script part.... :o

[bluegel]

hey, have you done a search for preloaders on this site and many of the other flash websites, as i know for a fact that they have some really good preloader examples, that might be able to help you out.

look in tutorials and movies on sites

[Xenozip]

I see what you mean.

You want your preloader to display the outline of a circle. The circle starts at 1 pixle and draws the rest of the circle as the movie loads. Correct?

Hmmm.....
With using the mask method, I assume it has something to do with rotation.

Here's the easiest way I can think of doing it :
You could just have a circle cut into 2 pieces, each with their own instance name.
They both have to be the same size though, so what I would do is this :
create a circle and convert it to a MC, then duplicate the circle and add the duplicate into the main timeline with the other.
Edit both of the circles and cut one half out of the circle.
So, in circle1, cut the left half out, but make it so that there is something inside the MC so that it preserves the width and height of the circle. like, make a square in the lower/right corner of the MC the same color as your background -- then do the same with circle2 only for the opposite side.
overlap both circles so that it appears to be one singular circle.
tell the 1st piece to rotate depending on how much of the movie is loaded so that it overlaps the 2nd piece
once it fully overlaps the 2nd piece (180° rotation), then make it invisible (or remove it)
next, make a mask on the right side of the 2nd piece (where the 1st piece started), and tell the 2nd piece to rotate.

Hmm.. Yes, that's better than using 2 masks.
As for the mathematics..
if 0% bytes loaded = 0° rotation
and 100% loaded = 360° rotation
then each % loaded = 3.6° rotation.

So, to get a precent and a dagree, use :
perCent = Math.round(_root.getBytesLoaded()/_root.getBytesTotal()*100);
daGree = Math.floor(perCent*3.6);
_root.MyFirstCircleSlice._rotation = daGree;
if (daGree >= "180") {
_root.MyFirstCircleSlice._visible = false;
_root.MySecondCircleSlice._rotation = daGree;
_root.MySquareMask._x = "value"
_root.MySquareMask._y = "value"
}
then each % loaded will = 3.6° of rotation
The first will rotate untill it hits 180, then become invisible, and start rotating the second piece which will become masked by the MySquareMask.

-=----
Another way to do it would be with dots :
Hmm... Well one way to do it would be to say a bunch of if statements:
if
_root.getBytesLoaded > 10
then
_root.dot1._visible = true;

if
_root.getBytesLoaded > 20
then
_root.dot2._visible = true;

if
_root.getBytesLoaded > 30
then
_root.dot3._visible = true;

and so on in that fashion (10, 20, 30, 40, 50, etc and dot1, 2, 3, 4, 5, etc on up to 100% and dot10). Then, set the dots as movie clips in a circle going clockwise starting with dot1 through to dot10.

If you want the circle to appear like a circle instead of a bunch of dots, you could create a circle, then splice it and convert each splice to a symbol (dot1 through dot10). But using this method still makes the animation very choppy in comparison to the mask method.

And what I mean by splice is to select only a portion of the circle in flash, and convert just that portion into a movieclip. To get exact proportions, use the grid so that each piece is the same size.


Hope that works/helps.
Good luck!

[chaego]

thanks alot zenozip ill give it a shot

and blue gel i have searched this forum and others too and most of the tutorials i found are only on basic preloaders with bytes and load bars

[Xenozip]

Actually, after you posted that, I wanted to check it out for myself to see if it worked properly.

Here's exactly what I used :
perCent = Math.round(_root.getBytesLoaded()/_root.getBytesTotal()*100);
daGree = Math.floor(perCent*3.6);
_root.Piece1._rotation = daGree;
if (daGree >= 180) {
_root.Piece1._rotation = 180;
_root.Piece2._rotation = daGree;
_root.daMask._visible = false;
} Then, I created a circle 150 by 150 and a square 75 by 150.
I converted the circle into an MC, and placed a 2 by 2 square in the upper right corner of the MC (x 73, y -75), and cut the circle in half (deleting the right side, so the circle became a semi-circle shaped like a "C" 75x150).
I then copied the movie clip and gave it the instance name of Piece2, the original MC I named Piece1.
I then converted the black box to a MC and called it "daMask".

I then moved all three movie clips on top of one another, with daMask on top of both semi-circles.

The animation isn't incredibly smooth, since the rotation moves 3.6° for each % loaded. But, it is very simplistic, small, requires only 2 movie clips (3 instances), and it works. If you wanted the circle to draw more smoothly, you'd have to do it by half a percent, or quater of a percent, and so on..

If you wanted those dots inside the semi-circles to be invisible, you could just make them your background color or convert them to graphic symbols and give them an alpha of 0%. But, the dots do need to be in there so that the MC size remains a 150 by 150 square.

[chaego]

hey zenozip i couldn't get it work could u possibly upload the .fla file dat u made?

[Xenozip]

Sure.

Remember that when you test the FLA you're not going to see the loadscreen, because it's already on your harddrive.
To test it accurately, you have to push controll + enter twice, and set the debugging to 56k.

If you want it to play in reverse, switch the values around.