您的位置：寻梦网首页＞编程乐园＞HTML园地＞HOME page制作初步
Writing HTML | About | FAQ | References | Tags | Lessons | previous | next |

29a. Animate my GIF!

siren It's a GIF!
It Moves!
It's an Animated GIF!
do we have your attention now?
can you get it back?

Objectives

After this lesson you will be able to:
  • Identify types of information that are appropriate for GIF animations
  • Describe the difference between a GIF image file and an animated GIF image file
  • Write the HTML to insert an animated GIF into your web page
  • Write JavaScript code to close a window

Lesson

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 fully 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 be 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.

HTML for Inserting an Animated GIF

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.

Adding a GIF-animated Slide Show

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.

  1. Use your text editor to create a new HTML file called msh_may18.html in your workspace directory/folder.
  2. Enter the following HTML in this file: 
    
<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="400px" height="135px"><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.
  3. Save and Reload in your web browser. This should be a fairly simple page with the animated GIF slide show in the center.

Now we will modify the HTML in the Volcanic Places in the USA file usa.html so that it uses JavaScript to display our new document in a smaller web browser window.

  1. Use your text editor to open the file usa.html
  2. After the last sentence in the Mount St. Helens section ("...toppled over like toothpicks.") add this HTML:
    3. 
<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="32px" 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: We are using JavaScript code from lesson 27d to open a specific HTML file msh_may18.html in a new web browser window that is 440 pixels wide and 280 pixels high. We have also included the JavaScript mouseOver code to provide a descriptive text a viewer moves the mouse over the link (see lesson 27a). The slideshow page is set to open by clicking either the icon of the projector or the hypertext link that is adjacent to the icon.

    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.
  3. Save and Reload in your web browser. If all went well, when you click the text animation of events from the Volcanic Places in the USA page, the slide show should play in a new browser window.

Now you may realize that as we continue adding features that open new windows via JavaScript, some visitors to your web site may not be sure how they can easily return to the main page, as they tend to leave an array of windows that clutter up or completely cover their desktop. We can help out a little bit by adding a JavaScript button to close a window.

  1. Open the file msh_may18.html in your text editor.
  2. After the line with the link to the Cascades Volcanic Observatory (and above the </center> tag) insert this HTML: 
    
<form>
<input type=button value="Return to Volcanic Places in the USA" 
onClick="self.close()">
</form>
    NOTE: We've added a new FORM element, type=button which inserts a normal interface style button, with the label of the text in the value=... option. We add a JavaScript event to happen hen the button is clicked that tells the window this document reside in (self) to close itself. In effect, we have created a custom button that will close this window just as if the viewer had clicked the standard window close button from the titlebar.
  3. Save and Reload in your web browser.

Check Your Work

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

Review topics for this lesson:

  1. What kind of information is good to use to present as a GIF animation?
  2. What is the difference between a GIF animation file and a GIF image file?
  3. What is the HTML code to place a GIF animation in a web page?
  4. How do you write JavaScript code to close a browser window?

Independent Practice

Add an animated GIF image to your own web pages. Try some of these resources to find images you can use:

More Information

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 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

Coming Next....

Viva Video! Movies in your web page!

GO TO.... | Lesson Index | previous: "Multimedia in a Page" | next: "Multimedia: Movie Time" |

Writing HTML: Lesson 29a: Animate my GIF!
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges



URL: http://www.mcli.dist.maricopa.edu/tut/tut29a.html