During my latest project, I had to make something every Flash Dev has made atleast once :
the dreaded Caroussel.
This one was not aligned on a circle, but on an ellipse.
So I took some time to do my homework : how can I rotate items on an ellipse, rotated in 3D space…
Below is a visual representation of the task at hand :
So, how do you get a point on an ellipse.
Let me tell you a little trick : we are going to get a point on a circle.
After all, an ellipse is just a skewed circle, right ? So all we need is the radius of the circle, the angle we want, et voila : point on circle.
/**
* Get the point on a circle
* @param center : the center of the circle
* @param radius : the size of the circle
* @param angle : the angle whose point we want to retrieve
*
* @return Point
*/
private function pointOnCircle( center : Point, radius : Number, angle : Number ) : Point {
var p : Point = new Point();
p.x = center.x + radius * Math.cos(angle);
p.y = center.y + radius * Math.sin(angle);
return p;
}
Now that we can find “a” point, let’s look for .. 360 points, positioned equally.
We use angleOffset because Flash has it’s 0 degrees on the right side.
If we offset it by 90 degrees, we have it at the lowest point at the bottom.
We use _container, a Sprite, to add all the points.
If we than change the scaleY of the container or even the height, the circle will become an ellipse.
private var _points : Vector.<Point> = new Vector.<Point>();
private function plotPoints() : void
{
var i : int = 0;
var l : int = 360;
var angle : Number = 360 / l;
var angleOffset : int = 90;
for ( ; i < l; i++ )
{
var p : Point = pointOnCircle(_center,_radius,(angleOffset + (i * angle) * Math.PI / 180));
var local : Point = ;
_points.push(_container.localToGlobal(p));
}
}
private function itemOnCircle( angle : Number ) : Point {
return _points[Math.round(angle)];
}
So now we can use the “itemOnCircle” function to retrieve the exact position for every angle.
Below is a basic implementation of this technique :
