## Tuesday, 18 October 2011

### 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

//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.

Mohit Verma

very nice effcet

Ricardo Pereira

dude, i did exacly what you're saying and it's not working. Just started my Adobe Flash, actionScript 3 file.. imported an image of a pendulum, converted to symbol with exacly same name that u have advised.. new layer > actions and pasted code... got error :\

iliketo

@Ricardo,

What's the error message?