Web designers with a print design background will be familiar with Freehand (or perhaps Adobe Illustrator, which is similar--Illustrator files can be opened in Freehand, and vice versa), which is why Shockwave for Freehand could prove so useful. We know all the great things illustration programs can do--and we're also quite familiar with the limitations of bringing those feats of wonder to the Web. Up to now, if we wanted to include a Freehand illustration in a Web page, we've had to paste or import it into Photoshop, index the colors, and save it as a GIF image.
Now it's (theoretically) possible to display Freehand images directly in an HTML page. Unfortunately, it can require a favorable alignment of the planets (or at least browsers, plug-ins, and server configurations) to actually accomplish the task. And, even more unfortunately, you as designer have control over at most two of the three variables. Here's how it works:
First, download the Shockwave for Freehand Plug-In from the Macromedia Web site. Normally I would say this is the last step for a developer, but since at the moment you are playing the role of user--and you won't be able to see the examples without the plug-in--I encourage you to get it now.
Next, ask your System Administrator to add the following line to the
mime.types file in the configuration area of the Web server:
images/x-freehand .fh4 .fh5 .fhc
What this line does is tells the server how to interpret the Freehand files
you put there (if you didn't have this line, the server would assume that a
document with a .fh4, .fh5, or .fhc extension was a text file). A similar
line can be added to the server's config file instead of the
mime.types file, but the name of the config file and the
syntax of the line will vary depending on your server software.
Finally, download Shockwave for Freehand from the Macromedia site, and follow the instructions for installing the Xtras files so that your Freehand application has access to them. When you've installed the Xtras, open Freehand. The URLs Xtra will be in the Window menu under "Other," and the Afterburner Xtra will be in the Xtras menu. *If you don't see Afterburner in the Xtras menu,* it's because there is a bug in Freehand 5.0 and 5.0.1. Here's how to fix it: Quit Freehand. If you are using 5.0, you first have to update your application to version 5.0.1 before you can get to the update (5.0.2) that will actually fix the Xtra problem. Once you have 5.0.1, you can download and install the 5.0.2 update. When you're finished updating, open Freehand again. Afterburner should now be in the Xtras menu.
The next step is to create a Freehand file (or open an existing one). One of the many things to keep in mind when creating Freehand files for the Web: You'll either need to use fonts that will be on everyone's systems (i.e., Courier and Times), or you'll have to convert all your text to paths (which makes the file size considerably larger). This means that if you want to get creative with fonts, Photoshop may be the better program to use.
Once you've got a Freehand file you like, it's time to bring it to the Web. The first step is to crop the pasteboard (page) size to the size of your image. Group your objects and move them to the bottom left-hand corner of the pasteboard. Next, use the Inspector window to determine the dimensions of your objects as a group (click on the shapes button to see this info), then change the dimensions of the pasteboard to the dimensions of the grouped objects (see Fig. 1).
Fig. 1: Changing the dimensions of the pasteboard to match the dimensions of your image.
The second step is to save the file. There are two ways to save your file so that it will be readable by the server: (1) as a regular Freehand file with the .fh5 file extension, or (2) as a compressed (and therefore smaller) Freehand file with the .fhc file extension. The latter is accomplished with the Afterburner Xtra. Just choose Afterburner --> Compress Document... from the Xtras menu, and a dialog box will come up asking you to name the file (the .fhc extension will already be there). If you check the Locked option, no one (including you) will be able to open your Shocked file in Freehand again. This might be desireable if you don't want people stealing or altering the paths it took you hours to compose, but make sure you keep a copy of the original file so you can make changes if necessary. [To open an unlocked, Afterburner-compressed file in Freehand, you'll need to select Afterburner --> Decompress Document... from the Xtras menu.]
As with Shockwave for Director files, including a Shockwave for Freehand
file requires an <EMBED> tag as shown in Fig. 2.
Fig. 2: A Freehand file embedded in a Web page with
<a><embed src="/devforum/design/96/0718-flower.fhc" height=244
width=234></a>
I'm not sure why the <A></A> tags are required, but they are.
One of the greatest advantages that Shockwave for Freehand files have over ordinary GIFs is that they are zoomable--to more than 25,000% of the image's original size. Kind of boggles the mind, doesn't it? Unfortunately, this doesn't mean that you'll be able to zoom in so close on a photograph of a pin that you can count the angels on its head. Freehand files can include photographs saved in TIFF format, but as you zoom in the TIFFs become more and more pixellated. It does mean that if you painstakingly drew a crowd of tiny angels on the head of a pin, zooming in would reveal them.
But how will users know that they can zoom in to see the angels? The programmers at Macromedia were kind enough to give us a bar with magnification tools on it. It will appear automatically if we add 20 pixels to the height in the <EMBED> tag and specify whether we want it to appear at the top or the bottom of the image.
Fig. 3: Toolbar added to the Freehand file with the height increased by 20 pixels and toolbar=top specified in the <EMBED> tag.
The + magnifier zooms in, the - magnifier zooms out, and the hand tool lets users move the image around. Clicking on the Shockwave logo brings the image back to its original state.
A final thought before I close for this week. While the ability to include Freehand images with panning and zooming features in your HTML documents is great, remember that for your viewers to see these images they'll have to have Netscape 2.0 or greater (Macromedia will make its Shockwave plug-ins available for Internet Explorer soon) and the Shockwave for Freehand Plug-In. That may be too much to count on at this point, but there's always the "you must have Netscape 2.0 and all the Shockwave Plug-Ins" admonishment. I personally don't like resorting to it, but if including a Freehand image on my site is really necessary (and it may be as we start making floorplans for the Internet World trade shows available on the Events server), resort to it I will.
Past installments of Design Diary * * * Suggestions for future columns
