Making animations

by G. Donald Allen
Department of Mathematics
Texas A&M University
College Station, TX 77843-3368
dallen@math.tamu.edu

Abstract. One of the more powerful enhancements to almost any teaching function is motion. On the Internet one kind of motion is animation. To illustrate a concept, whether it be showing the changing slope of a line to showing the secant line approach the tangent line, the animated image conveys the understanding virtually beyond the best efforts of classroom instructors. There are several ways to make animations for mathematics, and in this short paper, we will describe several of them. From Maple to Flash, from MATLAB to JavaScript, the potential is amazing.

Introduction

What features can an online course have that a traditional classroom format cannot? The list is growing.

What can an online course do that a classroom teacher cannot do? The list is growing. The content can be ever present, but that is easy. With simple tools such as an HTML editor, a graphics editor, and a bit of scripting, an author can show almost any image imaginable with vibrant colors, consistent and tasteful style. Even interaction is possible, though the scripting is more difficult. However, making animations for the Web is one of the more exotic Web activities and seems to be somewhere on most everyone's "to do" list. Making interactive animations and movies is the most desired Web activity for educators, the belief being that motion is a powerful visual and educational tool and interactivity simulates (somewhat) the activity of the teacher. Allowing student experimentation is naturally good, but showing the dynamics of an intrinsically changing situation is often as good. An non-interactive but animated visual experience can be a powerful teaching tools, as well. Indeed the animated image is one of those growing number of online features that have transcended the best that the traditional classroom offers. In this short tutorial we illustrate both types, interactive and static. We will cover Maple, animation editors, Flash and JavaScript, concluding with a touch of MATLAB. Though with extensive programming, animations can be created that match professional quality, our emphasis will be on what an individual can do without a large time investment. Creating animations in an afternoon will be our goal.

Animations are created by two different techniques. The oldest and most primitive animation is made by the rapid display of many images, or frames, each with a slight change from the previous one. In the early days cartoons were made of literally thousands of images, stitched together in exactly this way. Modern video cameras make movies in just the same way, though using photography to make each image. Animated GIF images are simply a collection images put together in a manner that most browsers will display frame by frame. On the other hand modern cartoons and for example Flash animations use a stage, multiple layers and tweening software to simulate the motion. This means that a layout or background needs to be stored just once, with the object to be moved place another layer and on top of the background. The player follows simple programmed instructions on how the object is to be moved. The results is a far more economical animation. JavaScript and Java can make animations by either method or a combination.

Animations with Maple

Although making animations is eminently possible with just HTML and some scripting, the task is simpler and the results are often just as powerful with additional software tools. The animation tool familiar to most of us is Maple. Its ease of use and versatility have allowed the creation of many animations that convey concepts with a transparent ease that have forever eluded the classroom teacher. For example showing a surface from differing azimuthal and orbital angles is a formidable challenge to us all — in the classroom. With Maple it is a few minutes work.

At least two methods can be used to make Maple animations. The first uses the animate command, for which the correct syntax is:

animate(F, x, t)

animate(F, x, t,...)

Here F = function(s) to be plotted, x = horizontal range, t = frame parameter range. A typical call to the animate function is animate(F(x,t),x=a..b,t=c..d), where F is a real function in x and t, and a..b specifies the horizontal real range on which F is plotted while c..d specifies how the frame coordinate varies from one frame to the next. A vertical range can be specified via the view option. The animate command merely calls the plot command for each t in the plot range. It also has a player to display these images. Images for now should be regarded as opaque, for example drawing on paper. Later on, we will see what can be done by way of making a Maple animation on transparacies such as for an overhead projector.

Example. Below is the Maple code for a tangent line moving along a sinusoid.

animate({sin(x),cos(t)*(x-t)+ sin(t)},x=0..2*Pi,t=0..2*Pi,frames=20, color=red);

with(plots):
p2:=plot(sin(x),x=0..2*Pi,6..6,color=blue,thickness=2): p1:=animate(cos(t)*(x-t)+ sin(t),x=0..2*Pi,t=0..2*Pi,frames=20, color=red):
display({p1,p2});

As is evident, this animation consists of a single animation, the moving tangent line and the single plot of the sine function. They are displayed together. While a bit more than just what the simple plot command can give, it does have an remarkable effect upon students viewing it.

The Maple help menus are excellent, and it pays to become accustomed to using them. One can obtain help on virtually every maple command merely by asking a command linequestion such as: ?animate. For three-dimensional animations, use ?animate3d.

Maple animations have one flaw that makes them less useful than they could be. When exported and displayed in a browser, the Maple generated animations run at full speed. That is, the frame rate is maximal for the computer graphics card. The faster it is the faster the animations run. There are three ways to prevent or alter this fact. On can make several images of the same frame. One can make more frames, generating a smoother action. The best alternative is to insert a time control between frames, thereby changing the frame display rate. The first two methods can be done within Maple. The expense is somewhat larger animation. The other two can be accomplished with an animation editor or a specialty animation movie tool such as Flash. Both will be discussed later.

The second way to animate within maple is to create the plots, place them in an array, and then display them in sequence. Indeed this method is far more powerful than the animate command above. It gives the user true control of what is happening. One appropriate syntax is thus:

Box:=Null;

for i from 1 to 6 do

Box:=Box,plot(f(i,x), x=a..b): od;

display(Box, insequence=true);

This construct allows the use of the more power plot command. It moreover allows, the concatenation of multiple animations as one.

Example. Our first example shows the interpolating polynomials at equally spaced points to a particular function, f(x). Though not terribly simple, it shows that with a bit of imagination, one can bring to life those functional features that render so well as animations.

Box:=NULL: N:=11;a:=-5;b:=5; pl:=array(1..N+1):pl[1]:=plot({f(x)},x=a..b,-1..2,color=blue,title=`Equally spaced points`):
Box:=Box,pl[1]:for n from 4 to N+3 do x:=array(1..n+1);y:=array(1..n+1); xx:=NULL; yy:=NULL; delt:=evalf((b-a)/n);for i from 1 to n+1 do x[i]:=a+(i-1)*delt; xx:=xx,x[i];y[i]:=f(x[i]);yy:=yy,y[i];od:g:=interp([xx],[yy],x);pl[1+n-3]:=plot([f(x),g],x=a..b,-1..2,color=[blue,red],title=`Equally spaced points`);Box:=Box,pl[1+n-3];od:
display([Box],insequence=true);

Here we have used color options, loops, and the interp command to create the interpolating polynomial . Using the taylor and convert(.,polynom commands it would easy to adapt this code to create an animation higher order Taylor polynomials for any given function. Replacing the interp command by the spline command, the same code will generate spline approximations.

There are certain attributes that cannot be animated within the animate3d command. One particular example is the orientation option, whereby the user can alter the azimuthal and orbital viewing angles for the plot. This is a perfect situation to use our new display in sequence method. Below is a simple code to view a paraboloid from the view point of a 45^o angle from the vertical and with the orbital angle (q - theta) rotating about the circle.

n:=25; box:=NULL; for i from 1 to n do s:=360/n*i;
box:=box,plot3d((x)^2+(y)^2, x=-1..1,y=-1..1, tickmarks=[0,0,0], orientation=[s,45], axes=boxed):od:
display(box,insequence=true);

As can be seen, we have made 25 total images for this animation. Interchanging the 45 and the "s" produces an interesting result. Both produce rather large animated GIF files (~350kb).

Saving the animated GIF. By right clicking the mouse (in MS Windows) withing the plot frame, and then selecting the Export as tab, the graphic export options become visible. Export as a GIF file. The size of the GIF file is proportional to the number of frames (images) made. The default number is 16 frames. This can be changed with the frames option. When we discuss Flash later, the export as a Metafile will take on some importance.

Animations with an (animation) editor

Animated GIFs, Graphics Interchange Format, were never intended as a platform for animation. These, the words of a CompuServe representative who wrote the GIF specifications back in 1987. But here we are doing just that...

Things have changed, particularly bandwidth has grown from a trickle to a swift stream and CPU speeds are more than tenfold faster. The Web is now a universal forum for art and communication.

The drawbacks of GIF89, when compared with Flash animations are real: It generally yields large file sizes; it doesn't compress well; it has no sound capabilities. On the plus side, it creates animated GIFs that almost every browser can see. For small animations such as logos, basic stories, and simple animated icons, the format works just fine. It also works admirably in combination with other animation mediums, such as dHTML and Flash. It has been used to excess; perhaps you've been annoyed too by those ad banners giving that "in your face" advertising.

The simplest way to make the widest variety of animations is with an animation editor. What one of these editors can do is "stitch together" a collection of GIF files into an assemblage that most browsers show sequentially. Between each pair of files there is normally a control segment that specifies the time delay, color transparancy, and a few other parameters. The time delay, that is the time between images, is the most important.

The basic structure of an animated GIF file follows:

Header
Loop
Control
Image1
Control
Image 2
:::::::
Image n
Comment File Identity
Block Names

The header specifies the size of the GIF file, the background color, and the palette (number of colors) to be applied. The loop is a counter that specifies the number of times an animation should loop. It can be set from 1 to 32760. The control specifies the time delay between images, usually in hundredths of seconds. The delay can change from image to image. The control can also specify a color transparency. The images are user created or furnished. The comments file identity gives the name of the creator and any comments the creator wishes to insert. Comments can be placed before any image and there can be as many comments as desired. These are the bare-bone basics of these fields. Usually many more options are available.

The editor we feature here is the GIF Construction Set from Alchemy Mindworks of Ontanio, Canada. A good GIF editor for the Mac is GifBuilder by Yves Piguet.

Here is an example: It was made of the eight images below.

A portion of the header-loop-image-control sequence looks like this:

We have set the time delay to 20/100 seconds. The following example places a 80/100 second delay after the persimmon square:

A good animation editor is only as good as the images to be animated. However, great care must be taken to assure that annotations and graphics component are properly registered. Here are two examples, one done properly, the other not. Note the "O'Clock" annotation on the left animation seem to jump around.

Poorly Registered Annotation	Well Registered Annotation

How is it done with GIF Construction Set? It's really easy, almost too easy for the remarkable effect created.

First you will need your images.
Select File+Animation Wizard and then Next
Check a box for Web use or Other. Then Next.
Select to loop once or indefinitely. (You can edit this later to other numbers). Then Next.
Select your palette - matched palette always works. Then Next.
Select your delay - at this time it is uniform between images. Then Next.
Finally select your images in the order you want them to animate. You must select the directory and then the files. Multiple files can be selected at this time with the mouse - as normal in the windows environment. If you cannot select them in the order you want them to appear, you will need to repeat the process time after time, even individually if need be.
When all files have been selected select Cancel to stop the file selection.
Select Next unless you wish to delete files.
Now select Done. GIF Construction Set then stitches the files together. The result will be a screen similar to the one above. At this time you can preview the animated GIF image. Don't be surprised if it doesn't appear the way you imagined it would. Often, it is necessary to edit the construction. Experimenting with the time delay is the most frequent adjustment I make. Occasionally it is necessary to reorder the images. When you are satisfied it is time to save your animation.
That's all there is too it. The instructions are so easy to follow that you will be successful on your first try.

Editing Maple animations is possible within this editor, but not all editors. Consider the animation below. The Maple command animate(sin((4*abs(sin(t))+1)*x),x=0..2*Pi,t=0..2*Pi, numpoints=129);
produced the following animation. Even though the animation can be slowed to a reasonable speed within Maple,

it is exported as a GIF file without control blocks, and therefore has no time delay between gaps. When we open this file in GIF Construction Set we see all sixteen images, of which only eight are shown.

Notice that there is no control. However we can edit this animation by insertion of controls to get the following animation:

Here are just a few of the control loops that have been inserted.

It is easy to create, you can also extract the individual images from the composite animated GIF. Here we have placed a blue screen over one of the images and added a slightly longer time delay - just as a sample. We could have put in annotations or any other graphic enhancements. We can even insert animations within animations.

Remember when setting time delays, there is a natural latency for each computer owing to the screen driver and video card. Together with a natural latency of the browser, one may not be able to set arbitrarily short delays. Note that there is no possibility to set the delay dynamically on loading or to change the delay after the animation is loaded. To do that we must use more advanced tools.

An interesting transparency issue

Here is the answer to the pop quiz from the previous page. Recall the following:

Here's something interesting. It is the same animation as above, but with some curious differences.

How was it done?

The answer lies with animation editing and color transparency. Indeed, using GIF Construction Set we set the tranparency color to white. Hence when each image is changed, there is no longer the white to cover the black lines of the previous image. The result is that all the lines show through from image to image.

This can be used to some effect. We consider the prospect of showing projectile motion. Here are two animated GIF images, both made from a Maple code, but enhanced with GIF Construction Set. Both have delays of 8/100 seconds inserted between. The second has the white back ground set as the transparency color. In the second one, we see the path of the projectile, which conveys far more information. This is a graphis feature of MATLAB, which you can see in the MATLAB chapter. However, one cannot easily make animated GIF images in MATLAB.

Here's the Maple code:

> with(plots):

> g:=NULL;n:=16;a:=array(0..n); for i from 0 to n do s:=i/n;
a[i]:=plot({4*s*(1-s)+sqrt(.0001-(x-s)^2),4*s*(1-s)-sqrt(.0001-(x-s)^2)},x=-0.01+s .. 0.01+s, thickness=4,tickmarks=[0,0]):g:=g,a[i]:od: b:=plot(x,x=0..1,color=white,tickmarks=[0,0]):g:=g,b:
display([g],insequence=true);

A final note is that the second example can be contrived in Maple, but with much more effort, though the transparency and time delay will still be absent.

Making animations with a CAS-Maple
1. Maple - using "animate"
2. Maple - using "insequence"
3. MATLAB - making movies
Making animations with an animation editor
1. Assembling images
2. Fixing up Maple animations
Making animations with MATLAB
1. Matlab
Making animations with Flash
1. A simple example
2. Doing all the steps
Making animations with JavaScript
1. The basic script
2. Choosing example

Animations with Flash

"Macromedia's Flash is ... well ... no flash in the pan." These words in a recent review are right on target. In just a few years Flash has become the premier Web animation format. Much of what can be done with Flash can be done with JavaScript or more particularly Java. But what makes Flash ubiquitous is that it is both an authoring tool and a file format.

Fireflies dance through the sky at night, almost in a random pattern.

A flash movie using action events.

It is clearly easier to learn than JavaScript (DHTML) or Java, and it comes fully loaded with animation and drawing features. Among the important features which comes from video editors is keyframe creation. There is more such as motion paths, animated masking, shape morphing and onion skinning. It is a fully equipped language, complete with loops, logic, and arithmetic functionality. Moreover, and this is important, it can be used with JavaScript. It can spice up your forms with form functionality of its own. It is can even be used to program games!

Not only can you create Flash movies, but you you can also export an animation in an AVI or QuickTime file, or as a GIF89, or in a variety of other formats.

Originally a browser plug-in, the Flash player was slow to gain popularity. However, it now comes as a part of the download package of both NetScape and IE, and is thus a part of the installed packages. It is available on all formats (Linus, Mac, and Windows). Macromedia, the producer of Flash, claims 96% of all online users have the Flash plug-in installed. (And if they don't, standard applications of Flash include a download functionality at Flash movie runtime.) In short, it is a good bet that users of your material will have Flash installed.

What makes it so good?

Size is one thing. Flash animations, which take advantage of vector format (versus bitmapped graphics) are very small. The Flash animation below takes 1.5 kb as a Flash .swf file, but 19 kb exported as a GIF file. Among other things vector graphics can be perfectly scaled, while their bitmapped cousins deteriorate badly under deformations. Here is an animated example that plays at just 5 fps. It reels through 25 different colors. All this graphics savings does not apply to photographs where vector versions are fully as large if not larger than the bitmapped versions.

Here is the three color button demo as displayed during the workshop. A two fps frame rate was selected

Download source

Another advantage is sound. As we know it is easy to imbed sound into a Web page. Making is happen at the desired time has been the trick. It is still the trick in HTML. However, Flash has solved this problem by allowing sound clips to be dropped anywhere into a timeline. Thus you can link sounds to specific parts of your animation or to certain user interactions. Indeed, your animation may be perfectly static, with sound played at the time you want.

The motion aspects are an absolute marvel. You can adjust the frame rate to achieve the level of smoothness you want. Although the standard frame rate in Flash is 12 frames per second (fps), it can easily be set to 24 fps (as with film) or even 30 fps (as with television). In many cases the cost is very little more. Motion: frame rate, tweening, keyframes. Here are three examples of our colored button that play at 8, 16, and 24 fps. The total number of frames has been adjusted so that the total running time is about 3 seconds. You will notice a considerable difference in smoothness of the animation at the higher frame rate. However, please notice also that the file size is not significantly different. In fact the examples below are Flash-within-Flash animations. The button itself is a Flash animation, while the motion is another Flash animation. Flash has the added feature of code-reuse. The same animation can be used over-and-over again.

Frame rate	File size	Flash animation
8 fps	1.9kb
16 fps	2.1kb
24 pfs	2.4kb

However, as the framerate rises, the more a computer's CPU has to redraw. Therefore older machines will have trouble, choking as it were on the tasks demanded. Keep framerates reasonable.

The key to making effective animations with Flash is the keyframe feature. A keyframe is a point on the timeline where certain key events can occur. Think of a movie with parts of scenes, where a character carries out one motion and then another. We may say that there is a keyframe where the first motion stops and the next motion begins. Here is a piece of the Flash stage and controls for the animation above. In it you can see two keyframes indicated at frames 1 and 24 (the black dot). The arrow between them indicates that there is to be a motion created between the states at frame 1 and frame 24.

	The scene
	The frame indicator
	The current layers of the project
	The stage area

While some of these features have not been defined, you can see the general layout is much like a storyboard/timeline. Everything action has a time and a place built right in. This is remarkably convenient.

Flash supports alpha channels, which makes tinting and transparency possible. Here's a simple example. See how the jets emerge from alpha set to zero

Notice also this animation shows motion along a path, another feature simple to implement. We will see more of these. Other tweening includes the rotation of graphic and text objects.

It is not the point of this short introduction to be also a tutorial on making Flash animations. Rather we will show what can be done with a modest amount of practice (and patience). All the animations made here are made with Flash 4. The latest version, Flash 5, has far more extensive programming capbilities with a new language called Action Script.

More Flash animations

We finish this discussion with several different types of Flash animations.

Conversion.

Animated GIFs can be converted directly to Flash movies. Just import and save. Here is the rotating paraboloid example we considered in the Maple chapter . The size is much smaller, 154kb vs 373kb. It is very easy to alter timing of the images. In this example we paused the rotation for one second and then repeated the motion.

Flash permits many types of conversion.

Riemann sums (3) This simple Flash animations shows the rectangles of the Riemann sum "falling" into place.

This animation shows the Riemann rectangles change with the change of the multiple of the function. It also shows how various controls can be integrated with Flash, giving th euser a little more involvment.

This example show Riemann sums evolving in a different way, one rectangle at a time with the hight puctuated by a dot.

Tangent line

This tangent line animation is similar to the animated GIF image you saw earlier.

This example uses a motion guide which the dot follows. It serves to enhance the convergence aspect.

The example to the right is somewhat simpler. It is the example created during the ICTCM Pre-Session.

The timing of the text appearance is a little different. But a big difference is that we've inserted a button to play the animations. Note that Flash animations normally loop continuously without instructions to the contrary. The button was inserted via Dreamweaver, which is "Flash friendly."

Press to play

Source file

Buttons

Many buttons you see these days are actually Flash movies. They can be made automatically with programs like Dreamweaver.

Slide show

Here is an instructional tool. We orginally made this using JavaScript - as you will see later. But making these with Flash is much, much faster.

Here is another slide show type Flash animation. This one shows how parts of a solution can be given out frame by frame, or portion by portion, for ease of student comprehension.

Here's the Flash code:

On (Release)
Begin Tell Target ("/solution")
If (_currentframe=_totalframes)
Go to and Stop (1)
Else
Go to Next Frame
End If
End Tell Target
End On

ICTCM

This example is one of my very first using Flash. It shows the individual letters of the ICTCM symbol rotating around and following a path.

ICTCM 14^thAnnual International Conference on Technology
in Collegiate Mathematics - November 1-4, 2001

Here's another similar but simpler example. In this example we input the text after the action.

Marquee

The marque you see to the right is a "poor man's" marquee made with two instances of moving text, the simplest to make of the Flash animations.

Back to main page

JavaScript Animations

Recall that animated GIFs are static images stitched together into a sequentially image with controlled delays. The same functionality, with greater flexibility and power can be achieved using a JavaScript animator. First we show an example. Then we give the code. In the example below, the graphical steps of the Pythagorean theorem are shown.

We've built some extra controls into this example, allowing the animation to loop as a normal animated GIF. The user may also proceed through the images step-by-step. Now let's look at the JavaScript code.

This JavaScript, which is inserted in the <head> ... </head> portion of the document, is not complete in the sense that it is missing the stepping forward and backward buttons as shown above. It is also missing the Stop button, and most importantly the Loop button. However, with the HTML command placed just after the head of the document <BODY onLoad="animate()">, the animation will run continuously from the moment all the images are loaded. Notice that the time delay is set to 1250 milliseconds. This can be easily changed. Here is the example, in its simplest form, set up to execute on load and to loop indefinitely.

The next example show how we can dynamically change the time delay. It is accomplished in the statement
timeout_id = setTimeout("animate()", 1250);
where we replace the value 1250 milliseconds by a variable that can be changed by some other command.

Making a looped animation. Animated GIF images are fine, but after the reader has viewed them a few times, they lose their "live" quality. The looping can be put in the control of the reader with just a little extra JavaScript. In the example below, we use different kinds of controls.

Controls

Frame Frame speed

Alternate controls

The code for this animation is given by

function nextanimate()
{

//frame = (frame + 1)%num_frames;//
frame = frame + ad;
if( frame > num_frames-1 ) {ad = ad-2; frame = frame-2;}
if( frame < 0 ) {ad = 1; frame = 1;}
timer=parseInt(document.form.u.value);
document.nextanimation.src = nextimages[frame].src;
document.form.s.value=frame
timeout_id = setTimeout("nextanimate()", timer);
}

As you can see the timer value is the time between frames. This is input using a form variable. Hence it can be shown dynamically. Notice how the animation is accomplished. The animate function basically calls itself for each redraw. The reason for this is that every JavaScript function must complete execution before the screen is updated. Therefore, it is not possible to create the animation in a loop within a single call to the function.

More inventive animations can be computed Here is a movie-like animation that shows how slope changes. Again the communication is via text boxes in a form. Since this particular page is already rather complex with form structures, and since this particular example uses <div> tags, we have place it on a separate page.

The basic idea to make this animation is to place a small image in each of 90 layers. Then with JavaScript commands we change the position of the layers to the desired location. While considerable graphics can be executed this way, the results are not necessarily the best. The basic look of the JavaScript page has these buttons. The user can input any slope and a version of the line through the origin with that slope is drawn.

The animation begins and can be stopped with the stop button. To do this we used the same device as usual: timeout_id = setTimeout("animateslopes()", 700);

This example goes a bit further than others in that it works in both browsers. The problem with that is that the positioning of layers is somewhat different in IE and Netscape, thus requiring a lot of branching to different command sets depending on the browser.

Finally, we show a complex interactive animation of a bouncing ball. This example was created for a teacher workshop on math/physics modelling to show electronically the experiments that led Galileo to his models of acceleration and gravity.. The idea is to demonstate how a ball bounces after rolling off a table under various accelerations of gravity. It also allows the elasticity of the ball to change.

Galileo's experiment.

Summary.

We have seen two types of JavaScript animations:
(1) The type of animation where images are manipulated. These emulate animated GIFs but with user control available.
(2) The type of animations where a layer (or container) containing an object is repositioned. This is vastly more powerful because they allow the most cherished form of educational device - interactivity. They come at the expense of larger file sizes and ~~somewhat~~ a lot more programming.

Back to main page