Creating a Flash-driven hit area map
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:
stop();
Save your file and use hitareas_fade.fla as a comparison.
We'll continue by creating the hit areas for our selected buildings next.