Working With ANIMATION
 
 
PRODUCTION NOTE: THIS PAGE CONTAINS SEVERAL ANIMATED GIF's FOR DEMONSTRATION PURPOSES. THE PAGE MAY TAKE SEVERAL SECONDS TO FULLY DOWNLOAD.
Welcome to "Working With ANIMATED GIF'S", the area of DESIGN WORKS! dedicated to helping our clients understand the relationship of "animated GIFs" to HTML programming, web site design and content. By now we have either completed your Strategic Internet Business Plan or are at the "Design Considerations" planning point. The purpose of this area is to present a brief review of animated GIFs, their use and design benefits.
It is possible using special GIF animation software to create a single file containing a series of GIFs which when displayed by the browser creates a frame by frame animation sequence. Special programming embedded within the file instructs the browser to control the background of the animation, frame speed and the number of times that the animation is presented on screen.
Used strategically within the web site, animation can create some very appealing and elaborate effects. There is a downside however. Because animated GIF files can be quite sizeable, they can take extra time to download. Too many animated GIFs on one page (this page is an excellent example) can severely delay download times and irritate viewers. For this reason, animated GIFs are usually limited to small icon sized images.
We will begin our review with a detailed analysis of our "TOWNHALL TOUR" animated GIF. Please note that the following example is the only example on this page where we actually present each individual animated frame.
 
OUR 'TOWNHALL TOUR' GIF
Strategically, the TOWNHALL web site serves two objectives. The first is to introduce TOWNHALL Internet Communications, who we are, our capabilities, values and beliefs. The second objective is to act as a demonstration web site, one that we can use when working with our clients to help develop their particular web site design strategies. As a result, our web site is quite large and offers several varied pages of information.

We developed the TOWNHALL TOUR concept to help ensure that viewers had an easy way to tour the up front "who we are and what we represent" part of our site.

Animated GIFs are produced from a number of images, each created individually. As a result, production of animated GIFs can be complicated and time consuming. For your information, we have presented each individual animated frame used to compose the "TOWNHALL TOUR" animation. The graphics and text were created in Photoshop. The animated GIF was created using special animation software. (File Size: 10.3KB - 10 Frames including white background frame)
FRAME #1 DOWNLOAD TIMES:
  • 14.4K - 5.9 secs.
  • 28.8K - 2.9 secs.
  • 33.6K - 2.5 secs.
  • 56K - 1.5 secs.
  • 64K - 1.3 secs.
  • 128K - 0.7 secs.
FRAME #2
FRAME #3
FRAME #4
FRAME #5
FRAME #6
FRAME #7
FRAME #8
FRAME #9
FINAL ANIMATED GIF


For each of the following examples, we: (1) exhibit an animated GIF; (2) briefly review our design strategy; (3) identify the file size and number of frames; and (4) present an overview of download times based on modem speed.


CANADIAN PROFESSIONAL GOLFERS' ASSOCIATION

The objective of the animated GIF presented above was twofold. First, to create a transitional sequence designed to transform the Canadian Professional Golfers' Association logo into a functional navigation icon. And second, to draw attention and create main page interest. (File Size: 72.6KB - 10 Frames)

DOWNLOAD TIMES:
  • 14.4K - 21.3 secs.
  • 28.8K - 10.7 secs.
  • 33.6K - 9.1 secs.
  • 56K - 5.5 secs.
  • 64K - 4.8 secs.
  • 128K - 2.4 secs.
CONTENT DIVIDER
The animated GIF pictured above is utilized to provide a "divider" between headings and body copy. (File Size: 6.84KB - 35 Frames)

DOWNLOAD TIMES:
  • 14.4K - 3.9 secs.
  • 28.8K - 1.9 secs.
  • 33.6K - 1.7 secs.
  • 56K - 1.0 secs.
  • 64K - 0.9 secs.
  • 128K - 0.4 secs.
UTILIZING RESTRICTED SPACE

In order to present the "TOURNAMENT" heading within restricted icon space, we brought the golf ball to life via this animated GIF. The animation also serves to focus attention on and increase visits to this important area of the CPGA web site. (File Size: 26.7KB - 18 Frames)

DOWNLOAD TIMES:
  • 14.4K - 13.6 secs.
  • 28.8K - 6.8 secs.
  • 33.6K - 5.8 secs.
  • 56K - 3.5 secs.
  • 64K - 3.1 secs.
  • 128K - 1.5 secs.


W E L C O M E
W E L C O M E
W E L C O M E

We faced somewhat of a dilemma when we created the animated GIF presented above. To support our "TOWNHALL" name and positioning (in our original web site design), we believed that it was important to create a unique "TOWNHALL" building. We also wanted to support our introduction to first time viewers with some type of unexpected movement. We felt this would provide an element of surprise, attract attention, appear a little "off the wall" and be a really neat way of introducing the "TOWNHALL TOUR" concept.
THE MAGICAL MYSTRY TOUR!!!

At this point, you may or may not have read our "BLACKHOLE" page, a review of what not to do on the Internet or within the confines of your web site. Much to our concern, our first point is (and we quote) "DO NOT use large downloadable pictures on your homepage, or at least structure your homepage to support readable text while your images are downloading."

"Physician heel thyself" we thought. The original animated GIF took about a century to download - but we really wanted something neat. Here's what we did to address the problem. First - we divided the original GIF into three individual GIFs. Second - we reconstructed the three GIFs by setting them up in an invisible table (that's right, the image you see above is actually three separate images combined). And finally, to speed up downloading, we reduced the animated GIF to only the area surrounding the bus route.

To demonstrate, we have reproduced the image below with the table rows visible. Please note that the animated portion of the image accounts for only the bottom quarter of the total image. The total image size is 67.1KB. The animated GIF now accounts for 30.2KB or less than one third of the total image size. The image download now runs about six times faster!

W E L C O M E
W E L C O M E
W E L C O M E
DOWNLOAD TIMES (ANIMATED IMAGE ONLY):
  • 14.4K - 17.2 secs.
  • 28.8K - 8.6 secs.
  • 33.6K - 7.4 secs.
  • 56K - 4.4 secs.
  • 64K - 3.9 secs.
  • 128K - 1.9 secs.
File Size: 30.2KB - 8 Frames



TOWNHALL Internet Communications

We thought that this was a simple but effective way of combining the TOWNHALL tower and our "TOWNHALL Internet Communications" name. It is a simple animation with very fast download times. (File size: 4.21KB - 25 Frames)

DOWNLOAD TIMES:
  • 14.4K - 2.4 secs.
  • 28.8K - 1.2 secs.
  • 33.6K - 1.0 secs.
  • 56K - 0.6 secs.
  • 64K - 0.5 secs.
  • 128K - 0.3 secs.



LOST IN SPACE!!!

When we created "THE BLACKHOLE" our objective was to design a GIF that approximated the size of a typical banner advertisement. We thought that this would give us the opportunity to show you what could be accomplished within the confines of a banner ad! While we do not encourage banner ads (we think they take away from the viewers enjoyment and can interfere with content flow), there are times when they can be useful within your web site. For example, to create content driven traffic throughout your web site. (File size: 77.2KB - 17 Frames)

DOWNLOAD TIMES:
  • 14.4K - 25.4 secs.
  • 28.8K - 12.7 secs.
  • 33.6K - 10.9 secs.
  • 56K - 6.5 secs.
  • 64K - 5.7 secs.
  • 128K - 2.9 secs.



FLOATING IN CYBER SPACE!!!

OK, we got a little fancy here. But it's not on the main page! We began by combining the space shuttle with our "TOWNHALL" tower. Added the "Canadarm" with the Canadian flag (after all, it's our Canadianization page) and created a flying space craft.

We wanted to create a unique surprise effect so we fly the space craft across the page, over the "OH CANADA" title and out through the space ship window into outer space. In a while, the space craft reappears towing our CANADIANIZATION banner. On the actual web page we delay the start of the space craft flight by a few seconds to ensure that the download is completed before the flight begins. We repeat the flight once again for affect, leaving the CANADIANIZATION banner in place.

As with our other animated GIFs, we created this GIF to help demonstrate the unique affects that can be achieved using animated GIFs. These affects can not be achieved using JAVA i.e. the shuttle flying across the page bottom to top then reversing from to left to right. (File size: 37.3KB - 21 Frames)

DOWNLOAD TIMES:
  • 14.4K - 21.3 secs.
  • 28.8K - 10.6 secs.
  • 33.6K - 9.1 secs.
  • 56K - 5.5 secs.
  • 64K - 4.8 secs.
  • 128K - 2.4 secs.

DESIGN WORKS!!! DOWNLOAD TIMES:
  • 14.4K - 26.7 secs.
  • 28.8K - 13.3 secs.
  • 33.6K - 11.4 secs.
  • 56K - 6.9 secs.
  • 64K - 6.0 secs.
  • 128K - 3.0 secs.
  • File Size: 46.8KB - 19 Frames



Contact: TOWNHALL Internet Communications
 
IT'S POSSIBLE YOU SHOULD EXPECT A WHOLE LOT MORE FROM YOUR WEB SITE !!!
 
Web site contents, graphics and text are copyright © TOWNHALL Internet Communications.
ALL RIGHTS RESERVED WORLDWIDE.