Animated GIFs for S1

	Educational Activities (Lesson Plans) The Winnipeg School Division No. 1
	General Information \| Submit Lesson \| Search Lesson Plans
	Art Lessons \| Technology Skills Continuum Guide \| Home

Animated GIFs

Description:

Animated GIFs are easy to make and a good vehicle to get the creative juices flowing.

Art: Yes

LanguageArts: Yes

SocialStudies: Yes

TypeLessonPlan: Unit Plan - complete unit

TechnologySkills: computer animation, HTML, file conversion, drawing

SoftwareUsed: Paint, LView Pro, GIF Construction Set, an HTML Editor

EarlyYears:

MiddleYears: Yes

S1-S4:

SpecificGrade: S1

Submittedby: Steve Skultety

E-mail: sskultety@wsd1.org

Details:

You will need: Paintbrush, LView Pro, GIF Construction Set, and an HTML Editor. Both LView and GIF Construction Set are on the same page at Tucows. The URL is:

http://www.sk.sympatico.ca/~tucows/softgrap.html

Process: Using Paintbrush students need to make a series of graphics, which are slightly different than the previous image (in sequential order). They can create the first image and call it "image1.bmp". Then they use the "save as" command to save the first image as "image2.bmp". They then make slight changes to the second file and save it with the "save" command. They then save "image2.bmp" again using the "save as" command but this time they call it "image3.bmp". They then make more slight changes to "image3.bmp" and save it. This process is repeated until all the images for the animation have been completed.

Once the numbered .bmp files have been created LView Pro is used to convert the files to .gif format. Start LView Pro and open the first .bmp file. Using the "save as" command save the file as a.gif 87a/89a file. (It is important to make sure the files are numbered). Once the numbered files have been converted GIF Construction Set is used to animate the files.

Open GIF Construction Set. From the "file" menu choose "Animation Wizard". Select the following options as they come up:

Use on A Web page
Loop infinitely
draw 16 colors

The other default options will be fine. You may want to change the delay setting from the default of 100/100 ths of a second. It depends on what the animation is and the amount of movement between frames.

Once the options have been selected you need to add the .gif files. Click on the select button and set the path to the directory which contains the .gif files. Add the required files keeping in mind the order they will need to be in. It may happen that some files are added twice or some files are added again but in reverse order. You may need to think about the order in which you add the files before you get to that point. When all the .gif files have been added click "cancel". Then click the "Next" button, then the "Done" button. The images will then be re-mapped. This could take a few minutes depending on the speed of your machine.

The last thing you have to do is name and set the path of the new image file you just created. Click on the "Save" option in the "File" menu. (I save my animated file with the same name as the key word (topic) used in the numbered files except without the integer).

Example: cat1.gif (image file), cat2.gif (image file), cat3.gif (image file), cat4.gif (image file), cat.gif (the animated .gif file containing the 4 files listed above)

Your animation is now complete and ready to insert into a Web page.

Embedding the Animated GIF into a Web Page

With an HTML Editor, the animated graphic is inserted in a Web page just like any other graphic using the <img src=file_name.fi>tag.

Example:

<HTML>
<HEAD>
<TITLE>Animated GIF Example</TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

<HR SIZE=5>

<P>



<CENTER>
<IMG SRC="images/animated.gif">
</CENTER>
</BODY>
</HTML>

Using a browser such as Internet Explorer, load the HTML file which contains the animation. These files can be put on the Web but the file size is a major consideration.

Example can be found at:
http://www.wsd1.winnipeg.mb.ca/nnl/cecil_r/pat_97/pat_dex.htm

Filename: Animated GIFs for S1.htm

General Information | Submit Lesson | Search Lesson Plans | Technology Continuum Guide | Home