Components

The Flash movie contains 2 layers, 2 movieclips, and 5 buttons.

Layers

• Control Panel
• Pendulum

MovieClips

• Control Panel: this movieclip represents the control panel of the pendulum, from which it is possible to dynamically vary the motion of the pendulum.
  
• Pendulum: this movieclip constitutes the pendulum.

Buttons

• Add
• Add Add
• Sub
• Sub Sub
• Restart

Getting Started - Graphic creation

As it has been said, the engine of the pendulum is a composed mathematical function of sine and power, and the rotation is influenced from three parameters, that is three variables, how explained more ahead.

The graphic contained in this movie is not particularly complex: it consists just in the control panel and the pendulum.

Control Panel Movie Clip

The control panel movie clip is constituted to its inside from a rounded rectangle, one button to restart the motion of the pendulum, 3 Text Fields and the relative buttons in order to vary the parameters of the motion of the pendulum.

The first one text field, close the inscription "Convergence", is set as "Dynamic Text" and is associated the timesmorz variable; the second text field, close the inscription "Initial Angle", equally is set as "Dynamic Text" and is associated the maxang variable; also the third text field, close the inscription "Velocity", is set as "Dynamic Text" and is associated the n_osc variable; these three variables are responsible of the type of motion that will have the pendulum and their value comes modified from the regulation buttons who are close to text fields. The initial value of the three variables is set through an action that executes during loading of the movie.

The various +.++.- and - close to the text fields they are simple buttons that allow to dynamically change, through an action, the value of the three variables. Every button with the shape of + (or with the shape of -) it allows to fine vary the value of the associate variable, while every button with the shape of ++ (or with the shape of - -) it allows variations more big. The inscription "restart" is a button that allows to restart the motion of the pendulum anytime.

Pendulum Movie Clip

The pendulum movie clip is not other that a simple bar with the bitmap of a pendulum to the extremity, that it can be modified at your own. The only thing to which it must place attention is that the point around which the pendulum will rotate, that is the superior extremity of the bar, is found in correspondence of the center of work the area of Flash:

ActionScripting

We pass now to the more important part: the engine of the pendulum. All the motion of the pendulum happens through the action, set as "object actions" (i.e. action associated to the movie clip) in the control panel movieclip:

onClipEvent (load) {
 a = 1;
 timesmorz = 0.92;
 maxang = 60;
 n_osc = 1;
 }
onClipEvent (enterFrame) {
 setProperty (_root.pend, _rotation, (((Math.sin (n_osc*a))*(Math.pow (timesmorz, a ))))*maxang);
 a = a+0.1;

Mathematical functions

What it determines the new value of rotation that our pendulum will have on every instant - i.e. frame - it is the associated mathematical function. It is well know that the function sine has an oscillating course, but constant in the time, and that it oscillates between values +1 and -1; therefore if we associate the simple function sine to the rotation of the pendulum, where the rotation value is given instant to instant - frame to frame - from the value that assumes sin(a) (a is our quarter variable, that it increases to every frame), the pendulum will oscillate between +1 degree and -1 degree, too much little for being appreciated visually:

this is the reason for which we use the variable maxang: it works as multiplier of sin(a); if sin(a) oscillates between +1 and -1, and we give maxang to a value of 60, then

maxang*sin(a)

it will oscillate between +60 (degrees) and -60 (degrees).

Now we want that the pendulum does not oscillate forever, but that it stops its movement, gradually. In order to realize this, we need a function that multiplied to "maxangle*sin(a)", at the beginning it does not have influence but with passing of the time reduces the oscillation until 0 (that is pendulum stopped). Moreover this function must have an effect that carry gradually to 0: the perfect function for this result is just the power function, that is

n^a

where n it is a real number>0. It is well know that the function power has these property:

• if n>1 it has increasing graph;
• if 0<n<1 it has decreasing graph, and if a is "much large" the function catches up the 0 (and therefore multiplied for "maxangle*sin(a)", when a is "much large", it reduces the oscillation to 0);
• se n=1 it is constant of constant value 1;
• for a=0 it assumes value 1 any is the value of n (and therefore multiplied for "maxangle*sin(a)" at the beginning, when a=0, it does not have influence.
  

For how much said, it appears clearly that we must choose an n, than in our case it will be the timesmorz variable, than 0<1 (therefore 0<timesmorz<1); if n=1 the power function is always 1 and the oscillation does not come influenced (infinite oscillation). How varies the power function when we modify n between 0 and 1? More next to value 1 is n, slower will be the convergence to the 0, like well demonstrates the figure here under:

Now we can create the final function, that it encloses sin and power: according to ActionScript syntax it will be

((Math.sin(a))*(Math.pow(timesmorz,a))*maxang

What about the n_osc variable? It is used in the function in this mode:

Math.sin(n_osc*a)

its duty is to increase the number of totals oscillations that happen in the same arc of time. Example: if n_osc=1 we will have 20 oscillations in 10 sec, if n_osc=2 we will have 40 oscillations in 10 sec and so on. So, the effect of this variable is, for the final motion, of having a "slow-motion" if n_osc<1 and an accelerated one to the growing of n_osc>1. The definitive function used in the movie is:

((Math.sin(n_osc*a))*(Math.pow(timesmorz,a))*maxang

Moving the pendulum

Now we can see how to associate the function to the movement of the pendulum: in Flash we select the control panel movie clip and choose from the menu of the actions setProperty(); in the Property field we choose _rotation(Rotation), in the Target field we write _root.pend, and in order to reference the pendulum movieclip as the object to be rotated, in the Value field we write our function. Done!

obviously the action must be put to the inside of the onClipEvent (enterFrame) action in order to be repeated to every frame. Finally there is a=a+0.1 that it is needed to increase the value of the a variable, every frame.

How to dynamically modify the value of the variables

Last part of this tutorial consists of understanding how to give interactivity to the movie, dynamically modifying the value of the implicated variables. In order to catch up this result we will use the 5 buttons over listed.

Restart button

The restart button just will serve to restart the pendulum motion, once stopped, or in any other moment: its duty will be therefore to bring back the a variable to its initial value. In order to make that, we must add the following action to the button instance to the inside of control panel movie clip:

on (release) {
 a = 1;

Add, Add add, Sub, Sub sub buttons

The add, add add, sub, sub sub buttons are located to the inside of the control panel movie clip, duplicated everyone three times, how many are the variables that modify the mathematical function. The difference between the various instances is the action associated to their.

Add button

The add button , with shape of +, will serve to fine increase the value of the associated variable , relatively to what it involves its variation (for the timesmorz variable, an increment of 0.001 is good, instead for maxangle variable an increment of 0.001 is not appreciable, will be therefore of 1; and so for n_osc variable it will be used 0.01). The actions to be associated (as done for the restart button) to the add buttons that control, respective, the timesmorz, maxangle e n_osc variables, are:

for timesmorz:

for maxangle:

for n_osc:

Sub button

Continuing with the same philosophy, the sub button , with shape of -, it will serve to fine decrease the value of the associated variable; the associated actions will be:

for timesmorz:

on (release) {
 if (timesmorz>0.01 ) {
 // the action comes executed if timesmorz>0.01
 timesmorz = timesmorz-.001;
 }
}

for maxangle:

on (release) {
 maxang = maxang+1;
 }

for n_osc:

on (release) {
 n_osc = n_osc+.01;

Add add button

Similarly, the add add button , with shape of ++, will serve to increase more the value of the associated variable; the associated actions will be:

for timesmorz:

for maxangle:

for n_osc:

Sub sub button

Finally, the sub sub button , with shape of --, will serve to decrease more the value of the associated variable; the associated actions will be:

per timesmorz:

per maxangle:

per n_osc:

 }

 }

 }

The action onClipEvent (load){ } is an action that only executes during loading of a movie and therefore is useful, for example, to initialize variables (i.e. to assign them an initial value). In our situation we will initialize four variables: the three variables already considered, with values timesmorz=0.92, maxang=60, n_osc=1, plus a quarter one, a=1, that we are in order to understand why. When we set the values of timesmorz,maxang and n_osc during loading, we makes it possible to display their values in the respective text fields, which are grouped inside the control panel movieclip.

The action onClipEvent (enterFrame){ } instead is an action that executes every time that is entered in a frame, therefore if we set, for example, the movie frame rate to 20 fps, the action comprised between the { } will come executed 20 times in 1 second. Taking advantage of this, it is possible to vary the rotation of the pendulum n times in a second if we set the movie frame rate to n fps.