Basic Steps for Creating Buttons

1. Decide what button type best suits your needs.

Button symbol. Most people choose button symbols for
their flexibility. Button symbols contain a specialized
internal timeline for button states. You can easily create
visually different Up, Down, and Over states. Button
symbols also change their state automatically as they
react to user actions.

https://www.youtube.com/watch?v=Z83xTtYjN3U
Basic Steps for Creating Buttons
1. Decide what button type best suits your needs.

Movie clip button. You can use a movie clip symbol to

create sophisticated button effects. Movie clip symbols
can contain almost any type of content, including
animation. However, movie clip symbols do not have
built-in Up, Down, and Over states. You create those
states yourself, using ActionScript. A disadvantage is that
movie clip files are larger than button files.
Basic Steps for Creating Buttons
1. Decide what button type best suits your needs.
ActionScript button component. Use a button
component if you require only a standard button or a
toggle, and you don’t want to customize it extensively.
Both ActionScript 2.0 and 3.0 button components come
with built-in code that enables state changes. So, you
don’t have to define the look and behavior of button
states. Simply drag the component onto the Stage.
https://www.youtube.com/watch?v=hustSfd0hCE&t=48s
Basic Steps for Creating Buttons
ActionScript button component.
ActionScript 3.0 button components allow for some
customization. You can bind the button to other
components, and share and display application data.
They have built-in features, such as accessibility support.
Button, RadioButton, and CheckBox components are
available.
ActionScript 2.0 button components are not
customizable. The component enables state changes.
Basic Steps for Creating Buttons
2. Define your button states.
Up frame. The appearance of the button when the user
is not interacting with it.
Over frame. The appearance of the button as the user is
about to select it.
Down frame. The appearance of the button as the user
selects it.
Hit frame. The area that is responsive to clicks by the
user. Defining this Hit frame is optional. If your button is small,
or if its graphic area is not contiguous, defining this frame
can be useful.
Basic Steps for Creating Buttons
Hit frame.
The contents of the Hit frame are not visible on the Stage
during playback. The graphic for the Hit frame is a solid area
large enough to encompass all graphic elements of the Up,
Down, and Over frames. If you don’t specify a Hit frame, the
image for the Up state is used.
You can make a button that responds when a different area of
the stage is clicked or rolled over (also called a disjoint rollover).
Place the Hit frame graphic in a different location than the other
button frame graphics.
https://www.youtube.com/watch?v=s9IgVoZt9ug
Basic Steps for Creating Buttons
3. Associate an action with the button.

To make something happen when the user selects a

button, you add ActionScript code to the Timeline. Place
the ActionScript code in the same frames as the buttons.
The Code Snippets panel has pre-written ActionScript 3.0
code for many common button uses.
Create a Button with a Button Symbol
To make a button interactive, you place an instance
of the button symbol on the Stage and assign actions to
the instance. You assign the actions to the root timeline
of the FLA file. Do not add actions to the timeline of the
button symbol. To add actions to the button timeline, use
a movie clip button instead.
1. Choose Edit > Deselect All, or click an empty area of
the Stage to ensure that nothing is selected on the Stage.
2. Choose Insert > New Symbol.
Create a Button with a Button Symbol
3. In the Create New Symbol dialog box, enter a name.
For the symbol Type, select Button.
Animate switches to symbol-editing mode. The
Timeline changes to display four consecutive frames
labeled Up, Over, Down, and Hit. The first frame, Up, is a
blank keyframe.
4. To create the Up state button image, select the Up
frame in the Timeline. Then use the drawing tools,
import a graphic, or place an instance of another
symbol on the Stage.
Create a Button with a Button Symbol
You can use graphic symbols or movie clip symbols
inside a button, but you cannot use another button
symbol.
5. In the Timeline, click the Over frame, and then choose
Insert > Timeline > Keyframe.
Animate inserts a keyframe that duplicates the
contents of the preceding Up frame.
6. With the Over frame still selected, change or edit the
button image on the Stage to create the appearance
you want for the Over state.
Create a Button with a Button Symbol
7. Repeat steps 5 and 6 for the Down frame and
the optional Hit frame.
8. To assign a sound to a state of the button, select
that state’s frame in the Timeline and choose
Window > Properties. Then select a sound from the
Sound menu in the Property inspector. Only sounds
you have already imported appear in the Sound
menu.
Create a Button with a Button Symbol
9. When you finish, choose Edit > Edit Document. Animate
returns you to the main timeline of your FLA file. To create
an instance of the button you created on the Stage, drag
the button symbol from the Library panel to the Stage.
10. To test a button’s functionality, use the Control >Test
command. You can also preview the states of a button
symbol on the Stage by choosing Control > Enable Simple
Buttons. This command allows you to see the up, over, and
down states of a button symbol without using Control >Test.
Enable, Edit, and Test Button Symbols
By default, Animate keeps button symbols disabled as
you create them. Select and then enable a button to see
it respond to mouse events. Best practice is to disable
buttons as you work and enable them to quickly test their
behavior.
✓ To select a button, use the Selection tool to drag a
selection rectangle around the button.
✓ To enable or disable buttons on the Stage, choose
Control > Enable Simple buttons. This command acts as
a toggle between the two states.
Enable, Edit, and Test Button Symbols
✓ To move a button, use the arrow keys.
✓ To edit a button, use the Property inspector. If it isn’t
visible, choose Windows > Properties.
✓ To test the button in the authoring environment, choose
Control > Enable Simple Buttons.
✓ To test the button in Flash Player, choose Control > Test
Movie [or Test Scene] > Test. This method is the only way
to test movie clip buttons.
✓ To test the button in the Library Preview panel, select the
button in the Library and click Play.
Useful URL
✓ https://www.oreilly.com/library/view/flash-8-projects/059
6102232/ch04.html#flashprojects-CHP-4-SECT-1
✓ http://edutechwiki.unige.ch/en/Flash_button_tutorial
✓ https://helpx.adobe.com/animate/using/elements.html