Move a pendulum with 3 functions! ActionScript 2.0
If you followed our first tutorials ( 1, 2, 3 ) dedicated to Flash functions, this tutorial should be really easy: it’s an animation of a pendulum as seen below. It has been done with 3 functions.
Physics tells you that the longer the pendulum, the slower the oscillations. So introduce a length L in the field text and press the START button; the pendulum oscillates and you can stop it with the STOP button. Try different lengths and observe how the oscillation varies.
You cannot do this kind of parametric animation without ActionScript.
I am going to show you how to make such an animation (with simpler drawings). When you work with functions, you must think in terms of actions; each function realizes one action.
For our pendulum, we need 3 functions: one that checks which of our buttons has been pressed, and another one to make move (or not) the pendulum. The third one creates the animation. Here are the steps to make this Flash movie.
Double Click on the first layer and name it Static text: choose the text tool and write on the stage the text as shown below (text framed in blue). Make sure you have selected Static Text in the Properties panel.
Create a new layer and name it “input text”; pick up the text tool and draw an input text field (Input Text in the Properties Panel ) to the left of meter unit (letter m) as seen underneath; don’t forget to give it an instance name “length” so that we can fill it with ActionScript
It’s time now to make our START button; create a new layer and name it Start Button. Then Insert/New Symbol, give it a name Start Button and make it a Button; draw with the Rectangle tool a green rectangle; you can leave it simple like that or improve it by choosing the color in the Up, Over and Up positions (double-click on it).
Come back to Scene 1 (by clicking on the top Scene 1 icon) and drag your button from the library to the stage on top of the static text “START”; make sure your Static text layer is on top of the start button layer, otherwise your text will not be visible. In the Properties panel, give it an instance name “startButton”.
Do exactly the same thing for the STOP button; give it an instance name “stopButton”.
Do not make mistakes in writing the instance names (there is a capital letter in the middle!); this is very often the reason why the movie will not work!
Now we have to draw our pendulum. Make a new layer and name it pendulum. Then Insert/New Symbol, give it a name “pendulum” and make it a movie clip; then click OK. Pick up the line tool and draw a vertical line so that the reference cross is at the top (remove the snapping); this will make the pendulum oscillate around the top and not the center. Add a small circle at the bottom of the line.
Come back to Scene 1 and drag the pendulum from the library to the stage; in the Properties panel give it an instance name “pendulum1”.
It’s time to write our ActionScript code; create a new layer and name it “actions”. Open the Actions panel (menu Window/Actions) and write the following code ; I’ve added some explanations in the commentaries (the lines beginning with a double slash and written in grey). If you want to copy it, just select it, including the commantaries, and paste it in the Actions panel. Make sure you have the same instance names as indicated in this tutorial.
//The following function checks which button is released:
function checkbuttons()
{
startButton.onRelease=function()
{alphaM=60;}
stopButton.onRelease = function ()
{alphaM=0;} //alpha will be zero for any time t
};
//The following function moves the pendulum:
function movePendulum()
{
L=Number(length.text); //converts L into a number
omega=Math.sqrt(9.81/L); //computes omega
alpha=alphaM*Math.sin(omega*t); //computes alpha
setProperty(_root.pendulum1,_rotation,alpha); //moves pendulum
};
//The following function creates the animation: at each frame, we make
// work our two above functions:
t=0; //starts at t=0
onEnterFrame= function()
{
checkbuttons();
movePendulum();
t=t+1/12; // t is increased by 1/12 second if you used 12 frames/s
};
You can test your movie with Control/Test Movie; introduce a length in the input text field (1 for example) and you will see the pendulum oscillate.
If you change the length, even during oscillation, to 10 for example, you will see the pendulum slow down. You have made a real-time simulation animation that shows how the oscillation varies with the length of the pendulum.
That’s the advantage of using ActionScript: you can make animations that are function of the parameters introduced. Thank you for your attention.
For those who can handle maths, this is the equation that has been used to compute alpha:
alpha=alphaM*sin(omega*t)
where alphaM is the maximum amplitude and omega the pulsation in rad/s [ omega=sqrt(9.81/L) with L=length of pendulum].