Once again, the OOP support in AS3 makes for simplifying some previously complicated effects down to a simple implementation. In this post, I want to give an overview of something that nearly anyone who ever deals in manual animation will need to figure out: circular rotation and/or orbiting around another object. To assist in this, I have created an extremely simple orbiter class that will take a few arguments to define its behavior along with a target (or origin) around which to orbit. I have written this in such a way as to accept any Object as an origin, so this will allow us to assign an Orbiter object to rotate around anything in our SWF.

Now, as many people are not only apprehensive about math when dealing in Flash but also attempt to avoid it entirely. That is one of the reasons I tried to consolidate the orbiting pattern into a simple object: it allows for us to deal with one single algorithm that can be found all over the internet and implement it to nested objects to create some pretty complex orbital patterns. Of course, since we are dealing with circular patterns, this isn’t the appropriate method to approach the issue of true planetary or elliptical orbits, but for effects and basic visuals, it works quite well. The Orbiter object is not intended to be a solution in and of itself, but rather it is intended to be a base class upon which you can build specific rotational objects with their own visuals and effects.

If you take a moment to look at the banner introducing this topic, you will see a nested set of orbiting objects to the left. I have created one main sphere which has two satellites, and in turn, each of these satellites has at least one of their own. The goal was to show how, with just a little code, we can reuse this Orbiter object to create objects that interact on several planes. Now, let’s look into the simplicity of the object itself. There are literally only two logic pieces we need to discuss: the setup and origin (a little math here) and the actual animation effect. There is, of course, the drawing aspect, but since I have no idea what look you want from your objects, I will leave that part entirely up to you.

If you care to glance at a demo, the source code is available here for perusal and download.

Setup

We need to primarily understand that the movement in a circle is a much different concept than that of moving in a straight line or even tracking (or following) another object. Rather than calculating the precise location of our target and moving towards it each frame, we want to be aware of our origin’s location (center of our orbit) and move around it. So, the only math with which we need to have an understanding is the use of sine and cosine as well as the relationship between degrees and radians.

First, let’s discuss the calculation of the angle along which we want our object to move. I’m sure you are aware already that a full circle can be divided up into 360 degrees for one full revolution. If this is news to you, then I suggest you carefully step away from the computer and move on to more appropriate creative mediums: like paper and crayons, for instance. Anyhow, the arc along a circle can also be arithmetically divided up into another unit of measure called radians. Still, we probably haven’t covered anything entirely new. What you do need to be aware of, though, is that by default, any angular calculations done within Actionscript must be done in radians, not degrees.

This calculation is still quite easy, though, understanding that there are 2π radians in 360 degrees and, therefore, π radians in 180 (π — approximately 3.151592654… — is a mathematical constant representing the ratio of a circle’s circumference to its diameter). Creating a conversion with this knowledge becomes extremely easy:

var rads :Number = degrees * (Math.PI / 180);

Using this calculation for any conversions that need be made, we can easily begin to interact with Actionscript by referencing the degrees of a circle around which we wish an object to travel.

All of that background out of the way, we simply need to have note of the following values to be able to set up our animation:

• origin (X and Y) – the coordinates of the center point of our circle
• angle – the degree representation of our current position along the arc of the circle
• radius – the radius of our circle (how far from the origin we wish to remain)
• speed – the speed at which we wish to traverse the arc (how many degrees per frame)

At the most basic level, those are all the values we need. If you look into the code I provide at the end of this post, you may notice I have some additional values (such as reverse to determine what the direction of the rotation will be), but those are all optional based on your own implementation. So, for now, we will assume you have your object set up and drawn (again, I leave the actual drawing up to you), and you are now ready to attach the movement algorithm to animate the object.

I Like to Move It, Move It!

The most basic way to attach movement to an object is to add an event listener to the ENTER_FRAME event and calculate its position frame by frame. This is exactly what we will do with our object. You will notice that the last line of the constructor does just this:

this.addEventListener(Event.ENTER_FRAME, move);

In a nutshell, every time this object enters a new frame of the SWF, it will trigger its own member method “move()” which will calculate where it should be at this time. It is a very simple thing to do with what we covered above, so I will just post the code for the move method, and then we can discuss a couple nuances of it:

protected function move(e :Event) :void
{
     var rad :Number = this.angle * (Math.PI / 180);
     this.x = this.origin.x + this.radius * Math.cos(rad);
     this.y = this.origin.y + this.radius * Math.sin(rad);

     if (this.reverse == false)
     {
          this.angle += this.speed; // clockwise
     }
     else
     {
          this.angle -= this.speed; // counter-clockwise
     }

     this.angle %= 360;
}

Obviously, to start with, we simply change our current angle position into radians to be able to work with Actionscript. Then, we simply update the current x and y coordinates appropriately based on the location of the origin object. Notice that we are not using static points. This is so that we can cascade orbits down along a hierarchy of objects and allow each to rotate around the previous one. As long as our origin is an Object, we can rotate around it, because it has a location representation (x and y coordinates).

Once we have updated our current position relative to our origin, we need to update our angle in preparation for the next frame. To do so, we simply increment the angle based upon our defined speed (in my example, I use the reverse variable to determine the rotation direction). Finally, you can see that in the very last line of the method, I use a modulus assignment to keep the degrees from ever exceeding the range of 0-360. While Actionscript is smart enough to translate something like -45 degrees into 315 degrees, I personally like to keep the values in a human readable format in case we ever do have use to retrieve it again.

And that’s all there is to it! Believe it or not, that’s really it. With each Orbiter object worrying about its own location based on the origin we provide to it at the time of instantiation, we can do any mess of complexities and see what our outcome looks like. For instance, let’s say we already have an object “obj” existing in our document and we want to create a 3 tiered hierarchy of satellites for it (ie, it has one satellite that has one satellite that has one sattelite). At first glance, this may sound daunting, but we can now accomplish just this task with the following code:

// Main satellite
var o1 = new Orbiter(obj, 10, 160, 1, true);
addChild(o1);

// 1st sub-satellite
var o2 = new Orbiter(o1, 8, 50, 2, false);
addChild(o2);

// 2nd sub-satellite
var o3 = new Orbiter(o2, 6, 30, 3, false);
addChild(o3);

You can very quickly see how easy it would be to control a hierarchy of satellites by simply stacking them and assigning the appropriate targets. Once again, the beauty of OOP shines through and lets us break down what could become a very complex algorithm to track multiple objects into very small and simple solutions.

Full source available here