Button Symbols

Just like other symbols, button symbols have their own Timeline. The difference is that a button symbol Timeline has 4 prelabelled frames:

Another key difference is that button symbols do not play (i.e. move to the other frames of the button) when the frame in the Timeline containing the button is reached. Instead, the button plays in response to cursor action (it is event-driven).

In this exercise, when creating the file in Animate, choose the ActionScript 3.0 format. This format provides an ability to test the button from within Animate without playing the movie in the browser.

To create a button symbol, select Insert>New Symbol and specify Button as the Type.

Creation of Buttons for a Navigational Bar

Adding Sound to a Button

To add sound to a button, bring the sound into the Library by choosing File>Import>Import to Library and then selecting the sound. (Windows comes with a number of sound files that can be found at c:\Windows\Media) Then open the button for editing and create a new, appropriately-named layer (e.g. sound) and drag it to be the top layer. If you want the sound to play during a mouseover, click the over frame in the sound layer and press F7 to insert a blank keyframe. Then drag an instance of the sound from the library to the stage; you will see the waveform in the timeline of the button.

If you want to hear the sound when the user clicks on the button, you would put the sound in the down frame in the button.

Drag an instance of the button from the library into the main timeline. You can test the sound by Control>Enable Simple Buttons (if you are using the ActionScript 3.0 format) or Control>Test Movie (for the HTML5 Canvas format).

Creating Invisible Buttons

If one wants something to be invisible until the user cursors over it or clicks on it, one simply creates a button symbol where the Up State contains nothing. Invisable buttons might be useful in a game.

Movie Clip Symbols

Unlike graphic symbols, movie clips, once they start playing, operate independently of the main Timeline. So once the main Timeline reaches the frame containing the movie clip, the movie clip will start playing and continue even if the main Timeline is stopped or subsequently stops. Thus movie clips require only a single keyframe in the main Timeline to play, regardless of how long the movie clip is, in contrast to graphic symbols.

To create a movie clip, one can select Insert>Symbol and choose a type of Movie Clip. This will place you into symbol editing mode and then create the artwork/animation for the symbol. Alternatively, one can take artwork and animation that one has created in the main Timeline and then put this in the timeline for a movie clip symbol. To do the latter, the steps are as follows:

Just like one can put a sound in the over (or down) state of a button, one can put a movie clip in the over (or down) state of a button, and thus the movie clip will play in response to a user mouseover or click of the button. This permits a limited degree of interactivity in an Animate movie without the use of scripting you add (ActionScript or JavaScript).

Revised: October 19, 2021. Comments to William Pegram, bill@billpegram.com