Buttons

1
Buttons

• Making Flash Interactive

2
Symbols are templates for instances
Auto Symbol
Instances of Auto
3
Symbols

• Think of Symbols as a
• Template, generic form, model
• Example
• Plain auto is symbol for specific type of car
• Auto has 4 tires, body, 2 windows
• Specific instance has color, more detail
• Using symbols saves file size
• Symbols create less work for Flash designer

4
Buttons are a type of Symbol

• A main symbol is saved in the Library
• Instances of the symbol go to stage for added
  details
• Properties that will be different for each
  instance
• Should be applied to each instance
• Not the symbol in the library
• Example Buttons for navigation
• What is the same?
• shape, color, size
• Instance differences?
• Text on button, action on click

5
Button Action

• Don't do much without ActionScript
• ActionScript is added to button instance
• 4 parts to all buttons
• Up Button sitting there
• Over Mouse over reaction
• Down Mouse pressed
• Hit Area to activate button

6
Make a Button

• Insert New Symbol Button
• Give name and press OK
• Draw button in the Up frame.
• Click the Over frame. Insert Keyframe
• Modify the button for Over (change fill color)
• Click the Down frame. Insert Keyframe.
• Modify the button for Down (fill with a third
  color)
• Click the Hit frame. Insert Keyframe.
• Don't modify. This is hidden from the user.

7
Make a Button

• To return to the main timeline, click scene name
  at top
• Be sure the Library window is open ctrl-L
• From the Library
• drag a copy (instance) of the button to stage

8
Add Text to Button

• Drag an instance of the button to stage
• Use text tool to add text to button instance.
• Keep color contrast in mind
• When happy with the text
• group the text with the button

9
Symbol hints

• Double-clicking on a symbol edits the symbol in
  the library, not the instance
• Any changes to the library symbol affect all
  instances of that symbol
• Only symbols that are used in the movie have an
  effect on the movie size

10
To make a button symbol (short version)

• Insert a new button symbol with name
• Create the Up, Over, Down, Hit keyframes
• Drag an instance of button symbol from library to
  stage
• Add text to instance