Pendulum swing effect in Actionscript 3

In this tutorial you will learn how to create a Pendulum swing effect in Actionscript 3. A pendulum effect is where an object continually swings horizontally back and forth. To achieve this effect I have used the Math.sin() function. Firstly, if you have ever seen a graphical representation of a Sine wave, you see that it goes smoothly left to right from the angles 0 to 360. The value at 90 degree is 1 and at 270 degree is -1. The Sin wave moves smoothly from 1 to -1. So, instead of going from the values 1 to -1 over again, we can multiple those values by a greater value, for example, 45, which will give values from 45 to -45. These values can then be set to the rotation property of a movie clip to give a smooth swinging motion from left to right.


Pendulum swing effect in Actionscript 3

Step 1

Open a new AS3 file and create or import an image of a pendulum on the stage. I have created my pendulum using the primitive shapes tools in Flash.


Step 2

Convert your pendulum into a movie clip (F8) ensuring you select the top centre registration point. Give the movie clip the instance name: pendulum_mc. Note, the registration point has to be in the top centre for this effect to work.


Step 3

On the timeline insert a new layer called ‘Actions’ then open up the Actions panel and enter the following code:

//Variables to hold the current angle and the rotational degree
var angle:Number = 0;
var rotate:Number = 45;

//Adds an enter frame event to the stage
stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

//This function rotates the pendulum from 45 to -45 degree 
function enterFrameHandler(e:Event):void{
 pendulum_mc.rotation = Math.sin(angle) * rotate;
 angle +=0.1;
}

I have also been experimenting with the TweenNano class to achieve the same swinging effect. This code will also swing the pendulum left and right from 45 to -45 degree.

//Import the TweenNano class
import com.greensock.TweenNano;

//This function tweens the rotation property of a movie clip to 45 and -45 degrees
function swing(mc:MovieClip):void{
 
 var rotate:Number = (mc.rotation == 45) ? -45 : 45;
 
 TweenNano.to(mc,1,{rotation:rotate,
     onComplete: swing,
     onCompleteParams: [mc]
     }); 
}

//Call the swing function
swing(pendulum_mc);

Another method is to use two functions. The swing function rotates the movie clip to 45 degrees and the swingComplete rotates the movie clip to -45 degrees. Once the latter function is complete the swing function is called again to create a continuous loop.

import com.greensock.TweenNano;

function swing(mc:MovieClip):void
{
 TweenNano.to(mc, 1, {rotation:45, onComplete: swingComplete, onCompleteParams:[mc]});
}

function swingComplete(mc:MovieClip):void
{
 TweenNano.to(mc, 1, {rotation:-45, onComplete:swing, onCompleteParams:[mc]});
}

swing(pendulum_mc);

Step 4

Test your movie Ctrl + Enter.