Introduction to Learning Interactions Tutorial > Modify a Hot Spot interaction > Add a hot spot image

 

Add a hot spot image

Users click hot spot areas that overlay an image. You'll add that image now.

1

On the Stage, select the instance of Image_Area: the rectangular border that surrounds the hot spot areas. Refer to the Property inspector to verify that you've selected the correct instance, and press Backspace or Delete.

2

With Frame 7 of the Interactions layer selected, drag Camera_top.png from the images folder in the LearningAssets.fla library, placing it in the approximate center of the Stage.

In the Property inspector, you can specify the x and y coordinates for the image that the finished file uses: x = -5.5 and y = 70.8.

3

On the Interactions layer, the image covers the hot spot areas. To change the stacking order of objects on the layer so that the hot spot areas cover the image instead, verify that Camera_top.png is still selected, and choose Modify > Arrange > Send to Back.

The hot spot areas now appear over the camera image.

4

On the Stage, use the Pointer tool to drag the instance of HS_Area6 to cover the film advance lever.

5

With the Pointer tool, continue to select and place hot spot areas over the camera, as follows:

Place the instance of HS_Area3 so that it covers the shutter release.

Note: It does not matter that the Hot Spot area is larger than the shutter release. The size of the Hot Spot areas will change when you add images to the Hot Spot symbols.

Place the instance of HS_Area5 so that it covers the shutter speed selector.

Place the instance of HS_Area2 so that it covers the lens.

Place the instance of HS_Area4 so that it covers the aperture.

Place the instance of HS_Area1 so that it covers the film rewinder.