as in a circle that starts as a small slice of pie and then gets bigger untill its a full circle?
only program that I know of that lets you easily do this is 3dsmax, by creating a cylinder and adding a slice to it.
as in a circle that starts as a small slice of pie and then gets bigger untill its a full circle?
only program that I know of that lets you easily do this is 3dsmax, by creating a cylinder and adding a slice to it.
Hiya.
From your description I assume you want a cirlce (as in a flat, 2D circle) preloader to fill up in a circular fashion (like the pie you describe). I did something like this a while back, only with a ring/donut instead of the full circle. What I did was make a circle in Flash, then bisect it with a line vertically, then bisect it again horizontally. Then bisect it again, only at 45 degrees, then bisect again at 22.5 degrees, and so on until you have a slice at the size you want (the more you keep bisecting, the more, smaller slices you’ll have). All you need is one slice, so don’t worry about slicing up the whole thing, just slice down one quadrant of the circle (you could skip all the initial slicing and just cut out a slice with the correct, calculated angle, but its more fun cutting it up ).
Now you have a thin slice. You want to make it into a symbol. It is VERY important that the registry point of the slice is at the very tip.
Now all you have to do is script it so the slice is duplicated and rotated as the preloader progresses.
This will create the effect you want, but the preloader will fill up in discrete steps, as opposed to a continuous, motion (hmm…I don’t make much sense…). If you want a continuous, smooth loader you can wait for me to post an FLA with an example. It will give me something to do.
-Al
Well, actually, you could probably do it with the drawing API, but that would be a real pain :-\ I don’t see an easier way than yours, Al.
pom :asian:
And I meant to ask, Al: any connection between your title and Brood War?
thanks, that the same way my teacher came up with, takes too long compared to the basic
||||||||
preloader bar, but thanks for the explination, something I will probably do in the future:)
Well I threw together the smoth one I was talking about. Just drag the slider to simulate the page loading and you’ll see how it works. I think this one is cooler than the discrete one.
As for using the API, that WOULD be a pain, but a nice challenge in itself. Hmmm…
-Al
think there is a component on www.flashcomponents.net
or http://www.flashjava.com
here’s a code only solution:
MovieClip.prototype.drawMeter = function(t,l){
var p = l/t;
var r = 16;
var v = [[r,-r],[r,r],[-r,r],[-r,-r]];
var d = Math.ceil(p*4);
var s = this.getProgress(p);
with(this){
clear();
beginFill(0xE8E8CF);
lineTo(0,-r);
for(var i=0;i < d;i++){
lineTo(v*[0],v*[1]);
}
lineTo(s.x,s.y);
endFill();
}
}
MovieClip.prototype.getProgress = function(p){
var r = 20;
var s = Math.PI + (-p * Math.PI*2);
return({y:Math.cos(s)*r,x:Math.sin(s)*r});
}
MovieClip.prototype.drawCircle = function(r, x, y){
this.moveTo(x+r, y);
this.curveTo(r+x, -0.4142*r+y, 0.7071*r+x, -0.7071*r+y);
this.curveTo(0.4142*r+x, -r+y, x, -r+y);
this.curveTo(-0.4142*r+x, -r+y, -0.7071*r+x, -0.7071*r+y);
this.curveTo(-r+x, -0.4142*r+y, -r+x, y);
this.curveTo(-r+x, 0.4142*r+y, -0.7071*r+x, 0.7071*r+y);
this.curveTo(-0.4142*r+x, r+y, x, r+y);
this.curveTo(0.4142*r+x, r+y, 0.7071*r+x, 0.7071*r+y);
this.curveTo(r+x, 0.4142*r+y, r+x, y);
}
_root.createEmptyMovieClip("loader",0);
_root.createEmptyMovieClip("mask",1);
_root.mask.beginFill(0xfeefff);
_root.mask.drawCircle(16,0,0);
_root.mask.endFill();
_root.loader.setMask(_root.mask);
loader.onEnterFrame = function(){
if((i++) < 100){
this.drawMeter(100,i);
}
}
you pass drawMeter total and loaded bytes. that last bit is just for demonstration.
i don’t understand why it goes to the next frame before it’s done loading though
i made an example movie that has your code by itself on the first frame and then on the second frame there is a large KB size image and a stop();
the preloader plays and about halfway through the it goes to the next frame like the image has been fully loaded but the preloader is still filling up like it’s not fully loaded
:q:
all this code does is draw the pie …
but it should be easy enough to throw some actions in there too.
add an if statement block to drawMeter:
// in drawMeter()
if(t == l){
// when loaded actions
_root.nextFrame();
}
then a stop() action on the first frame should do the trick.
i like it a lot. nice job.
one more itsy bitsy thing though. when the load is complete and it goes to the next frame the pie is still there. how do i delete the pie? =)
oh yeah and i can’t figure out where you’ve specified the MCs position. i’d like to be able to move it so it’s not in the top left corner.
i can add a variable that tells the MC where to go, should i do that or do you have it specified somewhere in there that i’ve missed?
thanks for all your help
btw. did you learn to code all on your own or is your knowledge partially from a background in coding i.e. at a university or whatever. i’m asking because i would really like to improve my coding ability. i am about to graduate with a degree in graphic design and anything i know about computers and code is self taught but i was thinking about getting a second degree in computer science. any recommendations?
thanks again =)
lol … i tried to put the preloader script inside a movieclip and then changed all the _root’s to _parent’s that way i could put the movieclip on the main stage and skew it so the circle appeared to have perspective … but shrug it didn’t work
remove the movies with removeMovieClip();
i’ve learned from the internet, but a solid background in coding would make things go much faster. i’m constantly making silly mistakes and reinventing the wheel because i lack that background.
oh well, live and learn i guess.
try changing the _root’s to this’s, then it should work.
to which movieClip do i direct the removeMovieClip(); ?
do i need to tell it to remove all the ones you created?
what happened?
i didnt even skew it yet and the thing is all messed up
MovieClip.prototype.drawMeter = function(t,l){
var p = l/t;
var r = 16;
var v = [[r,-r],[r,r],[-r,r],[-r,-r]];
var d = Math.ceil(p*4);
var s = this.getProgress(p);
with(this){
clear();
beginFill(0xE8E8CF);
lineTo(0,-r);
for(var i=0;i < d;i++){
lineTo(v*[0],v*[1]);
}
lineTo(s.x,s.y);
endFill();
// in drawMeter()
if(t == l){
// when loaded actions
_root.nextFrame();
}
}
}
MovieClip.prototype.getProgress = function(p){
var r = 20;
var s = Math.PI + (-p * Math.PI*2);
return({y:Math.cos(s)*r,x:Math.sin(s)*r});
}
MovieClip.prototype.drawCircle = function(r, x, y){
this.moveTo(x+r, y);
this.curveTo(r+x, -0.4142*r+y, 0.7071*r+x, -0.7071*r+y);
this.curveTo(0.4142*r+x, -r+y, x, -r+y);
this.curveTo(-0.4142*r+x, -r+y, -0.7071*r+x, -0.7071*r+y);
this.curveTo(-r+x, -0.4142*r+y, -r+x, y);
this.curveTo(-r+x, 0.4142*r+y, -0.7071*r+x, 0.7071*r+y);
this.curveTo(-0.4142*r+x, r+y, x, r+y);
this.curveTo(0.4142*r+x, r+y, 0.7071*r+x, 0.7071*r+y);
this.curveTo(r+x, 0.4142*r+y, r+x, y);
}
this.createEmptyMovieClip("loader",0);
this.createEmptyMovieClip("mask",1);
this.mask.beginFill(0xfeefff);
this.mask.drawCircle(16,0,0);
this.mask.endFill();
this.loader.setMask(_root.mask);
loader.onEnterFrame = function(){
if((i++) < 100){
this.drawMeter(100,i);
}
}
the drawMeter method is a little funny… try this one:
MovieClip.prototype.drawMeter = function(t,l){
var p = l/t;
var r = 16;
var v = [[r,-r],[r,r],[-r,r],[-r,-r]];
var d = Math.ceil(p*4);
var s = this.getProgress(p);
with(this){
clear();
beginFill(0xE8E8CF);
lineTo(0,-r);
for(var i=0;i < d;i++){
lineTo(v*[0],v*[1]);
}
lineTo(s.x,s.y);
endFill();
// in drawMeter()
}
if(t == l){
// when loaded actions
this._parent.nextFrame();
removeMovieClip(this._parent.mask);
removeMovieClip(this);
}
}
i’ve inserted the removeMovieClip code too. although, if all this is happening inside another clip, and that clip doesn’t exist after frame 1, it’s not necessary to remove the clips.
you know now that i think about it, it would make more sense to put the if(t == l) code in the onEnterFrame action than in the drawMeter method. i kinda dillutes the purpose of the method.
but you know, whatever works.
Sbeener… Do you live to make other coders jealous? Or is it just a hobby of yours? :beam:
still doesn’t work … the pie looks all funny
look
shuga, you missed the _root in setMask, change it to ‘this’.
lib, thanks … i think… ; )
Sbeener: It was a compliment
:: Copyright KIRUPA 2024 //--