Awesome menu, any ideas?

[JustinM]

I've come accross a real cool menu on dewars.com. http://www.dewars.com/history/ go here and click on the Timeline button. Anyone know where I could find some sort of tutorial that shows how the little placekeeper moves along the arch as you drag it?

[lunatic]

My guess would be a basic slider bar like this one:

http://www.kirupa.com/developer/mx/slider.htm

But the path is circular instead of a straight line. You'd have to change both the _x AND _y properties, instead of just _x like the tut, but functionality is the same.

:}

[Voetsjoeba]

Interesting menu ... let's see if I can pull something up ...

[scotty]

here is just a rough start.
works if you roll over the red bar

scotty(-:

[lunatic]

Sweet Scotty! You are quick!

But how hard would it be to modify so that the menu moves only when a symbol on the half circle is dragged?

I think that's the functionality that Justin is looking for. (-:

[scotty]

i know, like i said, it was just a rough start. dragging will be hard, at least for me, but i have some ideas. i'll let you know if i've figured it out.
(and in the meantime i stay hoping that Voetsjoeba figures something out)(-:

scotty

[JustinM]

Nice start Scotty. You guys are amazing.

[Voetsjoeba]

Here's some code that recreates the effect ... all AS, so just copy and paste on the first frame of a new file ...



d = 0;
straal = 200;
centrum = {x:350, y:250};
hoek1 = Math.PI+(Math.PI/2);
//--------------------------------------------------------
Math.toDegrees = function(radians) {
return radians*180/Math.PI;
};
//--------------------------------------------------------
this.createEmptyMovieClip("driehoek", d++);
driehoek.lineStyle(0, 0x000000, 100);
with (driehoek) {
moveTo(5, -5);
beginFill(0x0000000, 20);
lineTo(5, 5);
lineTo(-5, 0);
lineTo(5, -5);
endFill();
}
//--------------------------------------------------------
this.createTextField("p", d++, centrum.x+20, centrum.y, 100, 20);
s = new TextFormat();
p.setTextFormat(s);
//--------------------------------------------------------
this.createEmptyMovieClip("lijn", d++);
lijn.lineStyle(1, 0x000000, 100);
lijn.moveTo(centrum.x+Math.cos(hoek1)*straal, centrum.y+Math.sin(hoek1)*straal);
lijn.onEnterFrame = function() {
hoek1 -= 0.1;
if ((centrum.x+Math.cos(hoek1)*straal)<centrum.x) {
driehoek._x = centrum.x+Math.cos(hoek1)*(straal-10);
driehoek._y = centrum.y+Math.sin(hoek1)*(straal-10);
driehoek._rotation = Math.toDegrees(hoek1);
} else {
driehoek._x = centrum.x+Math.cos(Math.PI/2)*(straal-10);
driehoek._y = centrum.y+Math.sin(Math.PI/2)*(straal-10);
driehoek._rotation = Math.toDegrees(Math.PI/2);
delete this.onEnterFrame;
}
this.lineTo(centrum.x+Math.cos(hoek1)*straal, centrum.y+Math.sin(hoek1)*straal);
};
//--------------------------------------------------------
driehoek.onPress = function() {
this.onMouseMove = function() {
_root._xmouse<=centrum.x ? hoek=Math.PI+Math.atan((centrum.y-_ymouse)/(centrum.x-_xmouse)) : null;
this._x = centrum.x+Math.cos(hoek)*(straal-10);
this._y = centrum.y+Math.sin(hoek)*(straal-10);
this._rotation = Math.toDegrees(hoek);
p.text = Math.round(((Math.toDegrees(hoek)-90)/180)*100)
};
};
driehoek.onRelease = driehoek.onReleaseOutside=function () {
delete this.onMouseMove;
};

[scotty]

Voetsjoeba: wow, that's what we call drag
i think i have to spent some nights (weeks) before i really understand it, but i will!!
i just came a little further, still no drag, but now, if you mouseover, the menu moves (and is clickable)

scotty

[Voetsjoeba]

Here's a rough coded version of a clickable line:



d = 0;
straal = 200;
centrum = {x:350, y:250};
hoek1 = Math.PI+(Math.PI/2);
hoek = Math.PI/2
//--------------------------------------------------------
Math.toDegrees = function(radians) {
return radians*180/Math.PI;
};
//--------------------------------------------------------
this.createEmptyMovieClip("driehoek", d++);
driehoek.lineStyle(0, 0x000000, 100);
with (driehoek) {
moveTo(5, -5);
beginFill(0x0000000, 20);
lineTo(5, 5);
lineTo(-5, 0);
lineTo(5, -5);
endFill();
}
//--------------------------------------------------------
this.createTextField("p", d++, centrum.x+20, centrum.y, 100, 20);
s = new TextFormat();
p.setTextFormat(s);
//--------------------------------------------------------
this.createEmptyMovieClip("lijn", d++);
lijn.lineStyle(5, 0x000000, 100);
lijn.moveTo(centrum.x+Math.cos(hoek1)*straal, centrum.y+Math.sin(hoek1)*straal);
lijn.onEnterFrame = function() {
hoek1 -= 0.1;
if (hoek1>Math.PI/2) {
driehoek._x = centrum.x+Math.cos(hoek1)*(straal-10);
driehoek._y = centrum.y+Math.sin(hoek1)*(straal-10);
driehoek._rotation = Math.toDegrees(hoek1);
} else {
driehoek._x = centrum.x+Math.cos(Math.PI/2)*(straal-10);
driehoek._y = centrum.y+Math.sin(Math.PI/2)*(straal-10);
driehoek._rotation = Math.toDegrees(Math.PI/2);
delete this.onEnterFrame;
}
this.lineTo(centrum.x+Math.cos(hoek1)*straal, centrum.y+Math.sin(hoek1)*straal);
};
//--------------------------------------------------------
driehoek.onPress = function() {
this.onMouseMove = function() {
_root._xmouse<=centrum.x ? hoek=Math.PI+Math.atan((centrum.y-_ymouse)/(centrum.x-_xmouse)) : null;
this._x = centrum.x+Math.cos(hoek)*(straal-10);
this._y = centrum.y+Math.sin(hoek)*(straal-10);
this._rotation = Math.toDegrees(hoek);
p.text = Math.round(((Math.toDegrees(hoek)-90)/180)*100);
};
};
driehoek.onRelease = driehoek.onReleaseOutside=function () {
delete this.onMouseMove;
};
lijn.onRelease = function() {
if (_xmouse<=centrum.x) {
tH = Math.PI+Math.atan((centrum.y-_ymouse)/(centrum.x-_xmouse));
if (hoek != tH) {
if (tH<hoek) {
driehoek.onEnterFrame = function() {
hoek -= 0.01;
if (hoek<tH) {
delete this.onEnterFrame;
} else {
this._x = centrum.x+Math.cos(hoek)*(straal-10);
this._y = centrum.y+Math.sin(hoek)*(straal-10);
this._rotation = Math.toDegrees(hoek);
p.text = Math.round(((Math.toDegrees(hoek)-90)/180)*100);
}
};
} else {
driehoek.onEnterFrame = function() {
hoek += 0.01;
if (hoek>tH) {
delete this.onEnterFrame;
} else {
this._x = centrum.x+Math.cos(hoek)*(straal-10);
this._y = centrum.y+Math.sin(hoek)*(straal-10);
this._rotation = Math.toDegrees(hoek);
p.text = Math.round(((Math.toDegrees(hoek)-90)/180)*100);
}
};
}
}
}
};

[hamza84]

What does straal and hoek mean ?? :beam:

[Voetsjoeba]

straal = radius, hoek = angle :)

[lunatic]

whoa.

rubs her eyes and shakes her head in disbelief :stunned:

Hey V, any chance you could comment a few of those?

[Voetsjoeba]

It'll take some time to explain ... I'll need to draw a few images which will take time ... I'll start writing the explanation right away :)

[eyezberg]

Don't know if you folks noticed the preloader/right-clicked, but this is not Flash, it's Director...
Nice code still, voetsjoeba (does this mean anything..?) ;)

[Voetsjoeba]

Thanks eyezberg :) No, voetsjoeba doesn't mean anything, it's just a name I invented.

I noticed it's made in Director, but JustinM posted this in Flash Actionscript so that's what I made :)

[mlk]

Yup- they could have easily done it in AS. Wow. Great coding Voets. Im impressed =)

[Voetsjoeba]

Thanks mlk :)

[Voetsjoeba]

Ok, code explanation. This script involves sine, cosine, arc tangent and a bit of algebra to understand what I'm doing. So if you need to brush up your math skills, I suggest you go to this thread (http://www.kirupaforum.com/forums/showthread.php?s=&threadid=12181), and read about sine, cosine and arc tangent. Once you've read it, it'll be easier to understand this explanation.



d = 0;
straal = 200;
centrum = {x:350, y:250};
hoek1 = Math.PI+(Math.PI/2);
hoek = Math.PI/2;


I'm setting a few variables here to be used later on in the actionscript.

d is a variable we'll use as depth control. Everytime we create a new movieclip, we place it at the depth d++, so that every movieclip is on it's own depth, and I don't have to manually see if a level isn't used already.

straal is radius in Dutch. It indicates the radius of the imaginary circle.

centrum is an object in which we store the x and y values of the center of that circle.

hoek1 is angle1 in Dutch. We use two angles in this effect. The first one (this one) is used to animate the line, and the second use we'll use for the rest of the effect. We're setting it at Math.PI+(Math.PI/2). Why ? Because we want to start the line at the top of the circle:

hoek is that second angle we'll use to control the movement of the triangle, and to get the percent of the position of the triangle relative to the circle (at the bottom is 0%, at the top is 100%). We can always set this percent to another scale to control other actionscripted movement, such as a timeline for example.

Note: Flash doesn't use degrees for angles. Instead, it uses radians, which is based on PI. Have a look at the image below:

http://users.pandora.be/voetsjoeba/kirupa/trig/pi.jpg

180° = PI, so 90° = PI/2. And 270°=180°+90° -> 270° = PI+PI/2. 360° = 2*180° -> 2*PI. Or 0, since an angle of 375° is the same angle as an angle of 15°.



Math.toDegrees = function(radians) {
return radians*180/Math.PI;
};


This is a function to convert an angle in radians to an angle in degrees. We'll use it to control the rotation of the triangle.


this.createEmptyMovieClip("driehoek", d++);
driehoek.lineStyle(0, 0x000000, 100);
with (driehoek) {
moveTo(5, -5);
beginFill(0x0000000, 20);
lineTo(5, 5);
lineTo(-5, 0);
lineTo(5, -5);
endFill();
}

This code creates the triangle in an empty movieclip called "driehoek" (triangle in Dutch). It is drawn to face the inside of the circle, facing left. Why ? We'll come back on it later, hang on ;)

http://users.pandora.be/voetsjoeba/kirupa/trig/triangle.jpg



this.createTextField("p", d++, centrum.x+20, centrum.y, 100, 20);


This line creates a textfield called "p" at the depth d++, at the x position centrum.x (the centre of the circle, remember ?)+20 (to place it a little further than the centre. The +20 is not really needed, it's just for the looks :)), and at an y position of centrum.y, with a width of 100 and a height of 20. This will be used to display the percent of position of the triangle on the circle. That's why it's called "p", "percent".



this.createEmptyMovieClip("lijn", d++);
lijn.lineStyle(5, 0x000000, 100);
lijn.moveTo(centrum.x+Math.cos(hoek1)*straal, centrum.y+Math.sin(hoek1)*straal);


This code creates the movieclip that will become the line. We create it a a depth of d++, give it the name lijn and set it's linestyle to a 5px thick, black (100% opacity) line. Then, we command that movieclip to move the API drawing head to centrum.x+Math.cos(hoek1)*straal and centrum.y+Math.sin(hoek1)*straal. Note that we are not setting the position of this movieclip. This movieclip stays at the x and y position 0, but we move the API drawer head to that position to start drawing the line there. Now, centrum.y+Math.sin(hoek1)*straal is an essential piece of code in this effect, since it gives an x and y position of a point on a circle given the angle and the radius. A little explanation on how it works:

http://users.pandora.be/voetsjoeba/kirupa/trig/sincos.jpg

The sine of angle is the opposing side divided by the hypotenuse. The hypotenuse is the radius of the circle. So we can say that Math.sin(angle) = y/radius. So this means that Math.sin(angle)*radius = y. Same goes for x. Math.cos(angle) = adjacent side divided by the hypotenuse. So Math.cos(angle) = x/radius. Which will lead us to Math.cos(angle)*radius = x. Using this simple formula, we can calculate the position on a circle given the angle and the radius. You will see that this formula will be used a lot in this code since it's one of the most essential formulas in this script.

So now, we have the head of the drawing API set at the top of the circle, since we're using hoek1 as angle which is PI+PI/2, and that is the top of the circle.



lijn.onEnterFrame = function() {
hoek1 -= 0.1;
if (hoek1>Math.PI/2) {
driehoek._x = centrum.x+Math.cos(hoek1)*(straal-10);
driehoek._y = centrum.y+Math.sin(hoek1)*(straal-10);
driehoek._rotation = Math.toDegrees(hoek1);
} else {
driehoek._x = centrum.x+Math.cos(Math.PI/2)*(straal-10);
driehoek._y = centrum.y+Math.sin(Math.PI/2)*(straal-10);
driehoek._rotation = Math.toDegrees(Math.PI/2);
delete this.onEnterFrame;
}
this.lineTo(centrum.x+Math.cos(hoek1)*straal, centrum.y+Math.sin(hoek1)*straal);
};


Ok. We're now setting the onEnterFrame handler of the movieclip "lijn" (line in Dutch). First, we substract 0.1 of hoek1. Why 0.1 ? Because hoek1 is in radians, so based on pi. And PI is about 3.1415. So if you'd substract 1 from it, it'll reach the bottom of the circle way too fast. Then, we check if hoek1 is bigger than Math.PI/2. Math.PI/2 is the bottom of the circle, so this checks if the angle is bigger than the angle of the bottom of the circle:

http://users.pandora.be/voetsjoeba/kirupa/trig/anglebigger.jpg

If hoek1 is bigger than Math.PI/2, then set the x and y position of driehoek to centrum.x+Math.cos(hoek1)*(straal-10). We saw before why we're using this formula, but why straal-10 ? Simply to make sure that the triangle is a little bit more inwards than the line. The line is 5 px thick, so add add another 5 for spacing and we end up with 10 :). You can play around with this value to place it more/less inwards.

After that, we set the _rotation of driehoek to Math.toDegrees(hoek1). Math.toDegrees returns an angle in degrees, based on the radians you pass along to the function. The _rotation property is based on degrees, and not on radians. That's why we convert hoek1 to degrees, and set it as _rotation value of triangle. This is also why we drew the triangle facing left: if the angle is zero, the triangle points to the center. If the angle is PI/2, which we convert to 90 degrees using Math.toDegrees, the triangle will turn 90 degrees and will thus be facing upwards, to, indeed, the center of the circle. If we'd have drawn the triangle facing up, then it wouldn't face the center of the circle anymore.

http://users.pandora.be/voetsjoeba/kirupa/trig/rotation.jpg

If hoek1 is not bigger than Math.PI/2 (so equal or less), then do the same as if the angle were bigger, but one last time. For it to become the last time, we must delete the onEnterFrame handler.
Ok, but so far, we haven't drawn any lines yet. We've set the triangle's position and rotation, but we haven't drew any line yet. That is what the line underneath the if statement does, this.lineTo(...). This uses, again, the same formula. What's looking like a circle is actually a group of straight lines. Since we placed all this in the onEnterFrame handler, and hoek1 is getting smaller every time, this draws a line to a point on that circle, the angle is being decreased, draws a line again but a little bit lower on that circle, since the angle has decreased. This way, we're creating the illusion of a circle. When the onEnterFrame has been deleted, this willlogically also stop happening, because this is also placed inside the onEnterFrame handler of the movieclip lijn.

So far the line effect and the principles this effect is based on. Now, we need to make the triangle draggable, but not just draggable, it has to be dragged circulary. Also, we need to add a percent value, so we can use this percent for controlling any other elements in this effect. Let's go:

[Voetsjoeba]

driehoek.onPress = function() {
this.onMouseMove = function() {
_root._xmouse<=centrum.x ? hoek=Math.PI+Math.atan((centrum.y-_ymouse)/(centrum.x-_xmouse)) : null;
this._x = centrum.x+Math.cos(hoek)*(straal-10);
this._y = centrum.y+Math.sin(hoek)*(straal-10);
this._rotation = Math.toDegrees(hoek);
p.text = Math.round(((Math.toDegrees(hoek)-90)/180)*100);
};
};


Here, we're setting the onPress handler for the triangle movieclip, because when it's being pressed, we want to circular drag it. As you can think, we can't use startDrag here. So we need to write our own script for dragging it circular. We'll do that using the arc tangent (Math.atan). This requires again some explanation:

The tangent returns the opposite side divided by the adjacent side, given a certain angle. This is the same relation, nomatter what sizes the sides are. Ever heard of Thales ? ;) If not, have a look at this tutorial by Pom (http://www.kirupa.com/developer/mx/perspective.htm) and this post by Senocular (http://www.kirupaforum.com/forums/showthread.php?s=&threadid=12181).
The arc tangent returns an angle, given the the opposite side divided by the adjacent side. This is what we'll use for dragging: we can calculate the sizes of the sides (using _xmouse and _ymouse), so we can also calculate the angle using Math.atan.

http://users.pandora.be/voetsjoeba/kirupa/trig/atan.jpg

The opposite side is centrum.y - _ymouse, and the adjacent side is centrum.x-_xmouse. We need to provide opposite side/adjacent side for Math.atan to calculate the angle from. But: the arc tangent only reaches from (in degrees, for your convenience) -90 to 90. Why ? Think: say your mouse is on the right part of the circle. Then the height (notice: not length, since lengths can't be negative) of the opposite side (the vertical side), is positive if your mouse is above the y position of the centre. And, the adjacent side will alos be positive since your mouse is in the right part of the circle. A positive number divided by another positive number, gives a positive result. This is the part from 0 to 90.

But, if your mouse's y position is underneath the y position of the centre, then the height of the opposite side will be negative. But the adjacent side will still be positive. A negative number divided by a positive number results in a negative value. This is the range from 0 to-90.

On the other side of the circle this is exactly the same, only here _xmouse is always negative, since _xmouse is less than centrum.x on the left side. So if here the opposite side is negative (your mouse being underneath centre.y), then the result will be positive, since a negative number diveded by a negative number results in a positive value. And, if the opposite side would be positive, then the result is positive, since you're dividing a positive number by a negative number (opposite/adjacent), which will result in a negative value.

http://users.pandora.be/voetsjoeba/kirupa/trig/atanposneg.jpg

Looking at the above image, I think you will realize why arc tangent reaches from -90 to 90 ;) For this example, we need the arc tangent of the left side of the triangle. But if we'd just use Math.atan(..), we'd get the angle from the right side, since atan reaches from -90 to 90 and 0 is at the right side of the circle. So what do we do ? Simple. We add Math.PI to the angle Math.atan returns. That way, we get the correct angle. By the way, don't get confused. Math.atan() doesn't reach from -90 to 90 radians. -90 and 90 are the values in degrees, not in radians. I just gave 90 and -90 because most people are used to work with degrees ;)

Ok, now so far we've figured out what the angle is based on _xmouse and _ymouse. This we'll use to drag the triangle. onMouseMove, we need triangle to move to the position on the circle based on the angle we get using Math.atan(), and the radius. We'll substract 10 from the radius of the line because we want triangle to move on a smaller radius. But, we only want it to move to that certain position if he mouse is on the left side of the circle, or right on the x-axis, because we don't have a right side on this half circle. Knowing all this, we come to


_root._xmouse<=centrum.x ? hoek=Math.PI+Math.atan((centrum.y-_ymouse)/(centrum.x-_xmouse)) : null;
this._x = centrum.x+Math.cos(hoek)*(straal-10);
this._y = centrum.y+Math.sin(hoek)*(straal-10);
this._rotation = Math.toDegrees(hoek);

I'm using a tertiary operator there in the first line. This is basically how it works:


condition ? actions_if_true : actions_if_false

Now we need to add a line that displays the percent to the textbox p we created before. We'll build this formula step by step. Remember, _rotation is based on degrees, so we need Math.toDegrees(hoek). But, we need to substract 90 degrees of this angle, because 0% is at the angle 90 degrees, and not at angle 0. Now, to calculate a percent, what does one do ? Indeed, divide by maximum and multiply with 100. So we become ((Math.toDegrees(hoek)-90)/180)*100). Now add a Math.round to make sure it's a nice round number, et voilà: p.text = Math.round(((Math.toDegrees(hoek)-90)/180)*100); ;)



driehoek.onRelease = driehoek.onReleaseOutside=function () {
delete this.onMouseMove;
};

[Voetsjoeba]

In the onPress handler of the triangle, we set the onMouseMove handler which contains the actions to drag the triangle clip circular. We want to stop that dragging when triangle is released or released outside. So to do that, we just delete the onMouseMove handler, since that controls the draggin movement.



lijn.onRelease = function() {
if (_xmouse<=centrum.x) {
tH = Math.PI+Math.atan((centrum.y-_ymouse)/(centrum.x-_xmouse));
if (hoek != tH) {
if (tH<hoek) {
driehoek.onEnterFrame = function() {
hoek -= 0.01;
if (hoek<tH) {
delete this.onEnterFrame;
} else {
this._x = centrum.x+Math.cos(hoek)*(straal-10);
this._y = centrum.y+Math.sin(hoek)*(straal-10);
this._rotation = Math.toDegrees(hoek);
p.text = Math.round(((Math.toDegrees(hoek)-90)/180)*100);
}
};
} else {
driehoek.onEnterFrame = function() {
hoek += 0.01;
if (hoek>tH) {
delete this.onEnterFrame;
} else {
this._x = centrum.x+Math.cos(hoek)*(straal-10);
this._y = centrum.y+Math.sin(hoek)*(straal-10);
this._rotation = Math.toDegrees(hoek);
p.text = Math.round(((Math.toDegrees(hoek)-90)/180)*100);
}
};
}
}
}
};


Don't be fooled by the length of this, it's actually pretty simple, and you already know what everything does since it uses the same code as the dragging. This is a commented version of what this code does:



lijn.onRelease = fucntion(){
// When you click on lijn ... (the line)
if (_xmouse<=centrum.x) {
// check if _xmouse is on the left part of the circle
tH = Math.PI+Math.atan((centrum.y-_ymouse)/(centrum.x-_xmouse));
// set tH (targetHoek, hoek is angle in Dutch) to the angle we get using _xmouse and _ymouse
if (hoek != tH) {
/* check if hoek (the angle we use to control the dragging too; if no dragging has happened before, hoek will be equal to the initial value we set, PI/2, and the triangle will also still be at it's initiate position. If dragging has happened, then hoek stays the angle the triangle is currently on) is not equal to our target angle
Now, we need to seperate two possibilities: either tH is less than the current hoek, or either it's bigger than the current hoek. Then set the correct onEnterFrame handler, because if tH is bigger than hoek, then hoek has to increase, and if it's smaller, hoek has to decrease. That's why we have two seperate onEnterFrame handlers, one for decreasing and one for increasing*/
if (tH<hoek) {
driehoek.onEnterFrame = function() {
hoek -= 0.01;
if (hoek<tH) {
// if hoek has reached his target
delete this.onEnterFrame;
} else {
// if it hasn't reached it's target yet
this._x = centrum.x+Math.cos(hoek)*(straal-10);
this._y = centrum.y+Math.sin(hoek)*(straal-10);
this._rotation = Math.toDegrees(hoek);
p.text = Math.round(((Math.toDegrees(hoek)-90)/180)*100);
}
};
} else {
driehoek.onEnterFrame = function() {
hoek += 0.01;
if (hoek>tH) {
delete this.onEnterFrame;
} else {
this._x = centrum.x+Math.cos(hoek)*(straal-10);
this._y = centrum.y+Math.sin(hoek)*(straal-10);
this._rotation = Math.toDegrees(hoek);
p.text = Math.round(((Math.toDegrees(hoek)-90)/180)*100);
}
};
}
}
}
};
}

[lunatic]

Very very impressive! Who knew that high school trig would actually come in handy one day? :sigh:

Thanks voets! Gonna take us all a little while to digest that one!

:thumb:

[Voetsjoeba]

Thanks lunatic :)



Who knew that high school trig would actually come in handy one day ?


I thought exactly the same ;)

[JustinM]

Wow! What an explanation. As lunatic said, that one will take a bit to digest. Thanks!

[Seth]

That is pretty amasing stuff!

[tucker]

Voet, i know this is off topic, but ive been trying to find a place that shows u how to animate lines with actionscript, can briefly explain? i tryed to get it from ur code, but i didnt manage = /

[Voetsjoeba]

What animation are you trying to achieve ?

[tucker]

the one that draws the half circle

[Voetsjoeba]

Here's some code I quickly created to show you.



center = {x:350, y:250};
radius = 150;
angle = 3*Math.PI/2;
speed = 0.05;
this.createEmptyMovieClip("line", 1);
line.lineStyle(0, 0x000000, 100);
line._x = center.x;
line._y = center.y;
line.moveTo(Math.cos(angle)*radius, Math.sin(angle)*radius);
line.onEnterFrame = function() {
this.lineTo(Math.cos(angle)*radius, Math.sin(angle)*radius);
angle -= speed;
if (angle<=Math.PI/2) {
delete this.onEnterFrame;
this.lineTo(Math.cos(Math.PI/2)*radius, Math.sin(Math.PI/2)*radius);
}
};

[tucker]

thanks!

i dont mean to be an annoyance, but how would i adjust the code to just draw a single line

[Voetsjoeba]

A single line ? What do you mean ? As far as I know that code still draws one line :P

[tucker]

i meant a straight line = D

or if u no of a simple tutorial, i tryed senoculars, but it was too hard for my puny brain

[Voetsjoeba]

A simple straight line growing ? Easy ..



this.createEmptyMovieClip("drawHere", 1);
drawHere.lineStyle(0, 0x000000, 100);
drawHere.pos = 200;
drawHere.moveTo(drawHere.pos, 10);
drawHere.onEnterFrame = function() {
drawHere.pos++;
this.lineTo(drawHere.pos, 10);
if (drawHere.pos>=400) {
delete this.onEnterFrame;
}
};