Animation

Animation

Introduction

Our eyes have been trained to be constantly on watch for moving objects that can signify a danger or a change in the environment. This makes animation highly efficient in guiding the viewer through the key points of your composition or in making your web site more interesting.

The main goal of computer animation is to synthesize the desired motion effect which is a mixing of natural phenomena, perception and imagination. The animator designs the object's dynamic behavior with a mental representation of causality. It is essential to imagine how the object moves, gets out of shape or reacts when it is pushed, pressed, pulled, or twisted. So, the animation system has to provide the user with motion control tools able to allow these functions. Computer animation methods may also help to understand physical laws by adding motion control to data in order to show their evolution over time. Visualization has become an important way of validating new models created by scientists. When the model evolves over time, computer simulation is generally used to obtain the evolution of time, and computer animation is a natural way of visualizing the results obtained from the simulation.

Animation is far reaching. There are the cartoons that kids watch on Saturday mornings. There are the block-busting special effects, which make the Millennium Falcon fly and the Titanic sink. Each of these types of animation has its own difficulties - budget and time constraints, technology limitations, and so on.

However, Web animation has some unique challenges such as bandwidth, platform, and browser issues. In essence, the problem is if it is big and beautiful then only some of the audience can see it - more specifically, those with large bandwidth or lots of patience. As a result, web animation is usually simple, small and limited - as a result everyone can see it. People hate to wait on the Internet. To avoid download frustration, set a realistic maximum file size and stay with it.

An overuse of animation, as well as a hastily assembled or "too computer" animation without a human touch, can easily turn into major annoyance. In web animation, attempt to find out what makes a piece of computer animation look intriguing, attractive and functional as possible. Make sure that any animation has a theme. Keep the goal of your 'story' in mind as you create your animation.

Overview Of the Animation Process

To produce a computer animation sequence, the animator has two principal techniques available. The first is to use a model that creates the desired effect. A good example is the growth of a green plant. The second is used when no model is available. In this case, the animator produces "by hand" the real world motion to be simulated. Skills of imagination, creativity and artistic ability are highly desired in the field of web animation.

Technically, an animated gif is simply a .GIF file that is composed of 2 or more individual .gif images or FRAMES. Each frame is displayed for a set time and a set number of cycles. (the times and number of cycles are completely controllable by the creator through the software program.) The changes in the frames are what gives the graphic the sense of motion. There are no additional plug-ins or enhancements to a web browser necessary to see an animated gif. It is important to note that not all computers and browsers will display the animation the same. The animation may play slower or faster depending on the processor speed of the audience's computer and the colors may appear different due to type of computer or screen resolution.

To make your own animated GIFs, you will need two programs. First of all you need a program to create the individual frames. Any graphics program will do (Paint Shop Pro, Corel, Photoshop etc.) Secondly, you will need a software tool that will allow you to assemble your individual frames into an animation. There are a lot of these programs - simply do an Internet search for 'GIF animation software'. Most of the programs will have a downloadable trial version. Sometimes, these programs have limited functionality such as limited options, a limited amount of time that it will work or a limited type of file that can be used. My advice is to try the programs before you buy them.

First Step

Assuming that you have software, the first step is to make the individual frames. The biggest thing here is to remember less is more. You don't want to cram too much needless information into an animation. The fewer images you use, the better. If you can accomplish the desired effect using only two frames, then do it. Let's look at some different animations.

Windows Paint was used to create the image which is given below. Windows Paint stores the file as a .BMP file, so it was converted to a GIF file before it was used to create the animation. Here is the original file:


After the original file was created, then the individual animation frames were created by using 'copy and paste'. Essentially, a part of the original file was copied and pasted into WTC1, then the 'window' was moved over slightly and WTC2 was copied and pasted. Here are the frames that were created:

Notice the progression as the frames go from WTC1 (the first one) to WTC9 (the last one).

Once you have the individual frames created and saved, you are ready to assemble them. The animation at the beginning of this module was created by using all of the frames.

The next animation was formed by using frames 2, 4, 6 and 8.

Obviously, a 'blink' can be created by using just two frames - for example, in this animation, frames 3 and 7 were used:

This jumping blue frog was created from 5 frames:

It is interesting to note that the individual frames have a '.gif' extension and the animated sequence also has a '.gif' extension. One might be inclined to think that the animated sequence would have a different type of extension (such as '.exe' or '.ani') but it does not.

Plan Ahead

Remember the steps in the problem-solving process discussed earlier in this course. Go through these steps as you develop any animation. It would be of great benefit to visualize how the animation will look and experiment with different angles and styles. Storyboard your animation. You can do this on the computer but you can also use the 'low-tech' tools of pen, pencil and paper. Conclusion

A broader discussion of animation is beyond the scope of this course. For the student that wishes to pursue this topic further, the next step will be to search for some GIF ANIMATION TUTORIALS. An Internet search for GIF ANIMATION TOOLS will yield links to drawing and animation software.

If you find an animation and you want to 'grab' it, simply point to the image - execute a right click and save it on your own storage media.

Animation is another tool that can be used to make your web page more interesting and effective. Basically, there are two steps to producing animation:

  • First, create the individual frames
  • Second, join the images together by using an animation program

In an earlier module (Why Use HTML?), we discussed the characteristics of a 'structured' programming language. These characteristics are:

  • Sequence or order - by now, you can see the importance of putting HTML code in the proper order
  • Selection or decision - decisions are made about where to go on web pages by simply clicking on a link. Users make choices based on the information given about the link.
  • Repetition or iteration - the use of repetition allows animation to work.
So, through this study of the HTML programming language, you have been exposed to the basic characteristics of any structured programming language.

Our advice is to encourage you to start with simple designs and simple ideas - experiment and develop your own GIF animations.