 |
It's a GIF! It Moves! It's an Animated GIF! |
| do we have your attention now? can you get it back? | |
|
It's a GIF! It Moves! 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 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.
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.
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.
<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: 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.
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.
<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.
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 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-1999
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
The 'net connection at MCLI is
Alan Levine
Comments to alan.levine@domail.maricopa.edu
URL: http://www.mcli.dist.maricopa.edu/tut/tut29a.html