How to create a button symbol

Button symbols

Buttons give visitors a way to control parts of a movie. You can use button symbols to create interactive buttons that respond to mouse clicks, rollovers, or other visitor interaction.

Button symbols are four-frame interactive movie clips. The first three frames display the button’s three possible states: Up, Over, and Down. The fourth frame, Hit, defines the active area of the button.

The timeline for a button doesn’t play like other movies; it reacts to pointer movement and actions by jumping to and displaying the appropriate frame.

Create a button

  1. Start Flash and open a new blank document (ActionScript 3.0).
  2. Select Insert > New Symbol.The Create New Symbol dialog box appears (Figure 1).
  3. Select Button for Type, name the button, and click OK. You are now in symbol-editing mode and viewing a separate timeline for the button symbol. The Up frame contains a keyframe (Figure 2) Each frame on the timeline of a button symbol has a specific function:
    • Up state: Represents the button’s appearance whenever the pointer is not over the button.
    • Over state: Represents the button’s appearance when the pointer is over it.
    • Down state: Represents the button’s appearance as it is clicked.
    • Hit state: Defines the area that will respond to a mouse click. This area will be invisible in the published movie.
  4. Make sure the Up frame is selected.
  5. Use the drawing tools to create a shape for your button. Use the Properties panel to set the fill and stroke colors for the Up state of the button .
  6. Select the Over state and select Insert > Timeline > Keyframe to add a keyframe. Adding this keyframe copies the button graphic from the Up frame to the Over frame.
  7. Select the Over keyframe and use the Selection tool to select the button.
  8. Change the fill or stroke color of the button shape.When visitors roll over the button, the button will appear as you see it in the Over frame.
  9. Insert keyframes in the Down and Hit frames of the layer. This copies the button graphic from the Over frame to the Down and Hit frames
  10. Insert a new layer and name it Text.
  11. Select the Up frame of the Text layer. This frame already contains a keyframe.
  12. Use the Text tool to type text on the button shape.
  13. Use the Properties panel to adjust the font, size, and color of the text so it fits nicely on your button shape.
  14. Use the Selection tool or the Up, Down, Left, and Right Arrow keys to position the text on the button shape
  15. Insert a keyframe in the Over frame of the Text layer.
  16. Select the text and use the Properties panel to change some feature of the text in the Over frame, such as color.
  17. Insert a keyframe in the Down frame. If you want the text to change appearance when the button is clicked, edit the appearance of the text in the Down frame.The timeline should now appear as it does in the example (Figure 3).
  18. Now you can insert an instance (copy) of the button symbol into the main timeline of your movie .
  19. Click Scene 1 (Figure 4) to exit symbol-editing mode and return to the main timeline.
  20. Select Window > Library to display the Library panel.The new button symbol appears in the Library panel (Figure 5)
  21. Drag the button symbol from the Library panel onto the Stage.
  22. Select Control > Test Movie > In Flash Professional to test the movie. When you roll over the button with the pointer, you see the changes you defined in the Over frames for the button. If you edited the Down state of the button, this will be visible when you click the button.
  23. Close the preview window .

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.