Introduction to Learning Interactions Tutorial > Modify a Hot Spot interaction > Add an image within a hot spot area |
![]() ![]() ![]() |
Add an image within a hot spot area
When the user clicks a hot spot area, visual feedback should let the user know that the clicked area is selected. You'll provide that feedback by adding "glow" images that initially have an alpha transparency of 0, as specified in the component parameters, but become opaque in the movie upon a mouse click. To add the images, you delete and replace the images within each hot spot movie clip.
1 |
On the Stage, double-click HS_Area1. In symbol-editing mode, use the Pointer tool to select the graphics by dragging from above the upper left corner to below the lower right corner of the group, selecting all graphics in the movie clip. Press Backspace or Delete. |
2 |
From the Images folder in the LearningAssets.fla library, drag rewind_glow.png and place it within HS_Area1 so that the "glow" outlines the film rewinder. |
Note: The bounding box reflects the new hot spot area. |
|
3 |
Click Scene 1, above the Stage. |
4 |
On the Stage, double-click HS_Area2. In symbol-editing mode, use the Pointer tool to drag around the hot spot graphics, selecting all the graphics as you did in step 1. Then press Backspace or Delete. |
5 |
From the Images folder in the LearningAssets.fla library, drag lens_glow.png and place it within HS_Area2 so that the "glow" outlines the lens. Then click Scene 1, above the Stage. |
6 |
Repeat steps 4 and 5 to open a hot spot in symbol-editing mode, delete the existing group of graphics, then drag and position the corresponding glow image from the Images folder in the LearningAssets.fla library, as follows (remember to click Scene 1 when you've finished with a hot spot): |
![]() |
For HS_Area3, use Shutter_glow.png. Place the glow image around the shutter release button. |
![]() |
For HS_Area4, use Aperture_glow.png. Place the glow image around the aperture. |
![]() |
For HS_Area5, use Shutter_speed_glow.png. Place the glow image around the shutter speed selector. |
![]() |
For HS_Area6, use Advance_glow.png. Place the glow image around the film advance lever. |
![]() ![]() ![]() |