Published on: Sunday 3rd October 1999 By: Martin Webb
When the software arrived, it contained one CD-Rom, one 134 page "Using Fireworks" guide, one registration card and a small brochure. It sat on the desk for ages before I eventually got around to looking at it in more detail. Looks can be deceiving. This is an extensive graphics package with HTML capabilities thrown in. Macromedia Fireworks is not a bit image graphic package, but object based. This may take a while getting use to, for those who are not familiar with object based graphics tools.
Object can be layered over one another, manipulated independently or grouped together, and even after saving, using Macromedia Fireworks .png file format can be reloaded and manipulated further.
When first started you are presented with a widget heavy window. See the Screen Shot.
Macromedia Fireworks is a complicated piece of software, that can't possibly be given justice in one superficial tutorial, its many capabilities include:
This tutorial will concentrate on only one of these features...
An image map consists of an image and an image map. The image map defines different hot spots within the image. These hot spots each have a URL associated with them. When the mouse pointer is clicked on one of these hot spots, then the browser loads the associated URL. The hard part is defining the area that each of these hot spots covers - using rectangle, circle and polygon shapes.
The rest of this tutorial will demonstrate how easy this is to do.
I'm not an artist so I'll be using the existing irt.org logo (zoomed to 200%) with Macromedia Fireworks:
The URLs toolbar is located at the top of the main document window:
The four icons from left to right are:
I first selected the rectangle URL Tool and dragged a rectangle hot spot over the letter "i":
The four corners of the hot spot can be selected and adjusted once you've selected the URL Pointer Tool. This allows you to refine the hot spot area.
I then used the Polygon URL Tool and clicked the mouse button around the edges or the letter "r" to create several points, before finally clicking the first point to close the shape:
It was then fairly straight forward to repeat this operation over the remaining letters. Note that it is not possible to use the URL Tools to create an area with a concave shape. If this is required then you' would have to make smaller individual hot spots.
First select one of the hot spots, I selected the letter "i". and then select the arrow icon on the far right of the URL Toolbar. A menu is displayed, showing several different options:
Selecting the "New Link..." menu option opens up the "Link Info" dialogue box.
The Link Info dialogue box allows you to enter the URL to be associated with the selected hot spot, a message text to be displayed in a web browsers status bar, and an optional target (None, _blank, _self, _parent and _top) which refers to the browser window that the URL should be loaded into:
The overlay color allows you to see show the different hot spots in different colors - used in Macromedia Fireworks, but not in the final image. Clicking the Overlay Color opens up a typical Color Picker dialogue box (not shown here).
Clicking OK completes the setting of the currently selected hot spot:
You can then repeat steps 4, 5, 6 and 7 for all of your remaining hot spots:
We need to select the type of image map to be generated (Client-Side or Server-Side). From the URLs toolbar Options pop-up, select the Image Map Options... menu item:
This then opens up the Image Map Options dialogue box:
The final result of my work is shown below:
There is one small bugget with the code generated, and that is the small hypertext space visible to the right of the image in some browsers. This is caused by the way the image link is wrapped with anchor tags over three lines. The code Macromedia Fireworks produces is shown below:
<a href="path_to_map_file/irt.map"> <img src="irt.gif" width="170" height="66" usemap="#irt" ismap alt="This is the irt.org logo" border="0" > </a>
whereas, to avoid this unsightly hypertext link, the code should be produced as:
<a href="path_to_map_file/irt.map"><img src="irt.gif" width="170" height="66" usemap="#irt" ismap alt="This is the irt.org logo" border="0" ></a>
This then avoids the browser including an empty space between the image and the closing anchor tag.
Three files can be generated depending on the options chosen from the Image Map Options dialogue box, the .gif image, shown above, the .htm file:
and an optional .map file:
# This map file needs to be placed on a server in a directory with a CGI # Application capable of interpreting the Image Map information. If you # are unsure about this, contact your web site administrator. poly http://www.irt.org/games/ 133,5 127,10 123,18 123,28 125,52 132,58 141,60 152,59 160,51 161,40 161,5 poly http://www.irt.org/ 76,4 67,11 63,19 62,31 62,43 68,53 75,59 85,61 95,54 100,43 101,26 96,12 90,6 85,4 poly http://www.irt.org/beta/ 54,4 44,11 43,18 40,18 39,27 44,28 44,54 50,59 58,59 61,58 62,50 54,50 55,27 61,27 61,19 54,19 poly http://www.irt.org/articles/ 19,4 19,44 30,43 30,24 32,15 41,15 45,6 38,3 rect http://www.irt.org/about/ 6,4 17,60 # This Image Map was created with Macromedia Fireworks 1.0 # http://www.macromedia.com
Macromedia Fireworks, is a complicated piece of software. It is a graphics package that enables the easy creation of graphics suitable for the web. It can ease the creation of Image Maps, Image Rollovers and Spliced Images - things which novice web authors find difficult to get to grips with. It is not as sophisticated as Macormedia Dreamweaver, but then it is primarily a Graphics package.
We have only touched the surface on the capabilites of what Macromedia Fireworks can offer, but I hope you can see that it is an extremely professional and capable piece of software.
The Using Fireworks guide included with the CD-ROM is extremly well laid out, with many, mny examples of how to generated images, sitll or animated, concentrating on creating images for a web page. Many of the images are included on the CD-ROM, which will enable you to quickly get up to speed with the tutorials.