Animated Heart Graphics

Animated Heart Graphics

Animated heart graphics make an interesting decoration to your website, especially during holidays like Valentine's Day. Below are some ways to get them easily, and how to use them effectively.

Old-School Animated Heart Graphics

The idea of animation is simple - create a series of pictures (aka "frames") in which a similar object is shown in a slightly different position. Show these frames sequentially, and the viewer's eye will fool itself into thinking that it is an object in motion. An early web image format known as a "GIF" (short for Graphic Image Format) worked very well for this. This is because GIFs are designed for drawings, not photos, so developers could keep the file size low while still showing some fairly bright images.

You can still find animated GIFs on the web, usually available for free, at sites like Hellas Multimedia. Three things about the images there may make them unsuitable for your project, though:

  1. Because they are very low-resolution drawings, they have a rough, jagged feel to them.
  2. In order to keep the file size small, the pictures are all very tiny - and if you tried re-sizing them, the above-mentioned low resolution would make them look even worse.
  3. Each animated GIF is only about four or five frames in length - which means the animation itself is rather jerky. As a rule, the fewer the frames, the less smooth the motion will appear.

To give a reference, films have twenty-four frames every second, to imply "true" motion - and television uses almost thirty. However, coming up with that many frames in an animated GIF is a tedious process.

The Web 2.0 Way: Flash and DHTML

As advances in graphics on the web have developed, some more efficient ways of creating animated heart graphics followed. Probably the most widely used and flexible tool would be Adobe's FLASH, which has evolved from a simple animation tool into a robust programming platform on it's own.

FLASHy Animations

There are two primary disadvantages to using FLASH for your animated heart graphics. One is that it may be overkill; if the only animation you need is a heart, then going through the process of creating a FLASH application, programming it, uploading it, and configuring your web page to show it may be more than you'd really want to bother with.

Second, not all web pages will show FLASH. While it does have widespread use (popular sites like YouTube rely on it), Flash has also been linked to several security risks on the web, and some people choose not to have it installed on their computer.

You can, however, find stock FLASH animations of hearts and other things on the web, for fairly low prices, and with several options (such as making the hearts follow the mouse around the screen).

Dynamic HTML

A second method used to create animated heart graphics is to take advantage of the newer standards in CSS and DHTML. In this method, the animation may still be a series of images, or it may be one image that then is manipulated and changed over time by the DHTML code. To give a simple example, the code could tell the browser to first show the image of the heart at the top of the screen, and then increment the vertical location coordinates by one pixel every fraction of a second. It's the same theory as the GIF animation, but instead of drawing individual pictures, the computer does the work.

DHTML does require some knowledge of coding such as Javascript, but that is easy enough to learn online. Or you can also use pre-made animation scripts.

Whatever method you use, remember that there's a fine line between a cute animation and an annoying one - so use them with care, and make sure they don't take away from your site's ultimate message.

Animated Heart Graphics