animating an equation

8/6/2019 Animating an Equation

1/21

International Journal of Mathematical Education in

Science and Technology, Vol. 39, No. 5, 15 July 2008, 637655

Animating an equation: a guide to using FLASH

in mathematics education

Ezzat G. Bakhoum*

Department of Electrical and Computer Engineering, University of West Florida,Pensacola, FL 32514, USA

(Received 3 August 2007)

Macromedias FLASH development system can be a great tool for mathematicseducation. This article presents detailed Flash tutorials that were developed andtaught by the author to a group of mathematics professors in a summer course in2005. The objective was to educate the teachers in the techniques of animatingequations and mathematical concepts in Flash. The course was followed by a2-year study to assess the acceptance of the technology by the teachers andto gauge its effectiveness in improving the quality of mathematics education.The results of that 2-year study are also reported here.

Keywords: FLASH animations; FLASH tutorials; mathematics instruction;interactive learning methods

1. Introduction

FLASH is a very powerful graphics and animation development system that wasintroduced by Macromedia (now a subsidiary of Adobe Systems) in 1997. Over the past

decade, it has become the de-facto standard for animation, gaming and multimedia

applications on the World Wide Web. While Flash can also be a great educational tool for

science and mathematics, such applications unfortunately have not kept pace with the

commercially driven applications. The root of the problem, in reality, has not been the lack

of financial motivation, but rather the lack of tutorials and techniques that can be taught

to mathematics and science teachers for incorporating Flash in traditional classroom

instruction. Mathematics in particular especially college level mathematics can be very

challenging in that regard because the use of animations in mathematics education require

that the developer must learn, at the most fundamental level, things such as: how to makea moving graphical object obey an equation; how to read parameters from the users input

device and control the progress of an animation; etc. Unfortunately, without articles in the

literature that are dedicated specifically to tutoring mathematics teachers on the

implementation of animation techniques, mathematics teachers will remain unable to

incorporate those very powerful new technological tools in their instruction.

The author of this article has developed and taught a summer course that introduced

graphics animation techniques, particularly by using the Flash development system, to a

group of college-level mathematics professors. The objective of the course was to educate

the teachers in the basics of mathematics animations with Flash and to gauge their

*Email: [email protected]


2/21

acceptance of the technology. In a follow-up study over a period of 2 years, statistics were

collected about the level of adoption of this technology by the teachers and the degree

of success that was achieved by incorporating the technology in classroom instruction.

The objective of this article is 2-fold: first, to give a tutorial in the basics of animating

mathematical equations with Flash to the wide audience of mathematics teachers;

secondly, to report the results of the 2-year study that was conducted concerning theadoption and use of the technology.

In the literature, there is of course no shortage of studies about the effects and the

benefits of multimedia and animations in classroom instruction. Sowell [1] studied such

effects long before the modern animations tools were introduced. Lieu [2], Syrjakow

et al. [3], Balci et al. [4] and Mohler [5] discussed the use of interactive graphical tools in

applications such as engineering education, computer science education and ecology.

Lowe [6] presented a study of the psychology of student interaction with animations.

Schaffer and Overcast [7] described some important concepts in the interactive learning

process, such as the design principles of an interactive learning environment, the

technology needed for gauging human performance, etc. Mayer [8,9] published anextensive study of the cognitive and psychological aspects of multimedia learning.

Rickman et al. [10] pointed out that multimedia applications have slowly transformed the

typical university communication network to an education delivery system. Shank [11]

argued in a short article for the first time that the Macromedia Flash development system

can be a serious instructional authoring tool (this is the view shared by the present author).

Um et al. [12], Jacobs [13], and recently Garcia et al. [14] demonstrated some specific Flash

examples for mathematics teaching. Unfortunately, however, no code or programming

details were discussed by those authors.

Unlike the previously published works, this article is dedicated to educating high-school

and university teachers in the basics of mathematics animations with Flash. Since the readermay not have had a prior introduction to Flash, detailed step-by-step instructions for

implementing the tutorials described here are given in the Appendix of the article. This

article is organized as follows: Sections 2 and 3 contain detailed examples of animation of

mathematical concepts and equations in Flash, including the full code used (references to

the Appendix are made for step-by-step implementation of trivial details). Section 4 reports

the results of the 2-year study that was conducted to gauge the acceptance of the technology

by mathematics teachers and its level of success in classroom instruction.

2. Animation Example 1: the derivative of a function

In this example we shall demonstrate how to plot the function Y X2 in Flash, how to

represent its derivative by means of a line that is tangent to the curve, and how to animate

the tangent line in response to movements of the users mouse. The objective is to

allow the student to move his/her mouse along the curve and observe how the slope of

the function changes, graphically and numerically, as the mouse points to different parts of

the curve.

2.1. Plotting the curve Y^X2

We shall start by creating a movie called graph (see Procedures 1 and 2 in the Appendix).

The movie should be totally empty. Create a second movie called graph_holder. Insidegraph_holder, drag and place a copy of the movie graph (see Procedures 3 and 4 in the

A di ) I th P ti fi ld t th b tt f th i thi i t f

638 E.G. Bakhoum


3/21

the movie the name graph, and enter (0, 0) for the X and Y coordinates of the movie.

Now put the following code in the Action field of the first and only frame that exists in the

movie graph_holder (see Procedure 5 in the Appendix):

var x:Number;

var y:Number;graph.lineStyle(2, 0x000000, 100);

graph.moveTo(200,200);

for (x 200; x5 200; x) {

y Math.pow(x,2) / 200;

graph.lineTo(x, y);

}

The first two lines in the action define the variables x and y as numbers. The third line

defines the style of any plotting that will occur inside the movie graph: the value 2 in the

linestyle definition specifies a line thickness that is twice the standard thickness, the nextnumber is the hexadecimal code for the colour black, and the third number indicates that the

plot will be a solid line (see more about the linestyle command in the Flash Help menu). The

fourth line specifies that any plot should start at the coordinates (200, 200) (explanation

will follow). Notice that the instructions graph.lineStyle and graph.moveTo specify the

movie instance graph as the place where the plot definitions apply. The following three

lines represent a for loop that will actually plot the curve Y X2. The curve will be confined

within a rectangular zone of 400 200 pixels. As we can see, the first line in the loop is a

typical C-like statement that invokes the loop for all values of x from 200 to 200. The

third line in the loop graph.lineTo(x, y) simply plots a segment of the curve from the

current x, y position to the newly calculated x, y position.The second line in the for loop is the most important line. This is where the coordinate

y is calculated as a function of x. First of all, the function Xn is written in Flash as

follows: Math.pow(x, n). Now, when we raise x 200 to the power 2 we get y 40000

pixels, a value that cannot possibly be displayed on any computer screen! Hence, some

scaling of the Y axis is necessary here. The instruction Math.pow(x, 2) / 200, therefore,

calculates the value of y in pixels and scales the result by a factor of 200, so that the

maximum y will be only 200 pixels. Finally, we note that a peculiar characteristic of Flash

is that the Y-axis is inverted (i.e. the Y scale increases down)! This particular feature was

implemented in Flash so that animations will be more manageable on the screen (more on

that later), but in our present example this means that we simply have to insert a negativesign in the result so that the Y X2 curve would look normal on the screen. Notice that

the first data point on our curve is x 200, y 200, and hence the command

graph.moveTo(200, 200), which specifies the starting point of the graph. When you

test your animation at this stage (select Control ! Test Movie), you should see the

following plot on the screen (Figure 1).

2.2. Adding and animating the tangent to the curve

We shall add first two permanent lines to represent the X and Y axes. By using the

button in the Library window of the project (see Procedure 6 in the Appendix), add twonew graphical symbols: one vertical line to represent the Yaxis and one horizontal line to

represent the X axis You may also want to add another symbol and call it arrow head

International Journal of Mathematical Education in Science and Technology 639


4/21

Draw a small triangle to represent the arrowhead. Now, inside the graph_holder movie,

drag and place your lines and your arrowhead. Your Xand Yaxes should intersect exactly

at the location of the movie graph. Place the arrowhead at the end of one of the axes, then

duplicate the arrowhead, rotate the copy 90, and place it at the end of the other axis.

Place the labels X and Y near the arrowheads (make sure to select the static property

for the text).

At this point a test of your animation should show the plot shown in Figure 2. We shall

now create a simple line to represent the tangent to the curve and then animate that line in

response to the users mouse movements. Start by creating a new movie called tangent. In

that movie, draw a simple horizontal line of any suitable length. You may want to select a

colour for that line that is different from black. In the graph_holder movie, drag and

place a copy of the movie tangent, and give it the name tangent in the Properties field.

Now, move the tangent line until its centre coincides exactly with the movie graph (andhence the intersection of the X and Y axes). Finally, close the graph_holder movie and

d it t it bl l ti i th i di l ( th ll d t i )

Figure 1. Plot of the curve Y X2 rendered by the code listed above.

Figure 2. Plot after the X and Y axes are added.

640 E.G. Bakhoum


5/21

The next step is important. We want to be able to point the mouse to any point on the

Y X2 curve and have the tangent line (and preferably its centre point) be at the same

point. In order to do this, we must measure the distance in pixels from the movie graph to

the left edge of the display area; because, while the movie graph is at coordinates (0, 0)

with respect to the graph_holder movie, the graph_holder movie is still displaced with

respect to the origin of the root movie. Now, in the root or main movie, simply draw ahorizontal line from the left edge of the display area to the centre of the graph movie

(which will be indicated by a very small circle). Record the length of that line (which will be

displayed in the Properties box), then delete it. Let us say you found the distance to be 276

pixels. Now, click on the graph_holder movie to select it, and put the following code in

the Action field of the graph_holder movie (see Procedure 7 in the Appendix):

onClipEvent(enterFrame){

var theta:Number;

if (this.hitTest(_root._xmouse,_root._ymouse) true){

this.tangent._x _root._xmouse 276;

this.tangent._y Math.pow((this.tangent._x),2) / 200;

theta Math.atan(2*this.tangent._x/200) * 180/Math.PI;

this.tangent._rotation theta;

}

}

The first line in this code is an onClipEvent(enterFrame) directive, which simply means

that the code should be executed repeatedly. The second line is a definition for a variable

called theta. The third line is an if test for a specific condition. The condition is that the

mouse coordinates fall within the coordinates of the movie graph_holder. The statement

this.hitTest specifies that a hit test should be determined for the movie to which thecode is assigned (in this case, the graph_holder movie). The hit test means a check to see

if the movies coordinates overlap with the coordinates of something else. The other

object is then specified between parenthesis. In this case, the other object is

_root._xmouse,_root._ymouse , or simply the users mouse coordinates. Notice the

syntax with which we refer to the root movie (_root) and the mouse coordinates

(_xmouse,_ymouse). In Flash, object properties must generally be preceded by the

underscore symbol. Now, if the hit test is satisfied, we must move the tangent movie so

that the x and y coordinates of its midpoint would lie on the point on the curve to which

the mouse is pointing. This means that the x-coordinate of the midpoint should be the

same as that of the mouse and that the y-coordinate must be the same as that of the

corresponding point on the curve. The first two lines in the if statement accomplish

that task. In the first line, notice how we refer to the x-coordinate of the tangent movie,

which lies inside the current movie: this.tangent._x. You will also notice here that the

276 pixels that represent the horizontal offset between the origin of the graph_holder

movie and the origin of the root movie are subtracted from the mouses x-coordinate so

that the midpoint on the tangent line will be positioned correctly within the graph_holder

movie. The second line in the if statement is straightforward and simply sets the

y-coordinate of the tangent line equal to x2 (with a scaling factor of 200, as was done for

the curve). The third line in the if statement is the most important line of code. That line

calculates the derivative of the function Y X2 and then obtains the angle of inclination

of the tangent line from the calculated slope. The derivative of the function y x2

isof course 2x, and this is obtained from the statement 2 * this.tangent._x / 200

( ti th t i th Y l i d d b f t f 200 th li f t t b



6/21

applied to the slope calculation). The angle of inclination of the tangent line is then

simply calculated by using the arctan function, Math.atan, as shown. Now, remember

that the angle so calculated will be in radians, and hence we must convert from radians to

degrees by multiplying by 180 and dividing by Math.PI. Finally, remember that our

curve is actually inverted! (as far as Flash is concerned), and hence we must change the

sign of the inclination angle calculated. In the third line of the if statement above, the

angle calculated is given the name theta, and the fourth line finally calculates

the this.tangent._rotation (the rotation property of the tangent movie) as the

negative of theta.Test your animation at this point and move the mouse along the Y X2 curve.

You should see the tangent line positioned at the point on the curve where the arrow is

pointing and properly rotated so that it is perfectly tangent to the curve. The picture will

change as the mouse points to different parts of the curve. The display that you will be

seeing is shown in Figure 3.

2.3. Adding a display of the x-coordinate and the slope of the function

We shall now add a few more components and two extra lines of code to continuously

display the x-coordinate and the slope of the tangent line (which is equal to 2x), as themouse points to different parts of the curve. Edit the graph_holder movie and add two

dynamic text fields at any suitable location (see Procedure 8 in the Appendix). In the Var

box within the Properties window at the bottom of the screen, type something like

x_display for the first dynamic text field and something like slope_display for the second

dynamic text field. This step gives a name to each dynamic text field so that the field can be

addressed externally from the code that is controlling the movie. In front of the first field,

put the following static text: X , and similarly put the text Slope in front of the

second field. Now, before we discuss the code that will be continuously filling the dynamic

text fields, we have to point out that if we simply display the x-coordinate of any point on

the curve in pixels and then obtain the slope of the function from the relationshipSlope 2x, the value of the slope so calculated will be incorrect. The reason is that the

l i ti f di l t di l t d th Y l l d d

Figure 3. The animated tangent line moves in response to the users mouse movements.

642 E.G. Bakhoum


7/21

by a factor of 200. Accordingly, in order for the slope to be calculated correctly, the Xscale

(just for the purpose of calculating a slope) must also be scaled down by the same factor.

Two extra lines of code are now needed to update the dynamic text fields, and the

following is the complete Action code:

onClipEvent(enterFrame){

var theta:Number;

if (this.hitTest(_root._xmouse,_root._ymouse) true){

this.tangent._x _root._xmouse 276;this.tangent._y Math.pow((this.tangent._x),2) / 200;

theta = Math.atan(2*this.tangent._x/200) * 180/Math.PI;

this.tangent._rotation theta;

this.x_display this.tangent._x / 200;

this.slope_display 2* this.x_display;

}

}

The fifth line that was added addresses the x_display dynamic text field within the current

movie and simply assigns the x-coordinate of the point under consideration, scaled by afactor of 200, to that field. The last line addresses the slope_display field and assigns to it

a value that is twice the value just obtained in the previous line. At this point, our

animation is complete and the display should look like Figure 4.

3. Animation Example 2: numerical integration with real-time display

In this example we shall demonstrate the relationship between Distance (D) and

Velocity (v), such relationship being given by

D Zv

0

v dt 1

Figure 4. Animation after the addition of the X and Slope dynamic text fields.Note: Notice that an extra small circle was added at the midpoint of the tangent line to enhance theappearance.



8/21

where t is the time. Figures 5 and 6 show different displays of the animation that we will be

creating shortly. In Figure 5, a car is made to travel at a constant velocity, and a straight

line representing the distance traversed by the car as a function of time is plotted in real

time as the car moves. In Figure 6, the user is allowed to drag the car with his/her mouse,

and the velocity will be of course variable. In this case, a numerical integration is

performed and the result is also plotted in real time as the user drags the car.

3.1. Creating the car animation

Our first task in this project will be to create a movie called car_movie that will show thecar in motion. First of all, we need to import two external pieces of graphics for this

project: a small picture of a car and a small picture of a button (as shown in the figures

above). There are numerous graphics libraries on the Internet where such pictures can be

found. They are usually in the .gif or .jpg formats. Once the pictures have been

obtained, we need to import them into the project. Click on File ! Import ! Import to

Library, and select the graphic to be imported. Repeat for the other graphic. Save the cars

graphic under the title car and the buttons graphic under the title button. Now follow

the following steps to create the car animation movie:

(1) Create a movie called car_symbol. Drag a copy of the graphic car and place it in

that movie. Move the car graphic so that its coordinates are (0, 0).(2) Create a new movie called car_movie. Drag a copy of the movie car_symbol and

l it i th t i M k it di t (0 0)

Figure 5. First animation display: a car is travelling with a constant speed, and the distance is alinear function of time.Note: The slope of the straight line is v.

644 E.G. Bakhoum


9/21

(3) In the Timeline of the car_movie, right-click on Frame 1 and choose Insert

Keyframe. This will make Frame 1 a key frame in the animation. Now right-click on

Frame 49 (explanation will follow) and insert a key frame there also. In Frame 49,

the car will need to be at the end of the trajectory. So, select the car and type a

number like 350 in the x-coordinate box (leave the y-coordinate unchanged!).

(4) Right-click anywhere between Frames 1 and 49 and choose Create Motion

Tween. You should now see a very long arrow pointing from Frame 1 to

Frame 49. The design display should look like Figure 7 below.

The important question now obviously is why exactly 49 frames were chosen to animate

the cars movement? By default, a Flash movie plays at a rate of 12 frames per second

(or fps). In this example, it was decided that the entire duration of the animation

should be 4 s (which can be made longer or shorter, as suited). Now, 4 s 12 fps 48

frames. In reality, the first frame does not count because it is always a frame where

t 0. Hence, a total of 49 frames are needed. If you actually click on Frame 49, you

will see the duration of 4.0 s displayed in the Timeline (as shown in the figure

above). Now choose Control ! Play from the command menu, and you should see the

car moving slowly from the start point to the end point of the animation, taking

exactly 4 s.

To finish the car animation movie, put the following code in the Actions of

Frames 1 and 49:

stop();

Figure 6. Second animation display: the user drags the car with the mouse and the velocity isvariable.Note: Here, D is calculated by numerical integration and the result is displayed in real time.



10/21

This instruction is pretty simple: it just stops the animation at Frame 1 so that theanimation will remain in that frame until invoked by an external command. The same

occurs in Frame 49, or the last frame in the animation.

3.2. Adding the control buttons and the graph movie

In the main project display, drag a copy of the car_movie just created and place it

at coordinates (0, 0). Under the car, draw a horizontal line of any suitable length

(see Figures 5 and 6 above). Now create a new button component (see Procedure 9 in

the Appendix), and place the button graphic in that component. Drag and place

two copies of the newly created button in the main project area (see figures). Those buttonsdo not need to be given instance names. Place text that reads Move the car at

constant speed next to the first button, and text that reads Clear and restart next to the

second button, as shown. Select the first button and put the following code in its

Action field:

on(release){

car_movie._x 0;

drag false;

graph.clear();

graph.lineStyle(2, 0x000000, 100);

graph.moveTo(0, 0);

car_movie.play();

}

Now select the second button and put the following code in its Action field:

on(release){

car_movie._x 0;

drag false;

graph.clear();


graph.moveTo(0, 0);car_movie.gotoAndStop(1);

}

Figure 7. The design display of the car_movie after the creation of the Motion Tween.

646 E.G. Bakhoum


11/21

Finally, put the following code in the Action field of the one and only frame of the main

project:

var drag:Boolean false;


graph.moveTo(0, 0);

Now we need to create an empty movie called graph. This is the movie that will actually

plot the graph and is just like the graph movie of the previous example. Drag and place

the graph movie at any suitable location in the main project area, and give it the instance

name graph. Create Xand Yaxes as was done in the previous example, and place the axes

such that the movie graph is exactly at the origin, as shown in Figures 5 and 6. Let us now

examine the code that was just assigned to the buttons and the main Action. The first line

of code in the main Action defines a variable called drag as a boolean variable (i.e. either

true or false), and sets its original value to false. This variable will be set to true when the

user drags the car with his/her mouse, as we shall see. The following two lines wereencountered in the previous example, and have the purpose of setting up the linestyle in the

graph movie and resetting the coordinates for plotting to (0, 0). The code assigned to the

button Move the car at constant speed has the function of setting up all the initial

conditions properly and then activating the car movement animation. Specifically:

(1) It moves the the car_movie to its initial position (x 0) if it is not already there;

(2) It sets the boolean variable drag to false if it was altered (as we shall describe);

(3) It clears any plotting that did occur in the graph movie;

(4) It sets the linestyle in the graph movie, as we saw earlier;

(5) It sets the original coordinates for plotting in the graph movie to (0, 0), as we also

saw earlier;(6) It finally instructs the car_movie to play, i.e. start the animation. (Notice the

syntax of the instruction).

The code assigned to the button Clear and restart is identical, as can be seen, with the

exception being that the last instruction resets the car movie itself. That is, if the car

movie played by the effect of the first button, then the current frame in the movie will be

Frame 49. The instruction car_movie.gotoAndStop(1) resets the movie back to Frame 1,

so that the animation can be repeated if desired.

3.3. Making it all work

The last addition that we need in this example is the main code that performs numerical

integration of velocity over time. Select the car_movie and put the following code in its

Action field:

on(press){

startDrag(this, false, 0, 0, 350, 0);

if (_parent.drag false && this._currentframe ! 49){

var timer_start getTimer();

_parent.drag true;

var x_position 0;var x_position_old = 0;

dist n 0



12/21

}

}

on(release){

stopDrag();

}

onClipEvent(enterFrame){if (this._currentframe ! 1){

_parent.graph.lineTo((this._currentframe-1)*10,

-(this._currentframe-1)*7.29);

}

if (_parent.drag true){

x_position_old x_position;

x_position this._x;

var velocity (x_position x_position_old) / (1/12);

distance velocity * (1/12);

var current_time getTimer();var time_elapsed (current_time timer_start)/1000;

_parent.graph.lineTo(time_elapsed*60, -distance);

}

}

This code is composed of three parts, with the third part being the main function. The first

part of the code specifies what will occur when the user clicks on the car (the statement

on(press)). First, the instruction startDrag(this, ...) means that dragging of an

object will be allowed; the object in this case being this, or the car movie. The next

argument of the startDrag instruction is a boolean lock for the object, and in most cases

is set to false. The next four arguments specify the boundaries of an area inside which theobject must be confined while being dragged. The numbers specify the distances, from the

current location of the object, to the left, top, right, and bottom, respectively, of the area

where the movement of the object must be confined. (Note that specifying a confinement

area is optional). As we can see from the numbers in the code, the car_movie is only

allowed to travel 350 pixels to the right.

The next if statement describes actions that will be taken only if the variable drag

in the parent (or main) movie is false and if the current frame of the movie is not

49 (which means that the movie has not played by order of the Move the car at constant

speed button). Notice the syntax for specifying a variable that exists in the parent movie

(_parent.drag) and for specifying the current frame of the movie (this._currentframe).The first action that will be taken is a reading of the current time, provided by a Timer

function that uses the computer clock. The instruction for reading the timer is

getTimer(). Here, the value returned by the function is stored in a variable called

timer_start. Next, we set the parents drag variable to true, indicating that a dragging

process is underway. The purpose of this variable is to prevent re-reading of the timer in

the event that the user relinquishes the car momentarily and then resumes dragging (see the

condition of the ifstatement). The next three instructions are definitions of variables called

x_position, x_position_old, and distance. Those variables will be used in the numerical

integration part of the code.

The second part of the code is only one instruction: on(release){ stopDrag(); }.This instruction does the obvious thing: the dragging is stopped on release of the car

i bj t

648 E.G. Bakhoum


13/21

The third part of the code is where all the interesting calculations really are. Like the

previous example, it is a block of code that is executed in every frame of the movie

(that is, repeatedly). Here, we describe two different ways for measuring time: the

elaborate getTimer() function, and a simpler method that is based on knowledge of

the frame number and the frame rate (fps). In the first ifstatement, the movie is checked to

see if its current frame is different from one. If this is indeed the case, this means that the

movie has been animated with the button Move the car at constant speed, and hence

the car is travelling with a constant speed. In such a case, a reading of the time

elapsed can be obtained by simply reading the current frame number. Since each

frame takes exactly one-twelfth of a second in the animation, then Frame 2 is equivalent

to 1/12 s, Frame 3 is equivalent to 2/12 s, and so on. The statement (this._current-

frame-1) accomplishes that goal. To display the time as an x-coordinate (in pixels),

all what we need to do is scale the frame number by a suitable constant. The statement

(this._currentframe-1)*10 above multiplies the frame number by 10, so that the

first frame in the animation (Frame 2) is represented by 10 pixels. The next frame will be

represented by 20 pixels, and so on. This multiplier can be changed as suited. Let us nowconsider the display of the y-coordinate, which is a representation of time multiplied

by a constant velocity (or distance travelled). As we have seen, the car will travel a

maximum of 350 pixels to the right. This entire action takes exactly 48 frames, so

in each frame the car will travel 350/48 7.29 pixels. The statement (this._current-

frame-1)*7.29 simply multiplies the current frame number by that constant to

calculate the distance travelled by the car. The instruction _parent.graph.

lineTo((this._currentframe-1)*10, -(this ._currentframe-1)*7.29); then,

calculates the correct x and y coordinates for the straight line plot, and instructs the

graph movie (which exists in the parent movie) to plot a segment from the current x, y

coordinates to the newly calculated x, y coordinates. The result of this one instruction isshown in Figure 5.

Let us now consider the numerical integration part of the code, which gets

executed when the user drags the car movie with the mouse. Here, we will be using

the rectangular rule instead of the trapezoidal rule of integration for simplicity. The

instruction if(_parent.drag true) checks the condition of the parents drag

variable. If a dragging process is underway, the first three lines of the if statement

calculate the velocity of the car in pixels per second. This is simply done by reading

the current position of the car (this._x), subtracting from it the previous position,

and dividing by one frame duration or one-twelfth of a second. In the following line,

the differential increment vt is calculated by simply multiplying the velocity justobtained once again by one frame duration or 1/12 s This differential increment is

then added to the overall distance travelled by the instruction distance

velocity * (1/12). Since the distance travelled must be plotted versus total time

from the start, it is most appropriate to use the getTimer() function here to

calculate that time. As can be seen from the code, the time at the start is subtracted

from the current time that is obtained by invoking the timer function once again,

and the difference will be a number in milliseconds. The elapsed time in seconds is

then calculated by dividing the number obtained by 1000. The final instruction in the

code _parent.graph.lineTo(time_elapsed*60, -distance) then plots a segment

from the current coordinates of the plot to the new coordinates given by (elapsedtime, distance). Notice here the negative sign given to the y coordinate, and also

notice that the elapsed time is scaled by an arbitrary constant (here 60) The res lt of



14/21

this part of the animation is shown in Figure 6. The user obtains such a plot by

simply dragging the car.

The foregoing concludes the tutorial part of this article.

4. Results of a 2-year study to gauge the acceptance of the technology by mathematics

instructors

A study was conducted over a period of 2 years after a summer course in 2005 in which the

author introduced the animation techniques described above to a group of 15 professors of

mathematics. The objective of the study was to determine three important unknowns:

(1) The teachers perception and reaction to this new educational technology after

being introduced to it.

(2) The teachers willingness to adopt the technology in their classroom instruction,

and their efforts to actually implement it over the period of the study.

(3) A measure of the improvement in the students test grades in addition to thestudents evaluation of the new instructional methods (for those teachers who

actually did adopt the technology in their classroom instruction).

Overall, the goal was to determine the effectiveness of the Flash tutorials given above

in improving the quality of education of mathematics by stimulating the interest in

animations as a new tool for teaching mathematics.

4.1. Teachers reaction to the Flash tutorials and their adoption of the technology

The teachers immediate reaction to the Flash tutorials was overwhelmingly positive, with

100% of the participants saying that this new technology is very important and that it

greatly enhances the students ability to visualize the abstract mathematical concepts.

However, only 40% of the participants said that they will adopt the technology in their

classroom instruction right away. The remaining 60% were unsure about their own ability

to include Flash animations in their instruction. One year later, however, 11 out of the

15 participants (or 73%) were actually found using Flash animations in their classroom

instruction. The professors developed their own animations to teach things such as

differential equations, matrix theory and differential geometry (those applications may be

submitted later for publication by their respective authors). By the end of the study after

2 years, 13 out of the 15 professors were using the technology. Of the remaining two

participants, one professor indicated that he will be using the technology very soon andonly personal circumstances prevented him from using it for 2 years. The last participant

said that although he likes the technology very much, he is unlikely to find the time to

implement it in the foreseeable future.

What we might call the acceptance curve of the Flash animation technology as a

mathematics instruction tool will be therefore as shown in Figure 8 below. The curve

plateaus at about 93%. While the curve would have likely been different had the study

included a larger number of participants, the striking feature is that the initial acceptance

was quite low (40%) but increased rapidly to 86% within 2 years, and reached a plateau

that is quite high (93%).

It will be important to mention here that the participants did not seek any additionalhelp from the author during the 2-year study. They relied only on the tutorials given in this

ti l d th Fl h H l l Thi i di t th t th t t i l i h

650 E.G. Bakhoum


15/21

effective in jump starting the participants in learning the techniques of mathematics

animation with Flash.

4.2. Impact of the Flash animation technology on students performance

The author collected student test scores data from the 13 participants who had actually

used the technology for 2 years. By comparison with the scores obtained before the Flash

animations were used, the scores showed noticeable improvement. The minimum

improvement per case was 33% (that is, 33% of the students of a given professor

achieved better grades due to the animations). The maximum was 93%. The mean

was %65%. A histogram of the data collected is shown in Figure 9 below.

The data shown in the figure were obtained and calculated in the following manner:

each professor taught and gave a few exams at the beginning of each semester in a

traditional way (no Flash animations). The grades of the students were recorded.

Animations were then later introduced in the course. The new set of grades for each

student were compared with the old grades. The percentage of students who achieved

markedly better grades was then calculated. For each professor who participated in thestudy, the results were averaged over the number of semesters where the data

were collected.

It is to be pointed out that the data shown in Figure 9 applies to a study conducted at

one university only (with a number of participants from neighbouring universities).

Had the study been conducted in a large number of universities, the mean improvement in

the students test scores would have likely been different from 65%. The main point here,

however, is that there was indeed a very significant improvement in student test scores as a

result of introducing animations in traditional classroom instruction.

In addition to the statistics collected about the test scores, the students who were

tutored with the new techniques were also asked directly two questions after the conclusionof the study: (1) Do you agree that the Flash animations contributed significantly to your

d t di f ll th ti Y N ? d (2) D b li th t th

Adoption of flash

animation technologyin percentage

Time in years10

40

73

8693

2

Figure 8. Acceptance curve for Flash animations as a tool for mathematics education.



16/21

improvement in your scores was the result of better understanding due to animations: Yes

or No?. Approximately 98% of the students answered Yes to both questions.

5. Conclusion

In this article, we have given detailed tutorials to show how mathematical equations can be

animated in Flash. The instructors who attended these tutorials in the summer of 2005

were able to create new Flash animations of their own and incorporate those animations in

their classroom instruction. The teachers adoption of the technology was slow in the

beginning, but reached 86% after 2 years.There was clearly a very significant improvement in the students test scores as a result

of introducing animations in traditional classroom instruction; and the percentage of the

students who believe that animations of mathematical concepts did contribute significantly

to their understanding of mathematics was about 98%.

References

[1] E. Sowell, Effects of manipulative materials in mathematics instruction, J. Res. Math. Educ. 20(5)

(1989), pp. 498505.[2] D. Lieu, Using interactive multimedia computer tutorials for engineering graphics education,

J G t d G hi 3(1) (1999) 85 91

93% 90%86%

82%77%

66%62%

59% 57%51% 49%

40%

33%

Percentage improvement in

student test scores

Individual teacher

Figure 9. Histogram of the percentage improvement in student test scores for the 13 professors whoused Flash animations in their instruction for 2 years.Note: The mean improvement is 65%.

652 E.G. Bakhoum


17/21

[3] M. Syrjakow, J. Berbux, and H. Szczerbicka, Interactive web-based animation for teaching and

learning, IEEE Proceedings of the 2000 winter simulation conference, Orlando, FL, 2000,

pp. 16511659.

[4] O. Balci et al., Animations to assist learning some key computer science topics, JERIC. 1(2)

(2001), pp. 57.

[5] J.L. Mohler, Using interactive multimedia technologies to improve student understanding ofspatially dependent engineering concepts, in GraphiCon2001. Proceedings of the International

Conference on Computer Graphics and Vision, 2001, pp. 292300.

[6] R.K. Lowe, Extracting information from an animation during complex visual learning, Eur. J.

Psychol. Educ. 14(2) (1999), pp. 225244.

[7] S.P. Schaffer and S.M. Overcast, Learning system design considerations in creating an online

learning environment, Performance Improvement 40(9) (2001), pp. 3642.

[8] R.E. Mayer, Multimedia Learning, Cambridge University Press, New York, NY, 2001.

[9] R.E. Mayer and R. Moreno, Animation as an aid to multimedia learning, Educ. Psycho. Rev.

14(1) (2002), pp. 8799.

[10] J. Rickman et al., The evolution of the electronic campus: from a communication system to an

educational delivery system, ACM SIGUCCS 31st Conference Proceedings, San Antonio, TX,2003.

[11] P. Shank, Macromedia Flash MX: Serious instructional authoring tool,

Macromedia Resources. Available at //www.macromedia.com/resources/elearning/article/

flashmx_authoring/

[12] E.J. Um, K. Lei, and S. Schaffer, Evaluation of multimedia representation tools in mathematics,

AECT International Convention, 12, Chicago, IL, 2004.

[13] K.L. Jacobs, Investigation of interactive online visual tools for the learning of mathematics, Int. J.

Math. Educ. Sci. Tech. 36(7) (2005), pp. 761768.

[14] R.B. Garcia et al., Interactive multimedia animation with macromedia flash in descriptive

geometry teaching, Comput. Educ. 49(3) (2007), pp. 615639.

Appendix

What Flash is all about: Step-by-step instructions for implementing the tutorials

Flash is, fundamentally, a tool for making animations. Think about how cartoon animators work.They produce a series of pictures, called frames, where each picture is only slightly different fromthe following one. When such a sequence of frames is played at a high rate (usually 12 fps or more),the human eye interprets the whole sequence as an animation. In Flash, the sequence of frames thatyou create to make an animation is called the Timeline. This is the most important concept to graspwhen learning Flash.

Flash, however, is an animation tool with unprecedented capabilities. Here are a few of the verypowerful capabilities built into Flash:

. It contains an extensive set of mathematical libraries so that you can animate objects inessentially any way you like. You can make a fish swim along a sine wave curve or a fallingobject follow a mathematically precise parabola.

. You can create smaller movies, with their own Timelines, and embed them inside largermovies.

. You can import external objects, such as sound and graphics, and use them as componentsin your movies.

. Flash has a built-in drawing tool (similar to Microsoft Paint), with a very rich set offeatures.

. The most important feature of Flash is perhaps its built-in programming language, calledAction Script. Action Script is in many ways similar to C. It is an object-orientedprogramming language; but it is different, however, in that it hides all the low-level

i t k f th Th i kl d il A ti S i t t



18/21

define actions for the various components within the animation project. A movie,therefore, can have a set of predefined actions in addition to a Timeline. Due to this veryimportant feature, Flash is extensively used as a tool for creating games.

Since detailed introductory articles and tutorials on Flash do exist elsewhere, we shall rather focushere on a set of procedures that the reader, who is not familiar with Flash, can follow in order to

successfully implement the tutorials described in this article. The procedures are referenced earlier inthe text.

Procedure 1: To start a new animation project

Start Flash; a new blank document will start automatically. Click File, Save as, and save the projectwith a unique name.

Procedure 2: To create a movie

Click Window ! Library in the Command bar. On the left-hand side of the screen a new sectiontitled Library will appear. At the bottom of that section, there is an icon of a blank page with a sign on it (hereinafter referred to as the button). Click on that icon. A small window titled CreateNew Symbol will pop up. Click on Movie Clip, type a unique name in the Name field, then clickOk. Now, you will see a new symbol created for your movie in the Library.

Procedure 3: To edit a movie

Right-click on the icon of the movie in the Library, and select Edit. The Timeline of the movie willappear and the first Frame will be ready for editing.

Procedure 4: To place a movie or a graphic inside another movie

Click on the icon of the movie or the graphic in the Library, and drag the icon inside the movie thatis being edited. On the bottom-left of the screen, you will see that the component that you just placedhas Properties. Mainly, the properties are the name of that instance of the component and itscoordinates within the parent movie. Enter values for those properties as specified in the tutorial.

Procedure 5: Writing code in the Action field of a Frame

You can write programming code for either an instance of a movie or a single Frame within a movie.When a movie is being edited, normally one of the Frames will be selected. To assign Action to thatFrame, look for the arrow on the bottom-left of the screen with a label that says Actions-Frame.Click on that label. The Actions window will expand, and you can enter your code in that window.You can type your code directly inside the window, or you may type your code using any text editorand then paste it inside the window. The code specified will be executed whenever that Frame of themovie is played.

Procedure 6: To create a graphical symbol

Follow the steps given in Procedure 2 above, but select the option Graphic instead of Movie Clip.You will immediately have your new graphic in edit mode. Use the tools that appear in the Toolsmenu on the left of the screen to draw and colour your graphical item (very similar to MicrosoftPaint). You can also insert text at any time anywhere by using the Text Tool (appears as letter A) in

the tools menu. Of course, you can draw graphics directly inside movies by using the drawing tools.

Procedure 7: Assigning Action code to a movie as a whole

As indicated in Procedure 5, you can assign Action code to an instance of a movie, regardless ofwhether the movie has internal code in its Frames or not. To assign Action code to a movie, click onthe movie to select it. Find the arrow on the bottom-left of the screen with a label that says Actions-Movie Clip. Click on that label. The Actions window for the movie will expand, and you can enteryour code in that window as described in Procedure 5.

Procedure 8: Adding a Dynamic Text field

Dynamic text is simply text that is linked to a variable. Whatever the value of that variable happensto be, that value is always displayed in the field. For example, let us say you link a dynamic text fieldto a variable X. If the value of X happens to be equal to 5.23 at any instant during the animation,then the text field will display 5.23. To add a Dynamic Text field, click on the Text tool in the toolsmenu, then click once again at the location where you want the text to appear. A small box will bedi l d t thi i t I th P ti fi ld t th b tt f th th i d d

654 E.G. Bakhoum


19/21

menu. Click on that menu and select Dynamic Text. There is also a box labelled Var in theProperties field. In that box, type the name of the variable that the dynamic text field will be linkedto. Now you can set other properties, such as the font, size and colour of the text that will bedisplayed in the dynamic text field. Notice that you can resize a dynamic text field at any time bysimply clicking on it and pulling on the lower right corner of the box to resize it.

Procedure 9: To create a buttonButtons are graphical symbols that can have Action code associated with them (to execute a specificfunction when the button is pressed). They are simpler than movie clips because they do not haveinternal Frames. To create a button, follow Procedure 6 above, but select Button before thecomponent is created. By using the drawing tools, draw any graphical symbol to represent thebutton. Once the button is created, you can place it in your animation and assign Action code to it asdescribed in Procedure 7.



20/21


21/21

animating an equation

Documents