|It's a GIF!
It's an Animated GIF!
|do we have your attention now?|
can you get it back?
We doubt we have to describe what animated GIF image looks like, as you can find them all over the web. These range from animated icons, to commercial advertisements ("ad banners"), to web site "credits", first pages of web sites that look like the opening screens to a movie. GIF animations are useful because you can count on them being able to be viewed on almost every web browser and they do not require any special add-ons to work.
|media type:||animated GIF|
|what it does well:||time-based information, sequences, processes, cartoon style/flip card style animation|
|issue to consider||rating||comments|
|"hurdle" or barrier for creating media||low high
||Most newer graphics programs as well as freeware/shareware can create GIF images. Many sites offer free collections of animations you can use|
|"breadth" of audience that can view media||narrow wide
||GIF animations can be viewed in nearly every graphical web browser in use today; no plug-ins needed|
|bandwidth consumption||low high
||can be quite small file sizes and the data can "pseudo stream" as they play.|
An animated GIF image is just an extension of the same file format used for inline GIF images we saw in lesson 7. But rather than just showing one image, an animated GIF has layers of different images, and information in the file can control how long it waits before displaying the next image, and how many times to loop through the entire sequence.
Several current graphics programs should have options to create animated GIF files. Plus, you can find free or low cost shareware programs (e.g. http://shareware.com/) that can turn a series of images into a GIF animation. And since the web is full of dancing, blinking, and moving GIFs, there are plenty of free clip-art sites where you can download animations to use for your own pages. We provide a list of links to these sites at the end of this lesson.
Another advantage of this media type is that the entire graphics file does not have to be downloaded before it starts to play; an animated GIF will commence as soon as enough information is downloaded to display the first "frame" of the animation. Therefore, it appears to "stream" the animation and you can create animation files that are several hundred k in size that may start playing when perhaps 20% of the file has been received by the viewer.
What are some down sides of animated GIFs? The primary one is that because the movement attracts your eye, they can be distracting to someone trying to comprehend the other information on the same page. The other disadvantage so that they generally tend to be used as a novelty, and after the first few times you see the same animated teddy bear. it can start to look cliché or juvenile.
Animations can be very useful to show time-ordered information, i.e. to show changes in a feature over time (e.g. erosion of a beach, growth of a plant, changes in stock market prices) or to demonstrate a process (e.g. how to change a tire, how blood moves through the heart). Like GIF images, the files are much smaller for graphics that have large continuous regions of solid color and sharp edges, as compared to images with more spatial variation such as photographs.
This should be an easy lesson since the HTML code for inserting an animated GIF is exactly the same as we learned for inserting a "regular" ("un-animated"?) GIF that we saw in lesson 7a:
<img src="filename.gif" alt="alternative text" width=X height=Y>
where X is the width of the image and Y is the height of the image in pixels. You can also include the left and right alignment options we saw in lesson 20.
Note: If you do not have the working documents from the previous lessons, download a copy now.
For our Volcano Web site we are going to add an animated GIF slide show that reviews the events that led to the May 18, 1980 eruption of Mount St Helens. This consists of photographs, and diagrams, used courtesy of the USGS/Cascades Volcano Observatory.
To view and download the GIF animation, visit the Lesson 29a Image Studio. Save this image inside of your pictures folder/directory with your other image files.
We are going to first create a basic HTML page that displays the GIF animation. Then we will build a link from our Volcanic Places in the USA page that will load this animation in a separate browser window.
<html> <head> <title>Mount St Helens: Events of May 18, 1980</title> </head> <BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666> <center> <img src="../pictures/msh_events.gif" alt="Mount St Helens Animation" vspace=10 width="400" height="135"><br> <font face="verdana,helvetica,arial" size=2 color=#999999> slide show will load and play automatically</font><p> <i>Courtesy of the <a href="http://vulcan.wr.usgs.gov/">USGS/Cascades Volcano Observatory</a>.</i> </center> </body> </html>
NOTE: Since the GIF animation may stream in slower "chunks" via a slow internet connection, we provide a message in the small text below the image so a visitor to this page knows to wait while the animation loads and runs.
<p> <a href="msh_may18.html" onClick="window.open('msh_may18.html', 'msh', 'width=440,height=280,status,menubar'); return false" onMouseOver="window.status='view animation of eruption events'; return true"><img src="../pictures/projector.gif" alt="showtime!" width="46" height="32" align="left" border=0></a> See the <a href="msh_may18.html" onClick="window.open('msh_may18.html', 'msh', 'width=440,height=280,status,menubar'); return false" onMouseOver="window.status='view animation of eruption events'; return true">animation of events</a> for this volcanic eruption [194k GIF Animation].
Note also that our link information gives the site visitor a sense of what kind of media (and file size) will be included on the page if they follow the link.
<form> <input type=button value="Return to Volcanic Places in the USA" onClick="self.close()"> </form>
Compare your web pages with this sample of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor. Compare your work to the HTML of the samples (look for something like Source from your browser's View menu).
Review topics for this lesson:
Add an animated GIF image to your own web pages. Try some of these resources to find images you can use:
If you tire of viewing animations on a web page, you can freeze them by clicking the Stop button in your web browser. When you create your own GIF animation files, you have some options to control how many times it will loop through an animation sequence, so you can prevent it from endlessly spinning, dancing, etc.
And like static GIFs, you can make them act as hyperlinks like we learned in lesson 8e. If we found on the Cheeselover's Free Clip art site an animated gif of a dancing block of cheese, we could create a hypertext link to another site or HTML file by writing:
<a href="http://www.cheeseanonymous.com/"><img src="dancing_cheese.gif" width=200 height=100 alt="animation of dancing cheese" border=0></a>
For more information about GIF Animation, see Royal E. Frazier's GIF Animation on the WWW as well as the Web Developer's Virtual Library
Viva Video! Movies in your web page!
Writing HTML: Lesson 29a: Animate my GIF!
©1994-2002 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
Questions? Comments? Visit our feedback center
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.