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.
3 comments:
very nice effcet
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 :\
@Ricardo,
What's the error message?
Post a Comment