Tweener and TweenMax both allow you to tween along a bezier curve...although those won't give you perfect semi-circles (read this).
You could also set this up by hand using polar coordinates...moving around the origin on a radius of 50 would be xyPoint = Point.polar(50, angle); where angle is the tweened value, measured in radians.
On the TweenMax page the first demo is a bezier example, just grab the line and drag to make an arc and then hit 'tween'...it will generate the code automatically.
And here's a simple demo you can drop into an empty flash file to push a sprite around a circle:
PHP Code:
var s:Sprite = addChild(new Sprite()) as Sprite;
s.graphics.beginFill(0xFF6600);
s.graphics.drawCircle(0, 0, 12);
If you look at the home page of my site, I use something like the code I posted to move the clock along an arc. If I can find the FLA, I will post the code I used for that.
Thanks, that really helps, but how would I tell it an end point? What's the math necessary to do all of this? Like say I used the code neznein9 posted, I have a start point, and an end point, which then I would determine the distance between the two points, and then I would have to find where to put the start point for the radius.
And Kortex, thank you as well, I hope you don't mind but I did get a hold of some of the code you used on your site through a decompiler, although that's all I've done is take a look at it. I see what's you've done as well, although I still have the trig problem, or how to find a start point.
I'll attach a picture for further clarification.
Attached is a JPG called Circ. Known is the start Point, end point, radius, and distance between the start and end points expressed as a straight line. How do I find the unknowns shown in that image? If I can find that, I think I should be able to write a new method that will draw arcs perfectly.
Oh I don't mind. Hell I post enough code there as it is so if you want to go through the effort of decompiling, you save me the trouble of having to track it down again.
If you have enough time (and if you do, you need to evaluate your social life) when you let that animation go on my home page long enough, the moon resets itself back to its origin when it reaches the horizon on the right side of the tower, so I know I am doing a starting and ending point at least in that manner.
So it is a kind slow half arc. Basically what you are doing for this is Trig (math). Since I don't gave my code in front of me, you are basically looking at the code that calculates the x and y coordinate differences and a variable called angle I believe. It is this calculation that gives you the point along the arc.
This would be the stuff from that, that you are interested in.
function moveMoon()
{
//convert the angle value to a radian value
var _loc1 = deg2rad(moon_mc.ang);
//caclulate the x coordinate along the arc
moon_mc._x = moon_mc.xc + moon_mc.rad * Math.cos(_loc1);
//caclulate the xycoordinate along the arc
moon_mc._y = moon_mc.yc + moon_mc.rad * Math.sin(_loc1);
//update the angle variable using the incriment value for the next raound of calculations
moon_mc.ang = moon_mc.ang + moon_mc.angC;
//ensure that the angle variable stayes below 360.
moon_mc.ang = moon_mc.ang % 360;
//if the angle value of the clock has reached 0 or the 3 o clock positon along the arc, reset the position to llook like it is comming out of the horizon near the 9 o clock positon
if (moon_mc.ang == 0)
{
moon_mc.ang = 175;
} // end if
trace (moon_mc.ang);
} // End of the function
//utilitly function for converting degree value to a radian value
function deg2rad(degree)
{
return (degree * 1.745329E-002);
} // End of the function
//calculate a center point for which the arc will be calculated arround. This is the pivot point from which the distance and degree cacluation will stem from.
moon_mc.xc = Stage.width / 2;
moon_mc.yc = Stage.height;
//radius, the distance from the calculated center point that the object should arc arround.
moon_mc.rad = 400;
//inital value for the angle. This determines starting location along the arc.
moon_mc.ang = 225;
//angle incriment value. This value gets added to the angle value on each update moving the object along the path. The higher the value the more it moves on each update.
moon_mc.angC = 1;
moveMoon();
var orbit = setInterval(moveMoon, 8000);
Okay, I've translated this into AS3, and only have a few questions.
1. What variable holds the starting X and Y value, and what hold the ending X and Y values?
2. I see where your calculating the center point, but how would I do that dynamically? Like say I have a starting point of X 20, and Y 20, and an end point of X 80, and Y 80, and want to make an arc between the two with a radius of 100. How would I calculate where the center point is? Thanks.
Yeah, I've seen that before although, for what I'm doing the arcs must be precise and can not be done with beziers, so I'm unfortunately unable to use TweenMax or any of the other third party Tween classes out there, although I've done a bunch of math going as far as into Trigonometry, Algebra, Geometry and Calculus to an extent to write a method to make the arcs that I need based ont he information I have.
I've come really close and I'm just bug checking now. I have the method written, my main issue now is how to tell the arc which way to render itself. Like I have a formula to find the center point, although it does find it, it's hard to make the arc start in one quadrant versus another.
If you'd like to take a look, hit me up at jonathon.weeks@gmail.com and I'll send you a copy and you can let me know wha tyou think, because as far as I know, you still can not attach AS files on this forum, which I still find to be kinda wierd.
Thanks though. And BTW, your code is what got me the heads up I needed to get where I am now. Just a few pieces missing to be where I want to be.
Reply With Quote
