Creating an Invisible Button

Creating an Invisible Button

Flash CS4 Tutorial


How to Create an Invisible Button to Use with Flash ActionScript



Invisible buttons are often used to create hidden hot spots in your swf file.

The trick to creating an invisible button lies in the fact that buttons have four keyframes, Up, Over, Down and Hit. The first three frames contain visible content, the Hit state is invisible. It is used to define the button's hit area.


Step One

Open a new document and add a rectangle to the stage with the Rectangle tool (r key).

Step Two

Select the rectangle and press F8 to convert it to a Button Symbol.

Step Three

Double-click button to access the button edit mode. Once you are in the edit mode, the button's timeline appears.

Step Four

Click the keyframe for the Up state and choose Edit > Cut (Cmd/x (PC - Ctrl/x)).

Step Five

Press F6 three times to add empty keyframes to each of the button states.

Step Six

Click the Hit keyframe and paste your rectangle in place, Edit > Paste in Place (Shift/Cmd/v (PC - Shift/Ctrl/v)).

Step Seven

Click the Scene 1 icon to return to the main stage. Notice that your invisible button displays as an aqua color.

Step Eight

To simulate the button, choose Control > Enable Simple Buttons. The curser changes whenever it passes over the rectangle.

Making the Button Do Something

Once you create your invisible button, it is necessary to add ActionScript to the button to make it functional.

For general information on adding ActionScript to a button, see topic, Go to a Specific Frame on Main Timeline.


Stock Images