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.

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:

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:

stop();

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.