HotMedia Archives: Contents


[April 1997 archive is currently unavailable.]
March 1997: The Site and Sound of MIDI: Adding MIDI Files to Your Web Site
February 1997: QuickTime VR Clinic, Part II: Object Movies
January 1997: QuickTime VR Clinic, Part I: Panoramic Movies
December 1996: Designing Graphics for Television
[October and November 1996 archives are currently unavailable.]
September 1996: Animate Your Web Site
August 1996: Server-Friendly Image Maps
July 1996: Making Web Site Image Maps

June 1996: Screen Layout Secrets

May 1996: Optimizing Graphics for CD-ROMs and the Web
April 1996: Sounding Good
March 1996: Cinepak Secrets

February 1996: Gearing Up for Multimedia

Looking for something in particular? Try the search page.


Go back to the latest HotMedia
Home | General Mac Info | Digital Video | Digital Audio
New Complete Mac Handbook | About Heidsite


HotMedia for September 1996: Animate Your Web Site

My September 1996 "Media" column described the techniques, tools, and technologies behind Web animation -- from animated GIFs like the one above to plug-in based animation technologies such as Shockwave.

This installment of HotMedia includes links to the freeware and shareware animation tools I describe as well as to additional Web animation information that appears elsewhere on the Web.

The September 1996 installment of "Media" is available on Macworld Online. After you've read the column, you can use your browser's Back button or Go menu to return to this page. (Tip: Because my column relies heavily on graphics and how-to illustrations, you'll get more out of it by reading the print edition of Macworld.)

Questions about Web animation? Join the conversation in The Back Room.


Sample GIF Animations on Heidsite

I've created a couple of animated GIFs that showcase the remarkable talents of Trixie, the official Heidsite mascot.

Trixie in Action -- This page contains two animated GIFs. One is created from a QuickTime movie. The other contains a series of still images that show sequentially to form a slide show. In this second GIF, I used the delay option to keep each image on the screen for a second or so.

A Whole Lotta Trixie -- As I mention in my column, you can repeat an animated GIF multiple times on a page without a performance penalty. This page proves it. (And how!)


Tools for Making Animated GIFs

GIFBuilder -- The top tool for making animated GIFs.

WebPainter from Totally Hip Software -- A promising new program that provides solid animation features, including an onionskin feature that shows adjacent frames, simplifying the animation process. WebPainter can also convert QuickTime movies into animated GIFs. Animations can be saved in GIF format as well as in Totally Hip's Sizzler plug-in format.

Smart Dubbing from Netherlands-based Maatschap Blom/Verweij ($25 shareware; ), converts QuickTime movies and PICS animations into animated GIFs. An included Java applet offers rudimentary sound support.

GIFmation from BoxTop Software -- A promising program that I
tested in early prerelease form. The final version is currently scheduled to ship in August. Unlike WebPainter, GIFmation
does not provide built-in painting features, but it does provide excellent color-reduction and palette-management features,
as well as image-alignment niceties that GifBuilder lacks.

Gif.gIf.giF -- Funky name, cool product: this shareware gem makes animated GIFs of Mac screen activity. A must-see from Pedagoguery Software.

Commercial Web Animation Products

Here's an at-a-glance comparison of current commercial animation products.


Product List Price(1) Pros Cons
3D Web Workshop (Specular International) $399 (without PageMill, $249) Includes GIF Builder, Adobe PageMill, Web-oriented versions of Specular's LogoMotion (3D animation) and TextureScape (background texture generator), and clip art. End results are simply animated GIF files, with the attendant drawbacks: 256-color maximum, no sound.
CelAnimator (FutureWave Software) $250 Transmits vectors (compact drawing instructions) rather than bitmaps, yeilding compact, fast-loading animation files. Supports streaming (files play as they download); provides anti-aliased text; powerful, well-design animation environment. Its vector orientation makes it unsuitable for converting QuickTime movies or PICS-based animation; no sound support (planned for future versions)
Emblaze (Geo) free during beta period Supports streaming; supports sound. Animations are limited to a maximum of 256 colors; minimal interactivity within animations -- you can specify an entire animation as a hotspot, but not elements within one, as with most other packages.
Sizzler (Totally Hip Software) free during beta period Easy, drag-and-drop conversion of PICS files and QuickTime movies; supports streaming. No sound support; minimal interactivity within animations. (Both sound support and enhanced interactivity are in the works.)
Shockwave for Director (Macromedia) $850 Superb animation controls; full sound support; full interactivity within animations. No streaming -- animations must be fully downloaded before they begin playing; stiff memory requirements. (Future versions will support streaming and will lower memory overhead.)
WebAnimator (DeltaPoint) free during beta period ($295 when shipping) Supports vectors and bitmaps alike; imports PICS animations and QuickTime movies; supports sound and interactivity within animations. Windows version unavailable at this writing.




For More Information on Web Animation

Netscape tutorial on GIF animation -- A nice overview.

Royal Frazier's GIF animation site -- One of the most popular and detailed GIF animation resources.

Yahoo's index of web animation topics

And speaking of animation, Doc..

 


Top of Page

HotMedia for August 1996: Server-Friendly Image Maps

My August 1996 "Media" column described the techniques and tools behind client-side image maps -- a form of Web site image map that is faster and more flexible than the traditional server-side maps covered in my July 1996 column (also available here in the HotMedia archives).

This month's HotMedia includes links to the freeware and shareware map-making tools I describe as well as to additional client-side image-map information that appears elsewhere on the Web.

The August 1996 installment of "Media" is available on Macworld Online. After you've read the column, you can use your browser's Back button or Go menu to return to this page. (Tip: Because my column relies heavily on graphics and how-to illustrations -- none of which are available on Macworld Online -- you'll get more out of it by reading the print edition of Macworld.)

And if you're designing your first image maps, don't forget to read my May 1996 column on graphics optimizing and my June column on creating buttons and other interactive hotspots. You can get to both columns and their HotMedia companions through the HotMedia archives.


Tools for Converting Server-Side Tags into Client-Side Tags

Two free, AppleScript-based programs convert server-side map-definition files into client-side tags. You can download them both right here.

Jeff Barnum's MapConvert (39K)

Andreas Heissenberger's ClientMap Converter (30K)

Tools for Creating Client-Side Image Maps

The University of Iowa's Arachnid -- This freeware HTML page-creation program supports both server- and client-side maps. You can download Arachnid from Heidsite. (Warning: It's a big download -- 2660K).
BeyondPress -- This impressive package turns QuarkXPress into a Web-page editor, and it supports both client-side and server-side image maps. You can download an evaluation version from Astrobyte's Web site.

For More Information on Client-Side Image Maps

The Original Client-Side Specification -- The original proposal from Spyglass, Inc.

Client-Side Image Map Tutorial -- This tutorial also covers the so-called HTML 3.0 client-side image map, a client-side scheme that hasn't taken off. (My column focuses on the so-called Spyglass-style client-side maps.)


Top of Page


HotMedia for July 1996: Making Web Site Image Maps

My July 1996 "Media" column described the techniques and tools behind server-side image maps -- those clickable graphics that are commonly used for Web site navigation. (Note: My August 1996 column focused on client-side image maps, which are faster and more flexible.)

This month's HotMedia includes links to the freeware and shareware map-making tools I describe as well as to additional image-map information that appears elsewhere on the Web.

The July 1996 installment of "Media" is available on Macworld Online. After you've read the column, you can use your browser's Back button or Go menu to return to this page. (Tip: Because my column relies heavily on graphics and how-to illustrations -- none of which are available on Macworld Online -- you'll get more out of it by reading the print edition of Macworld.)

And if you're designing your first image maps, don't forget to read my May 1996 column on graphics optimizing and my June column on creating buttons and other interactive hotspots. You can get to both columns and their HotMedia companions through the HotMedia archives.


Tools for Making Image Maps

Adobe PageMill ($149; 408/961-3769, http://www.adobe.com), a terrific Web tool, makes short work of mapmaking. You draw a shape around the part of the image that should be hot, then type a target URL into the text-entry area of the window. You can also drag and drop page and anchor icons from other PageMill documents to copy their URLs. SiteMill, PageMill's senior sibling, has identical mapmaking features.

Fractal Design Painter 4 ($549; 408/688-8800) is another choice. This bitmapped-graphics powerhouse can associate URLs with floating selections.

Several shareware or freeware mapmaking programs are also available. The best of the bunch is WebMap, by Rowland Smith, which lets you create hot spots for an existing GIF or PICT file. Version 1.0.1 is a $20 shareware program; you can also download a beta release of version 2.0, which will be a $25 commercial program when released.

Image Map CGIs

Two excellent map-processing CGI applications are available for Mac-based Web servers (ones running Quarterdeck/StarNine's WebStar, or MacHTTP). MapServe, a $20 shareware CGI by Kelly Campbell, is fast and runs native on Power Macs.

Web gurus say Lutz Weimann's Mac-ImageMap CGI is a bit slower than MapServe. But it's free.

For More Information on Image Maps

Sun Microsystems on Image Maps -- Solid advice from Sun's superb Guide to Web Style.

A Netscape technote on image maps -- A bit dry and not specific to the Mac, but worth reading.

So you want an image map, huh? -- A spry little tutorial written by Joe Burns.

Image Map Help Page -- An Internet service provider's tutorial.

Yahoo's index to image map topics


Top of Page


HotMedia for June 1996: Screen Layout Secrets

My June 1996 "Media" column provided advice and tips for creating screens for CD-ROMs and the Web.

This month's HotMedia includes links to additional information that appears elsewhere on the Web.

The June 1996 installment of "Media" is available on Macworld Online. After you've read the column, use your browser's Back button or Go menu to return to Heidsite.

And if you're designing graphics for the Web, don't forget to read my May 1996 column on graphics optimizing. You can get to it and its HotMedia companion through the HotMedia archives.


Companies and Products Mentioned in the Column

Adobe Systems -- You've heard of them.

Specular International -- And them, too. The Collage program is an appealing tool for screen layout tasks, while TextureScape is useful for creating background textures.

Alien Skin Software -- Makers of The Black Box, a Photoshop filter collection for creating drop shadows and many special effects.

Jawai Interactive -- Makers of the commercial product Screen Caffeine Pro, many free samples from which are available from this site.


Web Page Backgrounds

Background FAQ -- Questions and answers on creating backgrounds for Web pages.

Background Images -- Lots of attractive backgrounds. Don't go overboard -- remember to keep your text readable!

Chris's Crappy Backgrounds -- Don't let the name fool you. There are some nice ones here.

Kaleidescape -- Wow! A huge collection of nicely done background images, nicely organized with a classy interface.

Internet Background Archive -- Over 1300 backgrounds, nicely presented and cataloged.

Yahoo's Listing of Background-Related Sites -- More background-related sites than should be allowed to exist.

Buttons and Icons

Jawai Interactive -- Makers of the commercial product Screen Caffeine Pro, many free samples from which are available from this site.

Jim's Cool Icons -- No, not mine, but Jim Evins's. They live up to their billing.

Bullets, Cubes, and Bars -- The name says it all. Not a glitzy site, but some nice graphics.

Yahoo's Listing of Button- and Icon-Related Sites -- So many you'd think there was money in these things.


Top of Page

HotMedia for May 1996:
Optimizing Graphics for CD-ROMs and the Web

My May 1996 "Media" column provided background and advice for optimizing graphics for CD-ROMs and Web sites.

This month's HotMedia includes on-screen versions of the sample images that appeared in the column, and links to additional information that appears elsewhere on the Web.

The May 1996 installment of "Media" is available on Macworld Online. After you've read the column, use your browser's Back button or Go menu to return to Heidsite, where you can view sample image files and branch out to other related sites.

Sample Images

Because of the printing process, the sample images that appear in my column don't accurately illustrate how the graphics will look on-screen. You can view the sample images here. Note: The graphic on this link is roughly 100K in size and make take a minute or so to appear if you have a slow modem connection.


Related Sites


The Bandwidth Conservation Society
-- Great tips on making small graphics.

BoxTop Software -- Makers of PhotoGIF and ProJPEG plug-ins for Adobe Photoshop

Gamma issues to consider when creating cross-platform graphics -- Images created on Macs can look too dark when views on Windows computers. Here are some solutions.

Frequently asked questions about JPEG -- All you could want to know about the JPEG file format.

Details on the progressive JPEG format -- Including Photoshop plug-ins that you can use to create progressive JPEGs.

Details on the Portable Network Graphics (PNG) format -- Portable Network Graphics, or PNG (pronounced ping), supports 24-bit images as well as an impressive interlacing scheme. Unlike JPEG, which sacrifices image quality, PNG provides lossless compression.

Download Adobe's GIF89a plug-in module for Photoshop (a 784K download) -- This plug-in is part of the Photoshop 3.0.5 update package.


Top of Page

April 1996: Sounding Good

My April 1996 "Media" column provided background and advice for optimizing multimedia audio, and features tips on producing sound for CD-ROMs and Web sites.

The April 1996 HotMedia includes an expanded version of a sidebar that appeared in the column, example audio files that illustrate the concepts discussed in the column, and links to additional information that appears here on Heidsite as well as elsewhere on the Web.

The April 1996 installment of "Media" is available on Macworld Online. After you've read the column, use your browser's Back button or Go menu to return to Heidsite, where you can download demo software and example audio files, and branch out to other audio-related sites.)


A Field Guide to Formats


The following text is an expanded version of the sidebar that appears in my April 1996 column. As is often the case, the text had to be cut in order to fit our page limitations. Of course, there are no page-length limits here on the ol' Web, so here's the sidebar in its original form. It contains quite a bit more detail than what appeared in the magazine.

In what form should you deliver audio? The answer depends on the medium and the message.

CD-ROM For music, a 22.05KHz sampling rate delivers reasonable fidelity. (Note that's 22,050, not 22,255. The former is exactly half of the CD-quality 44.1KHz rate, and the latter rate isn't supported by many Windows sound cards.) For voice, an 11.025KHz sampling rate may be acceptable. Do some tests and let your ears decide -- and let your eyes help, since lower audio rates allow for better video.

As for bit depth, 16 bit sounds much cleaner than 8 bit, but you will have to license and distribute Apple's Sound Manager 3.1 with your title -- most older Macs use an older Sound Manager that doesn't support 16-bit audio. Note that uncompressed 16-bit audio requires twice the storage space as uncompressed 8-bit sound.

As for compression, Sound Manager 3.1 and QuickTime 2.1 support the Interactive Multimedia Association's IMA 4:1 compression scheme, which delivers remarkably good fidelity and compact file sizes. At this writing, however, QuickTime for Windows doesn't support IMA. Moreover, decompressing IMA audio at playback time requires a relatively fast processor. A title whose QuickTime movies use IMA compression may not play well on slower, 68040-based Macs.

The Web One of the most common sound formats on the Web is the AU, also called Sun audio, format. Used with QuickTime 2.1, Apple's Movie Player 2.1 can create AU files. So can Macromedia's SoundEdit 16 2.0, which is scheduled to ship in early 1996.

Many sites serve up AU audio files as 8KHz, 16-bit files encoded using the µLaw (pronounced mew-law) compression scheme. Movie Player 2.1 can also export µLaw-format audio, although if you want a sampling rate lower than 11.025, you must manually type it in the Sound Export Options dialog box's Rate text box.

The Audio Interchange File Format (AIFF) is another popular format for Web audio files. All audio utilities and QuickTime movie editors can import and export AIFF files.

To play AU or AIFF files immediately after downloading them, your site's visitors will need to configure their Web browser to launch an audio helper application such as Norman Franke's freeware SoundApp.

Several companies have created technologies that deliver real-time audio over the Web: instead of waiting a few minutes while an audio file downloads, you begin hearing the audio almost immediately as the rest of the file downloads. The best known of these streaming technologies is Progressive Networks's RealAudio (http://www.realaudio.com); it's what we use for Macworld Online's Radio Macworld (http://www.macworld.com/tccafe). RealAudio 1.0 used an 8KHz format that was anything but high fidelity; RealAudio 2.0 provides significantly better quality. But to hear the higher quality, surfers must have a 28.8Kbps or faster connection.

Two newer audio streaming technologies rely on MPEG, the compression scheme most commonly associated with digital video. These include StreamWorks from Xing Technology (http://www.xingtech.com) and MPEG/CDE from Kauai Media (http://www.electriciti.com/kauai).

Because Web surfers might have anything from a 14.4Kbps modem to a 10Mbps cable modem, consider providing each audio file in a compact, low-fidelity form and in a larger, high-fidelity form. This means more work for you and requires more storage on your server, but it will allow visitors to choose the format that best suits their connection speed. []



Example File Downloads

I've put together four sample files illustrating different sampling rates, bit depths, and audio processing techniques. These files are audio-only QuickTime movies, so you can play them with an QuickTime movie player application. These files contain 10 seconds of voice narration; I encourage you to download all four -- the differences are pretty dramatic. If your modem connection just doesn't make the 44KHz download practical, at least consider the remaining three.

44KHz, 16-bit Original (661K) -- Notice the nice high-end -- siblant sounds (such as the "s") are crisp.

22KHz, 8-bit, no processing (82K) -- Here, you'll notice an annoying hiss that seems to "pump" along with the audio. Sad to say, I've heard this ugly artifact in many otherwise top-notch CD-ROMs.

22KHz, 8-bit, processed with Waves L1 Ultramaximizer (158K) -- As I state in the column, L1 is an outstanding tool for processing audio. Notice the significant increase in overall volume, and the lack of that annoying, pumping hiss. You can download a demo version of L1 to try out on your own audio; see the Related Sites section, below. Important: You may want to turn your speaker volume down before playing this one. It's dramatically louder than the unprocessed version above.

22KHz, IMA compressed (95K) -- This one is not only the smallest of the four (when unstuffed), it also sounds quite good. IMA compression is a real boon to multimedia audio, although slower computers may have trouble playing back IMA files.


Related Information

How Sound Sampling Works - Understanding sampling rates and resolution. An excerpt from my Macworld New Complete Mac Handbook, 4th edition.

The Formats of Sound - Descriptions of the most common file formats in the personal computer world. An excerpt from my Macworld New Complete Mac Handbook, 4th edition. (For a technical look at sound formats, see the Audio Formats FAQ page.)

The Mac Recording Studio - Comparisons of Mac audio tools, from $99 to over $10,000. A feature I wrote for the December 1995 issue of Macworld.

rec.audio FAQs - Tons of audio-related information from the rec.audio Usenet group.

AV Mac Audio FAQ - Useful information on the audio capabilities of Apple's AV Macs, with links to various sound utilities.

Also see the Heidsite Audio Info page for more.


Related Sites

Waves - Makers of what I believe are the finest, most sonically useful audio-processing plug-ins available. You can download demo versions from the Waves site. (For more details on some Waves plug-ins, see my December 1995 Macworld feature on digital audio.)

Xing Technology -- Makers of the StreamWorks streaming audio technology.

Kauai Media -- Makes of the MPEG/CDE streaming audio technology.

Also see the Heidsite Audio Sites page for links to more audio sites.


Top of Page

March 1996: Cinepak Secrets

My March 1996 "Media" column explored the black art of video compression, with an emphasis on Cinepak, the QuickTime compressor/decompressor most often used to prepare movies for CD-ROM distribution.

The March 1996 installment of "Media" is available on Macworld Online. (To return to Heidsite after you've read the column, use your browser's Back button or Go menu.)

Related Information

QuickTime Technicalities - Understanding frame rates and movie sizes, a look at factors that influence QuickTime's performance, and an introduction to how QuickTime compression works. Excerpted from my Macworld New Complete Mac Handbook, 4th edition.

Apple technical backgrounder on compression -- Contains good details on various codecs and on compression in general.

Related Sites

Terran Interactive - Makers of a fine compression utility called Movie Cleaner Pro. Their site contains some good tips for QuickTime compression. (See the Utilities and Example Files section below to download a shareware version of Movie Cleaner.)

Digital Video List Servers -- I found this extensive list on Radius's Web site. There's also Radius's digital video page -- as you might expect, it focuses on Radius products, but there's plenty of solid information here regardless of the video hardware you use.

Guy Mullin's Desktop Video Home Page -- A very informative site containing details on every aspect of digital video production, from storyboarding to lighting to non-linear editing.

Utilities and Example Files

Movie Analyzer 1.0.2 (66K) -- Think of this funky Apple utility as the ResEdit of movies. Movie Analyzer lets you open movies and analyze their data-rate characteristics, examine keyframes, determine compression and audio settings, and more. Adobe Premiere 4.2 does much of this, and with a cleaner interface. But Movie Analyzer still has its place.

MovieShop 1.2.1 (180K) -- For years, CD-ROM producers relied on this also-funky Apple utility to prepare their movies for CD-ROM distribution. Happily, Premiere 4.2 and Terran's Movie Cleaner Pro make struggling with MovieShop's ugly user interface largely unnecessary. But it's still a cool program, and it's still free.

Movie Cleaner Lite (460K) -- A shareware version of Terran Interactive's excellent Movie Cleaner Pro compression utility. Well worth the download.
Cinepak Do's and Don'ts Sample Images (214K) -- These are 24-bit, full-size (320 by 240 pixel) versions of the images that appear in my March column (page 151 of the March 1996 Macworld).

Here's how to use these images:

1. Download the self-extracting archive containing the images.
2. Use StuffIt to decode and decompress the archive.
3. Open the the images. They're PICT files, so you can use just about anything, including SimpleText, to view them.
4. Read the caption on page 151 of the March Macworld. Note the excessive pixelation in the "Bad Cinepak" image -- the result of a busy background and dim lightling.

(FYI: Why did I post these as downloadable PICT images instead of making them viewable as in-line graphics? Because I wanted you to see the images exactly as they would appear on a CD-ROM title. I didn't want to reduce their bit depth and size or convert them to GIF or JPEG format, either of which would have altered their appearance.)


Top of Page

February 1996: Gearing Up for Multimedia

This was the premiere installment of the "Media" column, and it established the groundwork for future columns. The column is available on Macworld Online. After reading it, you can use your browser's Go menu or Back button to return to Heidsite.


Back to this month's HotMedia
Heidsite Home | General Mac Info | Digital Video | Digital Audio
New Complete Mac Handbook | About Heidsite