Creating a Flash - driven hit area map

When developing web applications with Flash, there are many interactive options to choose from. One example is a hit area map. In this article, we will create a Flash application which includes the following:

  • On the left side, buttons which indicate selected buildings
  • On the right side, a map with multiple buildings for a geographic point of reference

As a visitor moves their mouse over a button, the selected building on the map highlights to a different color. As a visitor moves their mouse out and over another button, the appropriate building on the map highlights. Completing this application using HTML and JavaScript can be somewhat problematic; however, creating this in Flash is easy. In this article, we'll learn:

  • How to create individual graphic slices per building from one map
  • Export images using Fireworks

We will import our graphics into our Flash application and use action script to make the selected buildings highlight.

If you would like to follow the hit area map step-by-step development, or even try your hand at creating it as you progress through this article, you will find the project files link helpful.

http://midwestwebdesign.net/tutorials/flash/hitareas/hitareas_finished.html

http://midwestwebdesign.net/tutorials/flash/hitareas/hitareas.zip

Create the graphics

A basic knowledge of Fireworks is needed to complete this section. If you're not comfortable with this editor, you may use Photoshop. If you're not comfortable with either, it's recommended you spend a few hours visiting either's help documentation. For our purposes, we'll use Fireworks. Open Fireworks by following these steps:

  • From the main menu, select File>New and enter the settings as shown:

Create left background

The layout is created with two images, a left background image and map. We'll work with left background first, follow these steps to create the gradient:

  • Select the rectangle tool from the Tools menu:

  • Draw a rectangle over the blank canvas
  • In the properties panel, change width and height as follows:
    • W: 200
    • H: 460

    Change x-y coordinates as follows:

    • X: 0
    • Y: 0

    In the properties window, locate the drop down list next to the paint bucket:

    Select Gradient>Linear:

    Left click the paint bucket and change the presets as follows:

    1. White (#FFFFFF)
    2. Gray (#CCCCCC)

    Left click stroke option (1.) and select black (2.):

    In the properties panel, select line-diag 1 (1.) and 10% (2.):

    Save your file as background.png.

    Slice your graphic

    In order to use the background graphic in our Flash application, we need to slice (cut) it as an separate web graphic, in this case a JPEG. Since we are working with only one image, we can follow these steps to slice the left background image:

    • Select the pointer tool from the Tools menu
    • Select the canvas object
    • From the main menu, select Edit>Insert>Rectangular Slice:

    • In the layer panel, you have two objects, the original canvas and the slice
    • Use the pointer tool to select the slice
    • In the properties panel, locate the slice text field:


    Export the graphic

    Since we have sliced our graphic, we need to export the slice as a JPEG and store it in a specified folder on our computer as follows:

    • Select the background slice using the pointer tool
    • In the optimize panel, select JPEG-Better Quality from the drop down list:

    • Right click the background slice on the canvas
    • Select Export Selected Slice
    • Place the background graphic in a folder of your choice

    Save your file and close.

    Editable Fireworks File

    We need to save our background image as a portable network graphic (PNG) in case changes are needed in the future, because this is Fireworks editable and native format. Follow these steps:

    • From the main menu, select File>Save, which prompts this window:

    • Select Save Fireworks PNG
    • Save to a folder of your choice

    The map

    We will use the map provided in the project download since it has correct width, height and optimization settings needed for our purposes. Follow these steps to open the map image inside Fireworks:

    • From the main menu, select File>Open
    • Navigate to the folder where the map (TourMap3_revised.jpg) is located
    • Select OK

    Save editable Fireworks document

    In case modifications are needed to the original JPEG image, we need to save this image as a PNG for Fireworks. Follow these steps:

    • From the main menu, select File>Save
    • Navigate to the folder where the original map resides
    • Name this image, TourMap3_revised.png

    We'll continue with creating the hot spots for each building next.