Ryan Butler

Ryan currently works as a Web Developer/Programmer. His skill sets include HTML, CSS, Flash, JavaScript, ASP, ASP.NET, PHP and database technologies. He is also founder of Midwest Web Design.

View all articles by Ryan Butler

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: 
stop();

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: 
graffBtn.onRollOver=function(){ graffmc.gotoAndStop("show"); } lincolnBtn.onRollOver=function(){ lincolnmc.gotoAndStop("show"); } tecBtn.onRollOver=function(){ tecmc.gotoAndStop("show"); } ittcBtn.onRollOver=function(){ ittcmc.gotoAndStop("show"); }

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: 
stop();

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: 
function turnoff(){ graffmc.gotoAndStop("hide"); lincolnmc.gotoAndStop("hide"); ittcmc.gotoAndStop("hide"); tecmc.gotoAndStop("hide"); }

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:

graffBtn.onRollOver=function(){ turnoff(); graffmc.gotoAndStop("show"); }

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