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.

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:

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

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

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

• 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:

• In the optimize panel, select GIF:

• Select Index Transparency:

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

• Select the plus sign>Shadow and Glow>Glow
• Enter values as depicted:

1. Width: 3
2. Color: #CC9900
3. Softness: 3

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

• Technical Education Center

• Industrial Transportation and Technology Center

Once completed, save your file and close Fireworks.

We'll continue with creating the Flash movie next.

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:

1. Leave Flash document selected
2. Left click OK

In the properties window, left click the size button:

Change height to 460.

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:

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:

• Select frame one
• From the library, drag background.jpg on the stage
• Position the image at the following coordinates:

• X: -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:

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:

• 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 Graffand 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:

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

• 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:

Create fade sequence - images

When the movie loads, we want the buttons and images to fade in smoothly until frame ten. Since we have converted our original bitmaps to graphic symbols, and we have our button symbols completed, this process is streamlined by the following steps:

For the left background layer:

• Unlock the layer
• Select frame ten
• Right click and select Insert Key Frame
• In the properties panel, select none as color

For frame one

• Select frame one
• In the properties panel, select Alpha as color
• Lock the layer

For the map layer:

• Unlock the layer
• Select frame ten
• Right click and select Insert Key Frame
• In the properties panel, select none as color
• Lock the layer

For frame one

• Select frame one
• In the properties panel, select Alpha as color

To complete the fade for the images, we'll use the left background image as our example:

Between frames one through ten, right click and select Create Motion Tween:

Create fade sequence – buttons

Since the fade sequence is the same for all buttons, we’ll use Graff as our example by following these steps:

• Ensure you are on the graffbutton layer
• Select frame ten
• Right click and select Insert Key Frame

For frame ten:

• In the properties panel, leave none as color

For frame one:

• In the properties panel, leave Alpha as color

Adding a stop

Currently, when the movie loads, it will play until frame ten and loop continuously. To fix this, we add a stop command on frame ten in the stops layer by following these steps:

Ensure you are on the stops layer:

 

• Select frame ten
• Right click and select Insert Key Frame
• Press F9 to open the actions panel and type the following:

[as]stop();[/as]  

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

Creating the hit areas – selected building

When the movie loads, it will play until frame ten. At this time, if a visitor moves their cursor over one of the buttons in the left side bar, the selected building will highlight. Since the process for each selected building highlight is the same, we'll use the Graff building as our template. Follow these steps:

• From the main menu, select File>Import>Import to Library
• Navigate to the folder where TourMap3_graff.gif is located
• Select OK
• From the main menu, select Insert>New Symbol, and in the window, type graffbuilding and select movie clip
• Rename the layer graffbuilding
• Click the blue background arrow to exit symbol mode:

You will return to the main timeline.

Ensure you are on the graff layer:

• Select frame ten
• Right click and select Insert Key Frame
• From the library, select graffbuilding movie clip and drag on the stage
• Position the movie clip at the following coordinates:

• X: 198.0
• Y: 0.0

You might be wondering if the coordinates are right. Yes, they are; how this works will be explained later in the article.

In the properties panel, locate the Instance text field:

Type graffmc

With the movie clip selected, we need to enter symbol editing by double clicking it. However, you must select frame ten first (1.), and then move the cursor over the movie clip circle icon until the cursor changes to a four-headed arrow (2.):

In the Graff building movie clip, create a hierarchy as follows:

Folders	Layers
ActionScript
	ActionScript
	Stops
	Labels
Building
	graffbuilding

Ensure you are on the graffbuilding layer:

• Select frame two
• Right click and select Insert Key Frame
• From the library, drag the Graff building on the stage
• Position the building at the following coordinates:

Ensure you are on the stops layer

• Select frame one
• Press F9 to open the actions panel and type:

[as]stop();[/as]

Click the blue background arrow to exit symbol mode:

You will return to the main timeline. Repeat these steps for the remaining buildings replacing instance and library names where appropriate.

CAUTION!!

When working with the remaining building movie clips in the main timeline, you will need to lock the previous layer. For example, since we have completed Graff building, you need to lock this layer before proceeding to the Lincoln building. Why? Because you are placing multiple movie clips and the original map in the same x-y coordinates. Without locking layers, it would become impossible to work with the selected movie clips.

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

Functionality

Since we have completed the user interface, let's review briefly the hit area map's intended behavior. When the movie loads, it will play until frame ten and stop. When a visitor moves their cursor over the main menu buttons, the selected building from the map will highlight. So here's how the concept works: when we sliced each building from our map, we created a duplicate of the map, with only the selected building. This means each building will have the same width and height as our original map. Continuing, when we exported each building as a GIF, we enabled transparency. Transparency is a technique which shows an image without a backdrop. By slicing just the building and selecting transparency, we only show the selected building, the rest of the map is hidden.

Inside Flash, we place each transparent building GIF inside a separate movie clip which can be independently controlled. By using a frame label, we will instruct the appropriate movie clip to show (highlight) the selected building on a roll over of a main menu button. Since we positioned the original map and each building in the same coordinates on the stage, when the visitor moves their mouse cursor over a main menu button, the highlighted building shows in the same location on the map.

Showing hit areas – selected buildings

In order to show the selected building when a visitor moves their cursor over a main menu button, we need to first add a frame label, which will be named "show", and then use action script to instruct the selected movie clip to show the building. Since the process for adding a frame label is the same for each building, we'll use Graff as our example. Follow these steps:

• Unlock the graff hit area layer from the main timeline
• Left click frame ten and then move your mouse cursor over the movie clip circle until the cursor turns to a four-headed arrow and double click to enter symbol editing mode
• In the movie clip, make sure you are on the Labels layer
• Right click frame two and select Insert Key Frame
• In the properties panel, locate the frame label text field:

Type show

• Make sure you are on the stops layer
• Right click frame two and select Insert Key Frame
• Press F9 on your keyboard to open the actions panel and type the following:

[as]stop();[/as]

This will prevent the selected building from showing then hiding.

Click the blue background arrow button to exit symbol editing mode:

Repeat this process for each movie clip.

Adding action script

We need to instruct the selected movie clips to play on the roll over of the main menu buttons. From the main timeline, follow these steps:

• Ensure you are on the action script layer
• Right click frame ten and select Insert Key Frame
• Press F9 on your keyboard to open the actions panel and type the following:

[as]graffBtn.onRollOver=function(){ graffmc.gotoAndStop("show"); } lincolnBtn.onRollOver=function(){ lincolnmc.gotoAndStop("show"); } tecBtn.onRollOver=function(){ tecmc.gotoAndStop("show"); } ittcBtn.onRollOver=function(){ ittcmc.gotoAndStop("show"); }[/as]

For each main menu button, we use the onRollOver method, specify the movie clip, and use the gotoAndStop method of the movie clip and instruct the movie clip to play the show sequence. Save your file and use hitareas_show.fla as a comparison.

Hiding the selected building

When previewing the above file, as you roll over each main menu button you will notice the selected building shows, but never hides. The reason is simple, we never instruct the movie clips to hide the selected buildings. First, inside each movie clip, follow these steps:

• Make sure you are on the frame label layer
• Right click frame three and select Insert Key Frame
• In the properties panel, locate the frame label text field

Type hide

• Make sure you are on the appropriate building layer
• Right click frame three and select Insert Blank Key Frame
• Make sure you are on the stops layer
• Right click frame three and select Insert Key Frame
• Press F9 on your keyboard to open the actions panel and type the following:

[as]stop();[/as]

Click the blue backward arrow button to exit symbol editing mode

Repeat these steps for the remaining movie clips.

Adding the hide functionality

We need to instruct the movie clips to hide on a roll over of each main menu button. From the main timeline, follow these steps:

• Make sure you are on the action script layer
• Select frame ten
• Press F9 on your keyboard to open the actions panel and add the following code:

[as]function turnoff(){ graffmc.gotoAndStop("hide"); lincolnmc.gotoAndStop("hide"); ittcmc.gotoAndStop("hide"); tecmc.gotoAndStop("hide"); } [/as]

We create a function, turnoff. Inside the function, we specify the movie clip and using the gotoAndStop method we instruct the movie the clip to play the hide sequence. Continuing, modify each onRollOver method of the main menu buttons as follows:

[as]graffBtn.onRollOver=function(){ turnoff(); graffmc.gotoAndStop("show"); } [/as]

Inside the onRollOver method of each main menu button, we call the function, turnoff. The reason we call the function first is to hide any building which might be showing, then instruct the appropriate movie clip to show the selected building.

Repeat this modification for the remaining main menu buttons. Save your file and preview the results. Your hit area map should be working.

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

How did hiding our selected buildings work?

By inserting a blank key frame in each building movie clip and setting the frame label to hide, when the function, turnoff is called, it instructs our play head to an empty frame. This makes the illusion that our selected building is hidden.

Why did we place our building movie clips on key frame 2 and stop the movie clips initially on key frame 1?

We don't want our building to show until the visitor moves the cursor over the main menu buttons. Without a stop command, when the movie loads, all buildings will show once the play head in the main timeline hits frame ten. Therefore, we place a stop command on key frame one inside each movie clip and move the selected building to frame two.

Organize the library

Since our library at the moment is disorganized, let's move our work into a logical folder scheme. Use the New Folder icon:

Create the following folders and place the corresponding symbols as follows:

• Background Images – background graphic, background.jpg, map graphic symbol
• Building Bitmaps – All original images of the map
• Building Movie Clips – All movie clips associated with buildings
• Main Menu Buttons – All related main menu buttons

Summary

In this article we learned how to use Flash to create a hit area map. We also learned a bit about:

• Create images, slice individual images, and export them in a web ready format
• Slicing individual buildings and applying filter affects
• Import graphics into the Flash library
• Create movie clips to hold our selected building
• Use a variable and a function to show or hide our selected buildings

Take what you learned here and customize your hit area map to your heart's content!

If you have questions, contact me.

http://midwestwebdesign.net/tutorials/contact.aspx