T7L1

Animation

Introduction

This lesson is designed for you to gain some basic information about animation. When you finish this lesson, you should be able to:

  • Explain the advantages and disadvantages of using animation.
  • Explain how animated GIFs are constructed.
  • Describe how to create an animated GIF and utilize it in an HTML document.
  • Describe additional means of Web animation other than GIFs.

When the World Wide Web made its debut in 1989, there was little concern over the aesthetics of the pages. The original HTML standard allowed only for text documents; graphics could not be displayed, much less animation. As HTML evolved and the technologies have progressed, Web authors have increasing ability to control page layout and design, including the ability to transform a static page to a live one by the incorporation of movement and interactivity.

One (traditional) method of animation is created by displaying a series of overlapping images in rapid succession. This is known as frame-based animation. Each image differs only slightly from the ones preceding and following it. Characteristics of human perception cause the eye and brain to continue to perceive an image after it has disappeared. As a result, images that are displayed rapidly in succession are perceived as continuous motion. The more images a single animation contains, the smoother the motion of animated characters and objects appear to be. When creating animation for the Web, a balance must be found between animation quality and file size, as the number of images contributes to the ultimate size of the animation file.

Increased browser capabilities, new HTML specifications, scripting language development, and the introduction of application software have enabled the developer to create increasingly sophisticated animations. The addition of animations to Web pages can enhance the functionality of a Web page, focusing the user's attention or emphasizing a particular section with a single animated image, or presenting a fully-interactive page. As with all aspects of page design, the author of a Web page has to determine the purpose of the animation and to select animations that add to the user's experience, not detract from it. Used judiciously and with an awareness of the limitations of the end user, animation can enhance a Web site.

Animation on the Web

Frame-based animation works by displaying a series of images on the browser in rapid succession, the means by which being determined by the method the author selects. In Web page design, the term "animation" has come to mean any movement that occurs on an otherwise static Web page. The decision to use animation on a Web page, which type to use, and how to use it necessitates a basic understanding of the various type of methods available to the Web page author.

This lesson will cover:

  • Advantages and Disadvantages of Using Animation[[link to single html page on this]].
  • Server Push/Pull[[link to single html page on this]].
  • Animated GIFs[[link to this]].
  • Java and Animation [[link to single html page on this]].
  • JavaScript and Animation [[link to single html page on this]].
  • Dynamic HTML (DHTML) and Animation [[link to single html page on this]].
  • Macromedia Flash and Animation [[link to single html page on this]].

To round out your explorations, make sure you complete the last two sections:

  • Activity[[link to single html page on this]].
  • Animation Summary [[link to single html page on this]].

Additional Resources

Web Monkey: Animation Tutorial [

Server Push/Pull

Lesson on CGI, Perl, and PHP [link to CGI/Perl T4L2]

Meta Tags for Server Interaction[

Web Monkey: What can <META> Do for You? [

Animated GIFs

Web Monkey: My First GIF Animation [

Web Developers Journal: Animated GIFs [

GrafX Animated GIF Tutorials [

Optimizing GIF Animations [

Jason's Animation Outpost [

Bells and Whistles [

Java and Animation

Lesson on Java[link to Java T4L2]

Javapowered.com - Collection of applets and tutorials [

Gamlan[

JARS resources[

Intel Web Applets[

The Java Boutique[

Spigots[ ]

JavaScript and Animation

JavaScript Lesson - [link to JavaScript T3L10]

Dynamic HTML and Animation

Dynamic HTML Lesson - [link to Dynamic HTML T3L10]

Cascading Style Sheets Lesson - [link to Cascading Style Sheets T6L1]

Smooth Animation Using DHTML [

Macromedia Flash and Animation

Vector Graphics Lesson- [link to Vector Graphics T7L5]

Initial Flash: The First Steps [

Intro to Flash [

Macromedia Flash[

Web Developers Virtual Library [

Web Review: Flash and Shockwave Explored [

Advantages and Disadvantages of Using Animation

Advantages

  • draw attention to a feature
  • add interest
  • some can add interactivity for the user
  • generally easy to use
  • most are cross-platform

Disadvantages

  • increased file sizes with increased download times
  • can distract the reader
  • differences in browser support
  • some formats require a plug-in

Server Push/Pull

One means of animating pages is through the use of server push/pull; for example, CGI scripts or meta-refresh tags. In these methods, the illusion of motion is created by the display of a series of files that download from the server and automatically display. With the development of newer animations tools, server push/pull is not as useful as it once was. The need to establish a continuous server/client connection for the transfer of files, repeatedly in the case of client pull, limits the usefulness of this type of animation, particularly since there are much better ways of creating motion available to the Web designer.

Additional Resources

Lesson on CGI, Perl, and PHP [link to CGI/Perl T4L2]

Meta Tags for Server Interaction[

Web Monkey: What can <META> Do for You? [

Reflective Questions

[[Objectives

After reading the above information and answering the following reflective questions, you should be able to:

  • Explain the major disadvantage of server push/pull as a means of animating Web pages.
  • Describe how you would write a meta tag that would result in a page refresh occurring after a given time limit.]]
  1. What is the major disadvantage of server push/pull as a means of animating Web pages?
  2. How would you write a meta tag that would result in a page refresh occurring after 5 seconds?

Animated GIFs

The most prevalent form of animation on Web pages, and the simplest, is the use of animated GIFs. Animated GIF images are a special type of GIF file. An animated GIF consists of individual frames that make up the entire animation, much like a movie reel. Unlike a movie reel, each frame is made up of series of special pieces of information that describe how that frame will appear when the animation is played.

Animated GIFs are popular on the Web because they are easy to create and easy to use. To view animated GIFs, the user does not need special software or plug-ins and they need no special server configuration because GIF is the standard file format for the Web. Animated GIFs are supported by Netscape Navigator 2.0 and above, and Internet Explorer 3.0 and above. Generally, if a browser does not support animated GIFs, a static image of the first or last frame will be displayed. Animated GIFs use streaming technology, that is, users do not have to wait for the entire file to download to see something, each frame displays as soon as it downloads. Animated GIFs do not, however, incorporate sound, nor do they allow for interactivity.

How GIF Animation Works

GIF animation takes advantage of the GIF format’s built-in capabilities to store and display more than one image file. Each of these images have an associated set of controls that dictate how, when, and for how long the image is displayed on the screen.

The animation produced by the GIF file is produced in exactly the same manner as the method used in film: motion is created by rapidly displaying a sequence of similar images. While the methods used to produce this effect in both film-making and GIF animation differ greatly, the end result is the same - still images appear to be moving. The image "streams" because the graphics are rendered incrementally as they are downloaded.

In the example shown below, each image is created separately and when the multiple images are layered sequentially within a single GIF, motion results. The larger the number of frames played per second, the smoother the animation will appear, but, the larger the file will be.

Information Contained In An Animated GIF

Animated GIFs work by layering a number of frames on top of each other, each containing a set of instructions that specify the length of delay between frames and other attributes. The GIF format allows multiple images and other information to be carried in "multi-block" single GIFs.

A multiblock GIF for the Web typically consists of the following stream of blocks:

Header Block: There is only one header file, it is required, and it is always the first block in the file. It defines the dimensions of the area the pictures in the file will occupy, it stores the global palette all the images in the file will use if one has been defined, and it specifies the number of times an animation repeats, i.e., loops. Looping is not supported by very early browsers, and some browsers may not allow you to specify the number of loops, however, most browsers in use today support the function.

Image Block: This is what actually stores an image. The following can usually be specified:

  • name
  • dimensions
  • x- & y-offset: specifies where the image is to be placed relative to the upper left corner of the area in which the animation will appear; this distance is measured in pixels along the X- and Y-axes.
  • interlace: the interlace option allows the image to load gradually, giving the appearance of a fade-in as the image loads. As of now, web browsers do not fully support animated GIF interlacing during playback, and, as such, this only works for the first image in the sequence when the animation file is downloaded.
  • transparency: defines a single color within the image layer to be transparent when displayed; by setting the transparency of individual frames, previous frames will show through the transparent area of a later frame.
  • local palette: instead of setting a global palette in the Header Block, you can use multiple, frame specific palettes. If every image contains virtually identical color palettes, then using a global palette will reduce file size.
  • frame delay: sets the amount of time between frames; you can apply a different delay time to each frame in the animation.
  • disposal methods: instructions on what to do with the previous frame once a new frame is displayed, i.e., defines how an image is removed during the animation sequence. The options are:
  • Unspecified. This option replaces one full-size, non-transparent frame with another.
  • Do Not Dispose. The image is not removed and any subsequent images are displayed over it.
  • Restore to Background Color. Removes the image and replaces it with the web page background color. If image layers overlap evenly, then a smooth transition effect occurs.
  • Restore to Previous State: Removes the image and replaces it with the image preceding it. If all the images in the sequence are set to this, then a smooth transition from one image to the next happens regardless of how they are overlapped.

Note: The Restore To Previous State option is currently not supported by Netscape 2.0, 3.0, and the Mac version of 4.0. It is supported by IE 3.0 and higher.

Some programs will refer to a Control Block which precede Image blocks to tell your browser how to display the images to which they pertain, however, most programs include that information into the Image Block; the result is the same.

Comment Block: Comment blocks store hidden text. The text in a Comment block will not appear in the animation, but it can be viewed with applications which produce animations. Comment blocks are useful for storing image information and copyright statements, among other things.

Plain Text Block: This block displays text within the animation itself. This is not yet widely supported.

Creating Animated GIFs

A GIF animation is a series of image frames with specific properties that describe how it is displayed. To create this kind of animation, first create separate multiple images (frames), using a graphics tool such as Paint Shop Pro or Adobe Photoshop, showing the motion or changes you want.

The multiple images that have been created have to be stored within a single GIF file, along with instructions as to how they are to be displayed. If multiple images are stored within a GIF file, they can be viewed sequentially much like a slide show or a small animated movie. The way they appear is defined by control extensions built into the file. To sequence the images together you use an animation tool (program) to sequence them together. You need a program to simplify the whole process of setting those properties; without an animation program it is next to impossible to create a GIF animation. There are many tools available to help you create and/or edit animated GIFs.

Optimization

File size is a significant consideration when composing an animation. The reduction of file sizes by the application of a variety of methods is termed optimization. Different GIF animation programs employ different means of optimization, and the program's ability to optimize the animation is a consideration in choosing a particular program that you want to use.

Since animated GIFs are essentially multiple GIFs with timing and transparency information, the same optimization principles apply to minimizing file size. Reducing the colors and the number of palettes is a good way to reduce file size. As mentioned above, GIF animations allow for the use of local palettes and/or global palettes. Using a global palette as often as possible for displaying the colors of individual images is a good way to reduce file size. When the image being inserted is drastically different from the images preceding it, local palettes may have to be used

File size can also be reduced by deleting any unnecessary images. In some cases, this may not be desirable due to the adverse affects it may have on the quality of the animation. But if a few images can be deleted and not alter the animation quality significantly, then file size will be further reduced.

Image sizes can be reduced. If the motion of the animation occurs within a smaller field than the size of the “backdrop”, or matte, then you should not necessarily use images that are the same size as your matte. With GIF animations, you can easily overlap much smaller GIFs to create small areas of animation set against a static backdrop. Doing it this way will reduce your file size considerably, but again, only if the quality of your animation does not suffer as a result.

Save only the parts of the animation that change from frame to frame. GIF animation tools optimize animations by eliminating the repetition of pixels in unchanging image areas; only the pixels that change are recorded for each frame. Different tools use different optimizing methods with varying efficiency. The ability to efficiently optimize is one feature that differentiates one tool from another.

Downloading Animated GIFs

If you do not want to create your own animated GIFs, there are thousands of animated GIFs available for downloading. It is important that you make certain that there are no copyrights associated with any images you download, and do not use them without permission. Animated GIFs are downloaded and inserted into Web pages just as any other image.

Using Animated GIFs

Animations are extremely multi-purpose in what they can convey. Often animations are used to create banner type ads on the Web, or when you want to get someone's attention. Here are some rules of thumb to follow:

  • limit the number of animations on a page, they can become both distracting and annoying
  • avoid animations on text-heavy pages
  • make certain it is "worth" the extra bandwidth
  • experiment with timing

Importing and Exporting Animated GIFS as Other File Types

Many of the animator software programs support the importing and exporting of GIF animations as movie files. Ulead GIF Animator, Coffee Cup GIF Animator and GIF Construction Set Pro allow you to export a GIF animation as an AVI movie file. AVI movie files are similar to GIF animations, in that they are self contained movies (display images in a timed sequence), but GIF animations are considerably smaller in file size than AVI movie files and GIF images are supported by all web browsers. In addition, Ulead GIF Animator allows you to export animated GIFs as Quicktime movies.