Buttons in Flash

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.

    Buttons are actually four-frame interactive movie clips. When you select the button behavior for a symbol, Flash creates a Timeline with four frames. The first three frames display the button's three possible states; the fourth frame defines the active area of the button. The Timeline doesn't actually play; it simply reacts to pointer movement and actions by jumping to the appropriate frame.

    Each frame in the Timeline of a button symbol has a specific function:

                           The first frame is the Up state, representing the button whenever the pointer is not over the button.

                           The second frame is the Over state, representing the button's appearance when the pointer is over the button.

                           The third frame is the Down state, representing the button's appearance as it is clicked.

                           The fourth frame is the Hit state, defining the area that responds to the mouse click. This area is invisible in the SFW file.

    Buttons may also have sounds attached to the various states. They can also be animated if you place an animated movie clip symbol in either the Up, Over or Down state.

    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. Use these resources to learn how to create a button with a movie clip symbol:

    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.

    • 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.

  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.

    • 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.

  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.


    ActionScript 2.0 is not compatible with ActionScript 3.0. If your version of Flash uses ActionScript 3.0, you canít paste ActionScript 2.0 code into your button (and vice versa). Before you paste ActionScript from another source into your buttons, verify that the version is compatible.

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.

  3. In the Create New Symbol dialog box, enter a name. For the symbol Type, select Button.

    Flash Pro 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.

    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.

    Flash Pro 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.

  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.

  9. When you finish, choose Edit > Edit Document. Flash 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, Flash Pro 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.

Working with sound overview

Macromedia Flash offers a number of ways to use sounds. You can make sounds that play continuously, independent of the Timeline, or you can synchronize animation to a sound track. You can add sounds to buttons to make them more interactive, and make sounds fade in and out for a more polished sound track.

There are two types of sounds in Flash: event sounds and stream sounds. An event sound must download completely before it begins playing, and it continues playing until explicitly stopped. Stream sounds begin playing as soon as enough data for the first few frames has been downloaded; stream sounds are synchronized to the Timeline for playing on a website.

Importing sounds

You place sound files into Flash Professional by importing them into the library or directly importing them to stage.

The File > Import > Import to Library menu option places the audio only in the library, and not on the timeline.

When you import an audio file using File > Import > Import to Stage menu option or by dragging and dropping the audio file directly to the timeline, the audio will be placed on active frame of the active layer. If you drag and drop multiple audio files, only one audio file will be imported because one frame can contain only one audio. 

To import audio, use one of the following methods:


You can also drag a sound from a common library into the library for the current document.

Flash Professional stores sounds in the library along with bitmaps and symbols. You need only one copy of a sound file to use that sound multiple ways in your document.

If you want to share sounds among Flash Professional documents, you can include the sounds in shared libraries.

Flash Professional includes a Sounds library containing many useful sounds that can be used for effects. To open the Sounds library, choose Window > Common Libraries > Sounds. To import a sound from the Sounds library to your FLA file, drag the sound from the Sounds library to the Library panel of your FLA file. You can also drag sounds from the Sounds library to other shared libraries.

Sounds can use large amounts of disk space and RAM. However, mp3 sound data is compressed and smaller than WAV or AIFF sound data. Generally, when using WAV or AIFF files, itís best to use 16-22 kHz mono sounds (stereo uses twice as much data as mono), but Flash Professional can import either 8- or 16-bit sounds at sample rates of 11, 22, or 44 kHz. Sounds recorded in formats that are not multiples of 11 kHz (such as 8, 32, or 96 kHz) are resampled when imported into Flash Professional. Flash Professional can convert sounds to lower sample rates on export.

If you want to add effects to sounds in Flash Professional, itís best to import 16-bit sounds. If you have limited RAM, keep your sound clips short or work with 8-bit sounds instead of 16‑bit sounds.

note: (Flash Professional CC only) To import or play sounds in Flash Pro, pre-installing QuickTime or iTunes is not needed.


You can import the following sound file formats into Flash:



Note: You can also drag a sound from a common library into the library for the current document. See Working with common libraries.

Adding sounds to buttons

You can associate sounds with the different states of a button symbol. Because the sounds are stored with the symbol, they work for all instances of the symbol.

  1. Select the button in the Library panel.
  2. Select Edit from the Panel menu in the upper-right corner of the panel.
  3. In the buttonís Timeline, add a layer for sound (Insert > Timeline > Layer).
  4. In the sound layer, create a regular or blank keyframe to correspond with the button state to which you want to add a sound (Insert > Timeline > Keyframe or Insert > Timeline > Blank Keyframe).

    For example, to add a sound that plays when you click the button, create a keyframe in the frame labeled Down.

  5. Click the keyframe you created.
  6. Select Window > Properties.
  7. In the Property inspector, select a sound file from the Sound pop-up menu.
  8. Select Event from the Sync pop-up menu.

    To associate a different sound with each of the buttonís keyframes, create a blank keyframe and add another sound file for each keyframe. You can also use the same sound file and apply a different sound effect for each button keyframe.