Flash Button Symbols

How to create a button symbol in Flash

Button symbols are used for timeline navigation. The button symbols add interactivity to the movie and respond to mouse clicks, key press or rollovers/rollout and other actions. You can define the graphics associated with various button states (Up/Over/Down/Hit), and then assign actions to the instance of a button. There are 4 frames in their timeline -one each for the up, over and down states, and one to define the hit area of the button.

Compatible Versions of Flash for this Tutorial

Flash MX 2004 & below | Flash 8 | Flash CS3 | Flash CS4
Note: For uses of lower versions of Flash some visual interface images would differ.
Recommended Version: Adobe Flash CS4 Professional

Please carry out the following steps in Flash to create button symbols.

1. First create/import the object(s) to be converted into a button. Import bitmaps onto the stage using Ctrl+R.
2. Select the object(s) and then press F8 (or Modify >> Convert to Symbol).
3. Select the Button Behavior for the symbol and name the symbol say, 'btn_home'.
4. Double-click the instance of 'btn_home' on the stage to switch to its symbol-editing mode. The Timeline header changes to display four consecutive frames labeled Up, Over, Down, and Hit as shown below.
   

   
   Fig: Symbol-editing Mode of completed flash button 'btn_home'

5. The first frame displays the drawn vector/plain text used for creating this button, now insert a Key frame (F6) in the frame labeled Over (Flash automatically duplicates the contents of the Up frame).
6. Now change the color of the object in the Over frame to create a rollover effect in the button.
7. Insert frames (F5) for the Down frame and the Hit frame (only defines the area of the button that responds to user action and is not visible at runtime).
8. Save your work and test the Movie (Ctrl + Enter). That's it your simple button is ready!

Flash Symbols

• Overview of Flash Symbols
• Creating Graphic Symbols
• Creating Button Symbols
• Creating Movie-clip Symbols

We would love to hear your comments and any suggestions on future tutorials we can add to this section. Thanks!

Add Your Comment

Fill the below form to submit your comments (or suggestions):

Your Comment/Suggestion :

Your Name : Your Email : Your Rating : News-Letter Sign-up? Yes No Help us fight spam! What is 8 plus 7?

Bookmark & Share

Bookmark and Share this web page.

Add this page to:

Digg Diigo Reddit Delicious StumbleUpon Technorati Slashdot BlinkList Mixx Faves

 

Twitter Facebook Google Yahoo! Windows Live myAOL MySpace LinkedIn Favorites Email