Circular
Movement
         by kirupa chinnathambi

If there is one thing I like in a Flash animation, it has to be simplicity. I am usually not impressed with large background images with an Eric Jordan (2Advanced) inspired look. I was playing around with some ActionScript, and decided there needed to be a better method of making objects move in circles without having to use a guide layer.

With ambition and pure luck (not to mention page 496 of Colin Moock's ASDG) I figured out an efficient method of making movie clips move in circles:

[ movie clips moving in circles ]

You will create something similar to the above animation in under 5 minutes by following the instructions in this tutorial.

Creating Circular Motion:

  1. Create a new movie in Flash MX. Set the width and height to anything you want.
     
  2. Now, draw something and make it a movie clip. To convert something into a movie clip, select it and press F8. From the Convert to Symbol Dialog box that appears, select the Movie Clip option and press OK:

[ the convert to symbol dialog box ]

  1. Once you have created your movie clip, here comes the complicated process of Copying and Pasting. Right click on the movie clip and select Actions:

    Copy and paste the following code into your Actions dialog box:

[ copy and paste the above code into the Actions dialog box ]

  1. After the rigorous process of Copying and Pasting you undertook in Step 3, select your movie again. Press F8 and select Movie Clip from the Convert to Symbol Dialog box.

    [ NOTE: This is not a redundant instruction; you are making the object a movie clip for the second time. ]
     
  2. Now, copy and paste your movie clip as many times as you want on the stage.

[ multiple copies of the movie clip ]
 

ActionScript Explained
Not to leave you in the dark, I will explain what each major section of ActionScript's function is.

onClipEvent (load) {
     
var radius = 10 + Math.random() * 50;
     
var speed = 5 + Math.random() * 20;

     
var xcenter = this._x;

     
var ycenter = this._y;

     
var degree = 0;
     
var radian;
}

In the above lines of code I am declaring variables and assigning them values. For both the speed and radius variables, I assign them a random number. I could have assigned a static value, but that would have made all the movie clips rotate with the same speed and radius - it would have been quite monotonic and dull.

For xcenter and ycenter, I am specifying the center of the circular motion to be the current position (x and y) of the movie clip. If I were to assign a numerical value in the place of this._x and this._y, the movie clip, when run, would default to the new location specified in the code - instead of the location you specify by dragging the movie clip to a place on stage.
 


onClipEvent (enterFrame) {
     
degree += speed;
     
radian = (degree/180)*Math.PI;
     
this._x = xcenter+Math.cos(radian)*radius;
     
this._y = ycenter-Math.sin(radian)*radius;
}

The majority of the movement focuses on the above lines of code. In the first line, I am incrementing the variable speed and assigning it to the variable degree.

In the second line, I am converting the degree values into radians using the mathematical degree to radian conversion. Failing to convert the degrees to radian values will cause the movie clip to move in an erratic path instead of in a circle.

In the third and fourth lines, I am telling the movie clip's x and y values to follow the path taken by any object in a radian plane. The horizontal value as denoted with the cosine function multiplied by the radius generate the horizontal position of the movie clip. The vertical position is calculated in a similar fashion using the sine function multiplied by the radius.
 


You have just completed the tutorial! As always, I have provided the source code for you to take a peek at. Click the download source link below to download the Flash MX Flash File (FLA) for this effect:
 

download source for flash mx

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.