Jump to Main Content

Creating a Flash-driven hit area map

Create the selected buildings – hot spots

Remember, when a visitor moves their cursor over a selected building button, the selected building on the map will highlight to a different color. In order to do this, we need to slice (cut) out only the selected building from the original map. Since each of our selected buildings is sliced in the same way, we’ll use the Graff building as our template. Follow these steps:

  • Using TourMap3_revised.png
  • Select the magic wand tool from the tools menu:

Magic Wand Tool

  • Select the Graff building, as a result, a dotted outline appears:

Graff slice

  • Right click the building, and Edit>New Bitmap Via Copy:

New bitmap via copy

  • In the library, two bitmap images will be present in the layers panel, select the top:

Graff building layer

In the above illustration, you will notice eye icons. Left click the eye icon to deselect the original map

  • Near the top of the image window, select preview:

Preview mode - Fireworks

  • In the optimize panel, select GIF:

Graff building gif

  • Select Index Transparency:

Gif Index Transparency

  • Switch to original mode
  • In the properties panel, locate filters:

Filters - Fireworks

  • Select the plus sign>Shadow and Glow>Glow
  • Enter values as depicted:
  1. Width:3
  2. Color: #CC9900
  3. Softness: 3

Filter affects window

Deselect the Graff building slice by left clicking the eye icon in the layers panel and select the original map.

Export the Graff building

In order to use the selected Graff building, we need to export the graphic. Follow these steps:

  • Ensure you select only the Graff building from the layers panel
  • From the main menu, select File>Export, and in the window:
  • Type TourMap3_graff.gif
  • Select your desired folder and then select OK

Repeat these steps for the remaining buildings:

  • Lincoln

Lincoln building

  • Technical Education Center

Technical Education building

  • Industrial Transportation and Technology Center

Industrial Transportation & Technology Center

Once completed, save your file and close Fireworks.

We'll continue by creating the Flash movie next.

top of page