Flash Animation Tutorials >> Flash Symbols >> Button Symbols

Flash Button Symbols

Flash Tutorial to create a button symbol

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

Please carry out the following steps in Macromedia 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

Absolutely FREE Web Templates
Check out these quality free web templates and download them without any registration or sign-up!

FREE Web Design Guide
From web design tips & ideas to HTML, CSS Styles, Fireworks & Dreamweaver you'll find all you need to know about effective web site design right here!

Quality Dreamweaver Templates
Professional quality dreamweaver templates in over 20 categories, starting at just $9.95! Instant download & easy customization