WebDevelopersJournal.comTips on Web Page Design, HTML and Graphics
SITE SEARCH
Newsletters
HTML (M-F) Text (M,TH)



Jobs at webdeveloper.com

Resources By Subject
Technical
Graphical
Authoring
Business
WDJ resources
Archive

internet.com

internet.commerce


Developer Channel


Find a web host with:
CGI Access DB Support Telnet Access
NT Servers UNIX Servers



Semi-automatic?

JavaScript
JavaScript Helper:
Meet Paige Turner, the least geeky geek we've ever come across.

Variables and Operators Explained:
First of a three part guide to JavaScript basics.

Controlling Forms:
Enhance your HTML forms with a touch of JS.

DHTML:
Forget how it works, let's see some in action!

eKit: Rational Build Forge Express. Access valuable resources to help you increase staff productivity, compress development cycles and deliver better software, fast.

Animated Gifs: Make your pixels dance.

by Mark Larmand

So... here we are again getting ready to talk some more about the infamous digital pixel. As I'm sure you've all seen by now, being the Web- and graphic-savvy individuals that you are, there aren't a whole lot of limitations on what can be done with a pixel these days. You can bend it, twist it, warp it, tear it, augment its colour, diminish its colour, even create large and small groups of them and choreograph their appearance to work in either harmony or discord. And then, when you've done all that, you can teach them to dance! Now that's a lot of versatility for something so tiny that it's dwarfed by the point of a pencil!
August 17, 1999

And if you had a few dozen million bucks, you could create a blockbuster movie where dinosaurs are cloned, and look real because there's so much detail put into the graphic work, and they take over a tropical island theme park, and you can make more than a hundred million bucks from showing it to people!!! Oops, got carried away there, sorry. But you get where I'm going with that, right?

What we'll be talking about in this article is how we "teach our pixels to dance" or in other words, animate them. Gif animation has become one of the Web's most popular and interesting characteristics. There are hundreds of animation contests going on all over the Internet at any given time, to satisfy the cravings of the average Gif animation enthusiast. It's definitely one of the more 'user-friendly' ways to add some excitement to a site (ala: no plugins required!).

In order to create an animated Gif image, you need to use a program that's been designed for that purpose. The more specific it is to serving that purpose, the better its performance will be in ease of use and file optimization. There are however a few new graphics programs out there that have been designed to fulfill more than just this one function, and still work nicely for creating animations. These programs are geared more toward the Web designer crowd, and will also help the Web/Graphic Artist to compress, compile, and even slice'n'dice images for placement within table cells on a Web page. And on top of all that, they also provide a small amount of painting and/or drawing capabilities for the more experienced artist.

Since I myself do not have every different animation program every made, I'll be referencing examples here from the ones that I tend to use the most. (Editor's Note: There are lots of animation programs available, many of them free, in our Web Tools Download Section.) Before you get started, have a quick look at these samples done with each program.

Corel Xara 2


Things to note: It has 17 frames, is 22.3 KiloBytes (KB), and uses a 24-colour Adaptive palette (Global Optimized), with no dithering.

Macromedia Flash 3


Things to note: It has 29 frames, is 11.9KB, and uses the 216-colour Web-safe palette (Global Optimized), with no dithering. In the next section, we'll break down what's behind an animated Gif.

This article is in four parts:

  1. Introduction
  2. What makes an animated Gif, animated?
  3. Behind The Scenes
  4. Organisation and Efficiency
Suits PonytailsPropheadsContact WDJDiscussWeb AudioSearch



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
Microsoft Article: HyperV-The Killer Feature in WinServer ‘08
Avaya Article: How to Feed Data into the Avaya Event Processor
Microsoft Article: Install What You Need with Win Server ‘08
HP eBook: Putting the Green into IT
Whitepaper: HP Integrated Citrix XenServer for HP ProLiant Servers
Intel Go Parallel Portal: Interview with C++ Guru Herb Sutter, Part 1
Intel Go Parallel Portal: Interview with C++ Guru Herb Sutter, Part 2--The Future of Concurrency
Avaya Article: Setting Up a SIP A/S Development Environment
IBM Article: How Cool Is Your Data Center?
Microsoft Article: Managing Virtual Machines with Microsoft System Center
HP eBook: Storage Networking , Part 1
Microsoft Article: Solving Data Center Complexity with Microsoft System Center Configuration Manager 2007
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Intel Video: Are Multi-core Processors Here to Stay?
On-Demand Webcast: Five Virtualization Trends to Watch
HP Video: Page Cost Calculator
Intel Video: APIs for Parallel Programming
HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
Microsoft Silverlight Video: Creating Fading Controls with Expression Design and Expression Blend 2
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Sun Download: Solaris 8 Migration Assistant
Sybase Download: SQL Anywhere Developer Edition
Red Gate Download: SQL Backup Pro and free DBA Best Practices eBook
Red Gate Download: SQL Compare Pro 6
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
How-to-Article: Preparing for Hyper-Threading Technology and Dual Core Technology
eTouch PDF: Conquering the Tyranny of E-Mail and Word Processors
IBM Article: Collaborating in the High-Performance Workplace
HP Demo: StorageWorks EVA4400
Intel Featured Algorhythm: Intel Threading Building Blocks--The Pipeline Class
Microsoft How-to Article: Get Going with Silverlight and Windows Live
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES