 |
How Did You Animate Me? |
|
|
How Did You Animate Me? |
|
|
s a Web Designer, Graphic Artist and HTML Instructor for Virtual University, I have received a lot of questions related to animated graphics and decided to create this web site to try to clarify some of them in an easy manner:
What is an animation?
nimated graphics are actually a series of images that are grouped together and saved as "one" .gif image to create a picture that looks like it is moving or lighting that changes intensity or colors.
The best example would be the small children's picture books where you flip the pages rapidly to make it look like a movie and the figures appear to become animated. Or an old strip of movie film where each frame is a separate image, but when run through a projector, the images move and create the action of the movie.
imply put, each time an image moves or changes colors in an animation, a new graphic must be made. Then using an animation software program, the images are collected together, the timing is set for the motion of each image (how fast or slow you want it to move) and then the entire image package is usually set to "loop" -- or repeat continuously.
After checking the animation motion, the entire group of images are saved as "one" .gif graphic.
look at the number of images required to create the dinosaur
hy do some animated graphics take so long to load? Remember, you are not downloading just "one" graphic, but a series of them. Animated graphics can be comprised of 2 - 50 or more separate images and each one has to load before the animation will begin. Each individual image is a certain number of bytes -- some more and some less -- but added together, they can make the size of the animation quite large.
With some animated graphics, it is possible to change just "one part" of each separate image to reduce the total byte size of the finished animation. To demonstrate this, I have given examples of two animated graphics where I was able to change only a portion of the entire image to create the animation. By not having to download the entire image for each frame of the animation, I was able to reduce the total bytes and load time considerably.
This demonstration will explain it further
aking an animated graphic larger or smaller can be very time consuming as "each" image must be resized.
Using our blooming yellow rose for an example, you know it contains 8 individual images. Each one of these must be resized individually to make the animation larger or smaller. If you opened this graphic in a program like Paint Shop Pro and resized and saved the image there, you would only be changing the size of the first frame and loose the animation.
Example: The animated graphic is "50" x "50" -- I want to enlarge it to "60" x "60", so I open the image in my graphics program. But, because this is an animation, I only get the first frame and enlarged it looks like this:
Okay, what if I just change the size of the animation in my < IMG SRC > code -- that seems much quicker and easier!!!
Now I have "told the browser" to change the size of all 8 frames to "50" x "70" but I have lost the integrity of the image and distorted it causing those black lines to run through it!
(Note: Some of the newer browsers may be more forgiving when you just change the size of the graphic in your HTML code, but remember, there are a lot of people that will view your web site with a browser that is different than yours!)
The only way to change the physical size of an animated graphic is to change "each" image individually. If you are good with graphics, it would probably be easier to start over and make a new animated graphic. If you have no graphic talent, try to find an image that is the proper size and don't manipulate it.
he dinosaur graphic is quite large and will take some time to download on your web page -- but you'd like to use it as a link to a page about dinosaurs. Would a "Thumbnail" image be possible?
To keep the animation in a thumbnail image, you would have to go through the process described above -- and the dinosaur has 18 image frames that would have to be resized! You will also loose a lot of the detail in the dinosaur when trying to make a thumbnail image. Basically, you have three choices:
| -- Example 2 -- |
|
-- Example 3 -- |
 Visit my dinosaur page |
|
 Visit my dinosaur page |
|
Animated dinosaur = 38,879 bytes
Example 2 = 1,398 bytes Example 3 = 1,679 bytes |
||
here are a lot of software programs available to create animated graphics. Although I don't endorse any of them, I will mention a few here.
Copyright is claimed by Otter Sites Web Design to the entire body of this collection, as an entity, and to the HTML code which presents it as a collection. Otter Sites has received expressed permission for use of public domain and other privately owned works on this web site.The content of this site, in part or in full, may not be reproduced, published, transmitted, uploaded, modified or distributed in any manner without Otter Sites prior written permission. Otter Sites Web Design is not responsible for material presented on third party linked sites.