Animations

Mr. Michael Delahunt

Graphic Design 1 & 2

Creating

Animations

These little movies are rather like flipbooks made with several pictures, each slightly different from each other.

Animation is giving movement to a thing. Also, making animated cartoons -- films that are also called animations. Types of animation include cel animation, clay animation (also called claymation), and computer animation.

GIF is the name of a file format for computer graphics. The letters GIF stand for Graphic Image File. It is a widely supported image-storage format promoted by CompuServe that gained early widespread use by on-line services and on the Internet. A GIF is a file in this format.

Pronounce "GIF" giff [rather than Jiff . . . that popular brand of spreadable peanuts].

JPEG, another format for graphics used on the World Wide Web, is generally better for photographs.

There are many other graphic formats, including AI (Adobe PhotoShop), APS (Adobe PhotoShop), PICT (Macintosh Picture), and TIFF (Tagged Image/Interchange File Format).

Animations that you view in a Web browser are called animated GIFs. Animated GIFs create the illusion of movement by displaying a sequence of images, or frames, over time. Adobe ImageReady provides a powerful, easy way to create animated GIFs from a multiple-layer image.

Examples of animated GIFs:

Here is an animation in which the only aspect of the image that changes is its value -- lights and darks.

The image in this animated GIF changes its shape and color as it detonates, gradually changing into a mass of sparks. Then to repeat the cycle again, and again . . . .

Here's an animation with an element that changes its place in the composition -- the plane coming out from behind the earth, coming toward us, and then going back behind the earth again.

For up to 150 points:

Your assignment is to make a series of three short animations -- call them A, B, & C. Each animation must satisfy a different set of specifications. Find the specifications required for each of these animations below. Each has its own deadline.

For the A animation [actually more of a slide show]:

1st: : Open your access to the PHS-ITC server, then start up KidPix Studio Deluxe, and open a slide show file "The Landing" you'll find in Users > Assignments > Animations. Play this animation / slide show and note how each frame shows a gradual change from the frames before it. The exception is the first frame after the title frame.

2nd: : Just as I created this 16-frame slide show, by making one picture at a time in KidPix, you should make one using at least 12 images -- each one slightly different from the previous one and the one that follows it. As you save each picture, title them with a number, so that you can keep track of the place each will have in the order of frames you sequence.

3rd: : The deadline for the A animation, for 40 points, is Thursday, March 21. Submit the file you create to the drop box titled "[your last name].animaA.[period number]"

For the B animation:

1st: : Open your access to the PHS-ITC server, then start up ImageReady. It is located in the Applications Drive.

2nd: : As instructed in the pages titled "Creating Animated Images for the Web," connect to the PHS-ITC server and open Users > Assignments > Animations. In the Animations folder you'll find in the folder "Create Animated GIFs. Drag that folder into your own folder on the server. Continue to follow the written directions. Show Mr. Delahunt your screen each of the three times you reach a place in the text marked "BONUS" and you'll earn 20 points each time you do, if you reach them before the deadline. April 3 (Submit no file to the drop box.)

Optimization is the process of fine tuning an image for use on the Web, and is an important step in producing an image with good display quality and a small file size for use on the Web. Creating small graphic files is key to distributing images on the Web. With smaller files, Web servers can store and transmit images more efficiently, and users can view and download images more quickly.

For the C animation:

[ The following portion of this assignment is not yet fully posted! Stay tuned for the complete text! ]

1st: : Open your access to the PHS-ITC server, then start up ImageReady. It is located in the Applications Drive.

2nd: :

3rd: :

4th: : Finish before the deadline, for 50 points, April 9. Submit a duplicate of the file you create into Users > Assignments > Graphic Design > drop-box titled "[your last name].animaC.[period 1 or 2].GIF"

One-fifth of the points you can earn are for turning this assignment in by its deadline.

Return to Graphic Design Course

ArtPage has thousands of articles about art terms used in art production, art criticism, art history, aesthetics, and art education. I created ArtPage for my students, to help them increase their understanding of art concepts, readings, writings, and conversations. Some of the hyperlinks found on the pages about my elementary art program will take you to ArtPage articles about terms on these pages.

I have taught art at three elementary schools in the Paradise Valley Unified School district (northeastern Phoenix and north Scottsdale) from 1986-2001. I began publishing information about my classes on the Web in 1995. I taught at Pinnacle High School during the 2001-2002 school year, and posted these lessons that year. I will maintain them as time permits.

Please send your comments to