Creating a Flash-driven hit area map

Create the movie file

Inside Flash, create a new file named hitmap.fla by following these steps:

From the main menu, select File>New, and in the following window:

New document - Flash

Leave Flash document selected
Left click OK

Create the following hierarchy:

Folders	Layers
ActionScript
	ActionScript
	Labels
	Stops
Buttons
	graffButton
	lincolnButton
	ittcButton
	tecButton
Hit areas
	Graff
	Lincoln
	ITTC
	TEC
Background images
	Tourmap
	backgroundleft

As you can see, folders are on the left and layers are on the right. Assign colors to your folders and layers as you desire. Make sure you reduce the magnification to 50% through the zoom drop down list:

Zoom drop down list

Creating the layout

Since creating the layout is the easiest, we’ll complete it first. Remember, our layout is created using two images, left background image and on the right, a map. In order to use these two images in our application, we need to import them into the movie’s library. Since both graphics are imported the same way, we’ll use left background as our example. Follow these steps to import the graphic:

From the main menu, select File>Import>Import to Library
In the window that shows, navigate to the directory where background.jpg is stored
Select OK

Repeat this step for map.jpg

You should have two bitmaps in the library.

Positioning the images on the stage

Since the images need to be visible on the stage, we will place the left background first, then the map. Follow these steps:

Ensure you are on the background left layer:

Left background layer

Select frame one
From the library, drag background.jpg on the stage
Position the image at the following coordinates:
- W: -6.0 (note that this is a negative number)
- Y: 0.0
With the image selected, right-click it, and select Convert to Symbol, and in the window, type background and select graphic

For the map, follow these steps ensuring you are on the tour map layer, on frame one and name your map graphic symbol map. Position the map at the following coordinates:

X: 196.0
Y: 0.0

You might find it helpful to lock your bottom two layers at this point as depicted:

Locking layers

Save your file and use hitareas_start.fla as a comparison.

Create left side buttons

When the movie loads, on the left side there will be four buttons, which when hovered over, will show a selected building from our map. Since each of the buttons is the same, we’ll use Graff as our example. Follow these steps to create the button:

Ensure you are on the graffbutton layer:

Graff button layer

Select frame one
Select the text tool button (“A”) from the Tools menu and drag a text field instance on the stage
Make sure the text field is static
In the text field type Graff and use the following properties:
- Font: Arial

Size: 20
Color: Black (#000000)
Text alignment: Left

In case the text field doesn’t expand to accommodate the text, move the cursor to the top right corner and drag to the right until the text fits inside:

Expand text field

Use the pointer tool from the tools menu to mark the desired text:

Selection tool

Then right-click it, select Convert to Symbol, and in the symbols window, type graff and select button
Double click the button inside the library to enter symbol editing mode
Rename the layer graff
Create the other three states for your button; remember the hit state to make your button clickable
- Note: We changed the color of our hover state to: #CC9900
Click the blue background arrow to exit symbol editing mode:

Blue backward arrow