Button Symbol Basics

Button Symbol Basics

Flash CS3 Tutorial

 

How to Create a Flash Button Symbol

 

 

Button symbols are similar to movie symbols except they only have three states. You can define the button's Up, Over and Down appearance.

 

Step One

Add a rectangular object to the workspace with the Rectangle tool (r key).

Step Two

With the rectangle selected, press F8 to convert it to a Symbol.

Step Three

In the dialog box choose Button for type and name your button.

Step Four

Using the Selection tool (v key), double-click the button to see the button keyframes.

Step Five

Click the Over keyframe and press F6. This copy/pastes the Up contents to the Over keyframe.

Step Six

Click the Down keyframe and press F6. This copy/pastes the Over contents to the Down keyframe.

Step Seven

Click the Hit keyframe and press F6. This copy/pastes the Down contents to the Hit keyframe. The hit contents determines the active or "hot" area for the button.

Step Eight

Click on the Over keyframe to change the appearance of the button in the over state.

Step Nine

Click on the Down keyframe to change the appearance of the button in the down state.

Step Ten

Click the Scene icon to return to the main stage.

Step Eleven

To test the appearance of the button, choose Control > Enable Simple Buttons.

Step Twelve

Start with your mouse away from the button. Then roll your mouse over the button and finally click it to test all three states.

Making the Button Control Something

Once you have created a button, you need to add some ActionScript to make something happen. Buttons can cause browsers to go to a new web address, move to different point on the timeline, make objects appear, or open external swf files. The list goes on and on.