tip: invisible button

Sometimes you want to make a clickable area on top of an image, but you do not want a button graphic. The way to do this is by creating an "invisible" button.

Step 1: Have your image positioned on the Stage, and create a new layer to hold the button. In this example, we will make a button out of the woman walking in the photo shown below.

Step 1 illus.

Step 2: Select the Brush tool and a bright contrasting color. Then paint to cover the area you want to behave as a button, or "hot" area.

Step 2 illus.

Step 3: After covering the entire area with the Paint color, click once to select it.

Step 3 illus.

Step 4: Open the Modify menu and select Convert to Symbol.

Step 4 illus.

Step 5: Name your symbol, select Button, and click OK.

Step 5 illus.

Step 6: Double-click the button area (the shape you painted on the Stage) to go into Symbol Editing Mode. You will see the distinctive button Timeline (below). Click and hold the frame under the label "Up."

Step 6 illus.

Step 7: Drag the frame horizontally to the label "Hit," and drop it there.

Step 7a illus.

Step 7b illus.

Step 8: Exit from Symbol Editing Mode (Ctrl-E/Win or Cmd-E/Mac). Your button area will look like the pedestrian below -- a transparent blue overlay indicates the area of the button while you are in the FLA. When you save and export the SWF, you will not see the blue area in the final file. But when you roll over the button area, the hand cursor will appear.

Step 8 illus.

Now that you have an invisible button, you can script it to do whatever you like on (rollover) and on (release).

> More tips