I had this neat idea to create a preloader which draws the outline of a box (with a given width, height and line style) according to the percetage loaded of the movie. Anyway Ive been fiddling with the drawing API trying to create something which draws a box…with no luck. Can someone please give mne a hand with the AS here?
What I have is pretty basic, purely an onEnterFrame basedfunction which increments the X and Y postion for the linTo function accodring to a given set of conditionals.
I cant see why my conditional doesnt work…Ive worked it out in psueado code…
boxWidth
boxHeight
currentXPos
currentYPos
onEnterFrame=function(){
if(currenXPos=boxWidth){
top must be drawn, start drawing right side (T-> B)
else if(currentXPos still equals boxWidth and now currYPos boxHeight){
right hand side must have been drawn, start drawing bottom (R->L)
}else if(currentXpos equals start x pos i.e. 0 and currYpos still equals bxHeight){
must have drawn bottom, now draw final left side (B->T)
delete onEnterFrame as finished
}
blah…is what I roughly have on my pad here…I hadnt got onto adding in the getBytesLoaded etc because I still couldnt get it drawing the box
nope, Im at work right now, so you know, I got to be working
Heres an alternate approach. I like working with %'s so this draws the box through a time variable from 0-1 or 0 to 100% completion. Each line (between x,y anchor points) is too drawn based on a segmented % of the whole.
This approach also draws no more than 4 lines at any given time asside from compounding little line on little line. It can also be easily converted into other shapes… like a star… (I think Ill add one in, heh)
time = 0;
anchors = [[0,0],[100,0],[100,100],[0,100]]; // square
/* star
anchors = [
[150.45,102.95],
[181.35,197.95],
[100.45,139.2],
[200.45,139.2],
[119.5,197.95]
];
*/
createEmptyMovieClip('square',0);
square.onEnterFrame = function(){
// increment, test for completion
// (preloader would use % here)
if ((time += .01) >= 1){
time = 1;
delete this.onEnterFrame;
}
// variables
var seg = Math.min(Math.floor(time*anchors.length), anchors.length-1);
var nextseg = (seg < anchors.length-1) ? seg + 1 : 0;
var segtime = (time-seg/anchors.length)*anchors.length;
// draw
this.clear();
this.lineStyle( 5, 0xFF0000, 100 );
for (var i=0; i<=seg; i++) {
if (!i) this.moveTo.apply(this, anchors[0]);
else this.lineTo.apply(this, anchors*);
}
this.lineTo(
anchors[seg][0] + (anchors[nextseg][0]-anchors[seg][0])*segtime,
anchors[seg][1] + (anchors[nextseg][1]-anchors[seg][1])*segtime
);
};
It seems i could quite easily rework your example with percentages for a preloader :)…Its very compact (fewer lines in comparison to the other)…And also pretty cool that it can create different shapes!
Ahah yeah he is smart just like yourself! You think using clear as he has done is necessary ?
it can help with performance. The overall shape will be lighter and less of a bog and can improve drawing performance as well (though you start to blur some edges when it comes to how many lines you are drawing in one frame and how many lines are just sitting there dragging you down); generally for things like this, clear is a good idea because you dont know how long a preloader might just be sitting there - it could take minutes - and a minutes worth of lines upon lines can be a bit much.
Ahah, gees you guys and girls (like me) need to get out…starting to get the hots for actionscript…lol
Its Mr Squiggle re-invented…but then again im not sure you guys have seen that kid’s rv series …its an aussie thing (some puppet that draws dot to dot pictures with his nose…anyway I wont get any more into that)
as it kept redrawing the lines