Hi,
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.
this.createEmptyMovieClip('square',0);
_root.square.lineStyle( 5, 0xFF0000, 100 );
_root.square.moveTo(0,0);
w=100;
h=100;
currX=0;
currY=0;
_root.square.onEnterFrame = function(){
if(currX==w && currY==0){
trace("_
|");
this.lineTo(currX, currY+=5);
}else if(currX==w && currY==h){
trace("_
|");
this.lineTo(currX-=5, currY);
}else if(currX==0 && currY==h){
trace(" _
|
-");
prevX==currX;
prevY==currY;
this.lineTo(currX, currY-=5);
}else if(currX==0 && currY==0 && prevY==100){
trace(" _
| |
- ");
delete this.onEnterFrame;//done
}else{
trace("_");
this.lineTo(currX+=5, currY);
}
};
Thanks in advance !
tough call. That looks messy. Its probably close but … its messy 
my path class would make that a snap. I dont know if you want to use that or make something more condensed on your own or not.
Ahah, yesh what I have up top is messy-very rough-! lol. Umm Im just after something compact that works, no bells or whistles… Any hints Sen?
Hey Trev, I still have you on msn from a couple years ago, possible to communicate to u via that?
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 
Well…Sen I have a solution proposed by another friend.
mc = _root.createEmptyMovieClip("box", 1000);
mc._x=200;
mc._y=200;
//required width and height
bWidth = 400;
bHeight = 300;
// total line length
bLength = (bWidth*2) + (bHeight*2);
mc.onEnterFrame = function() {
this.clear();
this.lineStyle(1, 0xFF0000, 100);
if (_root.getBytesTotal() > 0){
// percent of movie loaded
pct = Math.round((100/_root.getBytesTotal()) * _root.getBytesLoaded());
} else {
pct = 0;
}
// find the length of the line to draw from pct loaded
lineSize = (bLength*pct)/100;
this.moveTo(0, 0);
// line one
if (lineSize<bWidth) {
this.lineTo(lineSize, 0);
} else {
this.lineTo(bWidth, 0);
// line two
if (lineSize<bWidth+bHeight) {
this.lineTo(bWidth, lineSize-bWidth);
} else {
this.lineTo(bWidth, bHeight);
// line three
if (lineSize<(bWidth*2)+bHeight) {
this.lineTo(((bWidth*2)+bHeight)-lineSize, bHeight);
} else {
this.lineTo(0, bHeight);
// line four
if (lineSize<bLength) {
this.lineTo(0, bLength-lineSize);
} else {
this.lineTo(0, 0);
}
}
}
}
if (pct == 100) {
delete this.onEnterFrame;
}
};
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
);
};
Yes, Lexicon is very smart 
Cheers Sen.
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 ?
Anyway thanks again mate
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.
Ahh well thats great to know. I was thinking quite the opposite 
as it kept redrawing the lines
That is a beautiful piece of code Sen :hr:
I modeled it after you :love:
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)
Is it like Kermit’s magic finger? (no comments from the peanut gallery necessary). 
