Image Matters Logo
The Essence of
IMAGE MATTERS

Image Animations
   

 


If java disabled or no main menu showing above - use links below.
Image Introduction
Image Basics
JPG ''Lossiness''
Picture ''Anatomy"
Color Models
Colors - More Facts
Image Tools
Image "Tweaks"
Animated Images
Graphics
Resolution and DPI
Scanning
Printing after
Scanning
Digital Cameras
Binary and Hexadecimal
with Color
Picture Taking
Considerations
Image ''Burden''
Pre-Posting,
Image edits
Posting Pictures
Introduction
Posting Attachments
Posting with
"Hot Links"
Photo Facts
Photo Facts - Diagrams



Animated GIF's -

The .GIF format is very useful, in as much as, a number of "frames" or variants on the theme of an image, may be combined into one and shown as a sequence of pictures. The effect is that of an animation and so a feeling of movement may be portrayed. Furthermore, often good use may be made of the transparency option.

For the purposes of simply showing what is involved, I will ''dismantle'' a smilie type GIF image ........ just to demonstrate the structure.


Example Animation -

Here is a smilie which is gun related! It is made up of 8 frames and the background color is what is chosen to become the transparent color in the finished animation. There are various software applications which assist in building of these.

This finished file, as it stands, is rather large at 10k ..... but can be shrunk in size using optimization. This process removes redundent pixels, simplifies the color pallette where possible and also removes comment blocks. Each frame has a time element - and this is shown, in milli seconds.

Frames after optimization are shown after these.


Frame #1
Frame #2
Frame #3
Frame #4
Frame #1
20 msec
Frame #2
10 msec
Frame #3
10 msec
Frame #4
10 msec
Frame #5
Frame #6
Frame #7
Frame #8
Frame #5
10 msec
Frame #6
10 msec
Frame #7
10 msec
Frame #8
40 msec

And, here is the actual smilie, in action (10k version)!



After optimization -

Here are the frames after optimization. Black is now the transparent color and, any pixels that are not used or needed in a frame are done away with. It is all about ''pruning down'' and going for economy so that nothing is used repeatedly when not needed. It displays the same but - the file is now less than 2k!


Optimized frame #1
Optimized frame #2
Optimized frame #3
Optimized frame #4
Frame #1
20 msec
Frame #2
10 msec
Frame #3
10 msec
Frame #4
10 msec
Optimized frame #5
Optimized frame #6
Optimized frame #7
Optimized frame #8
Frame #5
10 msec
Frame #6
10 msec
Frame #7
10 msec
Frame #8
40 msec

The optimized smilie, in action (sub 2k version)!



There we are! Hardly essential learning but, possibly something that you have not previously understood so well.... and maybe this helps dispel some mystique!


Back to Top
 

©AlumBankWeb 2004 - 2012