Download An animation is made up of a series of frames

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.
1
T7L1
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
[http://hotwired.lycos.com/webmonkey/multimedia/animation/tutorials/tutorial1.html]
Server Push/Pull
Lesson on CGI, Perl, and PHP [link to CGI/Perl T4L2]
Meta Tags for Server Interaction [http://www.gettingstarted.net/basics/meta/index.html]
Web Monkey: What can <META> Do for You?
[http://hotwired.lycos.com/webmonkey/96/51/index2a.html?tw=authoring]
Animated GIFs
Web Monkey: My First GIF Animation
[http://hotwired.lycos.com/webmonkey/99/18/index1a.html?tw=multimedia]
Web Developers Journal: Animated GIFs
[http://WebDevelopersJournal.com/articles/web_animations_1.html]
GrafX Animated GIF Tutorials [http://www.grafx-design.com/anim_tut.html]
Optimizing GIF Animations [http://webreview.com/wr/pub/98/08/28/studio/index2.html]
Jason's Animation Outpost [http://www.cyberisle.com/animate/home.htm]
Bells and Whistles [http://www.bellsnwhistles.com/]
Java and Animation
Lesson on Java [link to Java T4L2]
2
T7L1
Javapowered.com - Collection of applets and tutorials
[http://www.javapowered.com/werks.html]
Gamlan [http://gamelan.earthweb.com/javaprogramming/applets/]
JARS resources [http://jars.developer.com/jars_resources_java.html]
Intel Web Applets [http://www.intel.com/home/funstuff/webapplets/]
The Java Boutique [http://javaboutique.internet.com/]
Spigots [http://www.spigots.com/ ]
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
[http://home.sol.no/~warnckew/programming/dhtml/smooth-animation/]
Macromedia Flash and Animation
Vector Graphics Lesson - [link to Vector Graphics T7L5]
Initial Flash: The First Steps
[http://www.webdeveloper.com/design/design_flash_tutorial_part1.html]
Intro to Flash [http://webreference.com/multimedia/flash/]
Macromedia Flash [http://www.macromedia.com/software/flash/]
Web Developers Virtual Library [http://WWW.Stars.com/Authoring/Flash/]
Web Review: Flash and Shockwave Explored
[http://www.webreview.com/pub/2000/01/07/feature/index2.html]
3
T7L1
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
4
T7L1
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 [http://www.gettingstarted.net/basics/meta/index.html]
Web Monkey: What can <META> Do for You?
[http://hotwired.lycos.com/webmonkey/96/51/index2a.html?tw=authoring]
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?
5
T7L1
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:
6
T7L1
Heading (Global Information)
Screen Size
Global Palette
Looping
Image Block
(repeats for each image)
Name
Dimensions
X & Y Offset
Interlacing
Transparency
Local Palette
Delay
Disposal Method
Plain Text
Comments
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.
7
T7L1



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:
o Unspecified. This option replaces one full-size, non-transparent frame with
another.
o Do Not Dispose. The image is not removed and any subsequent images are
displayed over it.
o 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.
o 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
8
T7L1
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.
9
T7L1
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.
Other Graphics Formats For Animation
There are three image formats that can be displayed on the Web - GIF, JPG, and PNG. PNG
(Portable Network Graphics) is a newer format and not displayed by all browsers, but is
increasing in usage due to its increased capabilities relative to JPEG and GIF. Animation is not
possible with PNG files, however there is another format under development called MNG
(Multiple Image Network Graphics) which complements the PNG format with animated
graphics. See the lesson on Graphic Formats [[link to T3L8]] for more information on graphic
types.
While the MNG specification itself has not yet been fully developed, the prototype MNG format
has a number of interesting features:





object or sprite-based approach to animation, with commands to move, copy and paste
images (rather than replicate them frame by frame as in GIF)
nested loops for complex animations
much better compression than GIF animations
integration of both PNG and JPEG-based images
support for transparent JPEGs
There are several applications with some level of MNG support, but widespread support is not
yet in place. The latest major browsers have limited support for the PNG/MNG format, but
newer releases are expected to have better support, e.g., Netscape 6.0.
10
T7L1
Reflective Questions
[[Objectives
After reading the above information and answering the following reflective questions, you
should be able to:
 Discuss why animated GIFs are so popular.
 Describe the steps needed to create an animated GIF.
 Describe variations in the creation of an animated GIF.
 Explain why optimization of an animated GIF is important.
 Describe some ways that optimization can be achieved.]]
1.
2.
3.
4.
Why are animated GIFs so popular?
What are the steps needed to create an animated GIF?
What variations can be specified in the creation of an animated GIF?
Why is optimization of an animated GIF important? What are some ways in which
optimization can be achieved?
Additional Resources
GIF Animation Utilities
There are tools which are dedicated to the creation of animated GIF files. Some of the more
popular ones are:
Tool
GIF
Construction
Set
Professional
GIF
Animator
GIF
Animator
Animation
Shop
GIFBuilder
Platform
PC
Developer
Alchemy
Address
http://www.mindworkshop.com/alchem
y/alchemy.html
Price
$20.00
PC
ULead
Systems
CoffeeCup
Software
Jasc
Software
Yves
Piguet
http://www.ulead.com/
$39.95
http://www.coffeecup.com/
$30.00
http://www.jasc.com/
$39.00
Shareware, available as
http://www.shareware.com
$0.00
PC
PC
Mac
Applications that Include GIF Animation Tools
Tool
Animation Shop
Included with:
Paint Shop Pro
Platform
PC
Developer
JASC
Image Ready
Photoshop
PC, Mac
Adobe
Address
http://www.jasc.co
m/
http://www.adobe.
11
T7L1
GIF Animator
Microsoft Image
Composer
Fireworks
FrontPage® 2000
PC
Microsoft
PC, Mac
Macromedia
com
http://www.micros
oft.com
http://macromedia.
com
Each program accepts different images. Some only accept GIFs, others will accept even other
movie formats, such as QuickTime MOV, AVIs, MPEGs, & FLiCs and convert them straight to
a GIF89a animation. Newer software is also adding special effects, transitions, morphs, and other
features which will generate in between images on certain simple types of animation.
Most of the animators have a trial copy which can be downloaded and tried before you purchase,
so you can become familiar with the features available in a particular program. As a rule,
dedicated software has more features and flexibility for GIF animation. Regardless of which tool
is used, the process of creating an animated GIF is similar.
Additional Resources
Web Monkey: My First GIF Animation
[http://hotwired.lycos.com/webmonkey/99/18/index1a.html?tw=multimedia]
Web Developers Journal: Animated GIFs
[http://WebDevelopersJournal.com/articles/web_animations_1.html]
GrafX Animated GIF Tutorials [http://www.grafx-design.com/anim_tut.html]
Optimizing GIF Animations [http://webreview.com/wr/pub/98/08/28/studio/index2.html]
Jason's Animation Outpost [http://www.cyberisle.com/animate/home.htm]
Bells and Whistles [http://www.bellsnwhistles.com/]
12
T7L1
Java and Animation
Java is a fully fledged programming language oriented toward the Internet and the Web. A Java
application can run as a stand-alone program, or as a program which can only be run through a
Web browser, that is, a Java applet. Basically, applets are small applications that are included in
Web pages and downloaded on demand to be executed by the client browser. Using applets, the
designer can provide Internet sites with a huge range of new functionality, including animation.
Java applets are downloadable from any server and run safely on any platform, and they can be
embedded right into HTML pages.
Java source code is compiled into a form which is stored in a file with a "class" extension. This
file is stored on the Web server where the HTML file resides. When a user calls up that
particular Web page, the class file is sent over the Web to the client machine where it is
interpreted by the browser and executed. In addition to the CLASS file, you must write an
HTML file that references the applet. See the lesson on Java [[link to T4L3]] for more
information.
Java is the last part of a Web page to load. The browser will display a rectangular gray box until
the text and graphics finish loading and the applets starts to run.
Advantages of Java applets for animation






Cross-platform
Can package sound with animation
No need for a plug-in
Allows for interactivity
Relatively small in file size
Non-copyrighted applets can be added to Web pages easily without a knowledge of Java
Disadvantages of Java applets for animation






Limited browser support
Slow to run
Slow to download
Security risk
May be unreliable
Java can be turned off in the browser's preferences, causing confusion
Additional Resources
Lesson on Java [link to Java T4L2]
Javapowered.com - Collection of applets and tutorials
[http://www.javapowered.com/werks.html]
Gamlan [http://gamelan.earthweb.com/javaprogramming/applets/]
JARS resources [http://jars.developer.com/jars_resources_java.html]
13
T7L1
Intel Web Applets [http://www.intel.com/home/funstuff/webapplets/]
The Java Boutique [http://javaboutique.internet.com/]
Spigots [http://www.spigots.com/ ]
14
T7L1
JavaScript and Animation
Java and JavaScript have very little in common besides the name. They are distinct languages,
with different purposes and features. Java is a full-featured, object-oriented, programming
language capable of living inside or outside of a web browser. JavaScript, on the other hand, is a
limited, object-based, scripting language. JavaScript is a language you can use to embed
commands in an HTML document. JavaScript was designed to provide an easy way for Web
authors to create interactive Web pages. See the lesson on JavaScript for more information [[link
to T3L10]]
Strictly speaking, JavaScript is not an animation program, but it does allow for controlling
movement on Web pages, such as scrolling text, pop-up windows or mouse rollover effects; thus
it is included here. JavaScript programs are interpreted and run entirely on the client side. Once
the page downloads, no further information is needed from the server. This means fewer hits on
the server than with Java (whose applets are compiled on the server before being interpreted by
the client) or CGI (which requires that the server both do the work and take the hits).
JavaScript is most useful for animation when used in concert with Java and Cascading Style
Sheets.
[[can we show an example of a JavaScript rollover, and/or use with CSS?]]
Additional Resources
JavaScript Lesson - [link to JavaScript T3L10]
15
T7L1
Dynamic HTML (DHTML) and Animation
Dynamic HTML is simply HTML that can change even after a page has been loaded into a
browser. The essence of the term stands for almost any coding that creates movement or
interactivity by employing the standards of the 4.0 level Netscape and MSIE browsers. With
Dynamic HTML, almost everything on a Web page can change. There is no single DHTML
standard, it is an application of a combination of other factors, and Netscape and MSIE have
adopted divergent models. DHTML is an interaction of different technologies, e.g., HTML, style
sheets, Dynamic HTML Object Model, and JavaScript.
Cascading Style Sheets (CSS) enable a Web designer to specify the attributes of an HTML tag
with one command and adds a much larger array of attributes to be designated. CSS can control
elements in a systematic way. As an extension of CSS, absolute positioning enables an element,
such as an image or block of text, to be placed anywhere on the Web page. To add depth to a
page, both MSIE 4.0 and Netscape 4.0 support layers under CSS. The altering of a layer's
position, dimensions, visibility, and depth can create the illusion of motion. See the lesson on
Cascading Style Sheets for more information [[link to T6L1]]
JavaScript, or other scripting languages can address any of the elements controlled by CSS, thus,
DHTML Web pages can be laid out with cascading style sheets using JavaScript to control their
elements over time.
Dynamic HTML gives the page designer the ability to modify HTML that is already on the page.
It is the interaction among these elements that make pages dynamic, that is, create movement or
user interactivity without the need for Helper applications or plug-ins. It is important to note that
at this time, there are significant inconsistencies among the major browsers in the interpretation
of DHTML. Use it cautiously, and don't expect it to work the same on all browsers and
platforms.
Additional Resources
Dynamic HTML Lesson - [link to Dynamic HTML T3L10]
Cascading Style Sheets Lesson - [link to Cascading Style Sheets T6L1]
Smooth Animation Using DHTML
[http://home.sol.no/~warnckew/programming/dhtml/smooth-animation/]
16
T7L1
Macromedia Flash and Animation
There are a number of proprietary programs available that enable the use of more sophisticated
animations, Macromedia's Flash being the best known and most widely used. Proprietary
programs are typically more complex to learn and require plug-ins in order for the animation to
be used.
Flash is vector-based and supports sound, animation, and interactivity. A vector-based program
does not rely upon individual pixels to compose an image, instead it draws shapes using
individual points, which are described by co-ordinates. Lines that connect these points are called
paths, and vectors at each point describe the curvature of the path. Vector-based images are more
compact and scalable than bit-mapped images like GIFs or JPGs. Animations using vector-based
images display much more rapidly than bit-mapped. See the lesson on Vector Graphics for more
information [[link to T7L5]]
A player is required in order for the user to see the Flash animations. An advantage of Flash as
an animation tool is that most Web browsers already have Flash Player installed. It is preinstalled on most computers, as it is included with all copies of Windows 98 , Netscape
Navigator, Apple Macintosh operating systems, America Online, WebTV, and RealPlayer G2,
among others. Flash files can be exported in one of 12 other formats, including GIF89.
How Flash Animation Works
An animation is a series of frames. In Flash you draw, import, and/or compose the artwork for
keyframes, these are the essential "poses". To create the illusion of smooth movement, many
additional frames have to be used to move the character or object from one pose to another. Flash
then generates the in-between frames needed between two keyframes frames automatically,
according to your instructions in a process called "tweening".
Reflective Questions
[[Objectives
After reading the above information and answering the following reflective questions, you
should be able to:
 Evaluate why Flash is superior to animated GIFs for animation effects.
 Evaluate when you would choose Flash for animation over GIF.]]
1. In what way is Flash superior to animated GIFs for animation effects?
2. When would you choose Flash for animation over GIF?
Additional Resources
Vector Graphics Lesson - [link to Vector Graphics T7L5]
Initial Flash: The First Steps
[http://www.webdeveloper.com/design/design_flash_tutorial_part1.html]
17
T7L1
Intro to Flash [http://webreference.com/multimedia/flash/]
Macromedia Flash [http://www.macromedia.com/software/flash/]
Web Developers Virtual Library [http://WWW.Stars.com/Authoring/Flash/]
Web Review: Flash and Shockwave Explored
[http://www.webreview.com/pub/2000/01/07/feature/index2.html]
18
T7L1
Animation Summary
Various techniques have evolved which allow a Web author to add movement and interactivity
to Web pages. While not appropriate for all Web pages, animation can improve a static page.
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.
A short summary of these topics is listed below. If you do not understand these things, you
should review the lesson at least once. If you are still having difficulty, you should consider other
sources of information that compliment this lesson, such as textbooks, tutors, and instructors.
1. Animations can enhance the appearance and functionality of a page by adding variety and
interest to the document. Most animations are fairly small, and most of them work on a variety of
browsers. Animated GIFs and Java applets can be used easily on Web pages, there are many
libraries of animations available for the author to use without having to create his or her own.
The disadvantages include the tendency to overuse animations and clutter up the page, serve as a
distraction, or to add significantly to download time. In addition, some types of animations will
not work on all browsers and some require plug-ins in order to be seen.
More information. [[link to appropriate page.]]
2. Animated GIFs are constructed by first creating individual images in a graphics package and
then using animated GIF construction software to place the multiple images into a single GIF
file. The software allows the user to assign individual characteristics to each image as part of the
"packaging" process.
More information. [[link to appropriate page.]]
3. Other ways of incorporating movement on the Web include:





server push/pull, through the use of CGI and meta-tags
Java, through the use of applets
JavaScript, through the use of scripts which can manipulate objects
DHTML, through a combination of CSS, JavaScript, and HTML
Proprietary programs, such as Flash
More information. [[link to appropriate page.]]
19