Button Symbols

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

• Up - defines appearance of button when cursor is not over button
• Over - defines appearance of button when cursor is over button
• Down - defines appearance of button when button is clicked
• Hit - defines the active area of button for mouseovers and clicks.

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.

• You may find it useful to turn on the grid. (View>Grid>Show Grid).
• You can create solid objects, such as a triangle, by drawing a closed figure, e.g. using the Line or Pencil tool, and then using the Paint Bucket to fill in the shape with an appropriate color. Let's add some text to the right of the triangle by using the Text Tool.
• In a typical workflow, one would create the artwork for the up frame, and then Insert a new keyframe twice to copy this over to the over and down frames. One would then alter the over and down frames so that the user sees a change in the button appearance during mouseovers (Over) or clicks (Down). If nothing is put in the hit frame, the content of the previous keyframe is used to define the mouseover/clickable area of the button.
• When one is done creating the button, one clicks on the left arrow to the left of the symbol name to return to the main Timeline and one then can place an instance of the button symbol in the main movie by dragging it in from the Library.
• The change in appearance of the button defined by the over and down states will not be evident in design mode in Animate unless one selects Control>Enable Simple Buttons. (This feature is available in the Animate ActionScript 3.0 format but is grayed out in the HTML5 Canvas format). Once the functioning of the button is verified, this feature should be turned off since it will interfere with selection and other operations on the button which one may wish to do. In any format, one can test the button change by Control>Test Movie and dispense with enabling simple buttons.
• When text created by the Text Tool is part of the area of the button that is desired to be active, the button will likely be active when the mouse is over the text but may not be when it is over the gaps between letters if these gaps are large (e.g. in 96 point text). To define the clickable area of the button, it is best to use the Hit state -- e.g. by creating a rectangle or some other shape in the Hit state of the button so as to define the active area of the button. The color used in this rectangle will not affect the appearance or operations of the button in an Animate movie. To make sure that the rectangle or other shape covers the correct area, it is useful to display the content of other frames in the button and this can be done by turning on Onion Skinning (two overlapping circles immediately above the Timeline) and then dragging the onion skin markers if necessary to include the proper frames.

Creation of Buttons for a Navigational Bar

• In most cases, it will help to create a suitably-named layer (e.g. buttons) in which one will place the buttons for the navigational bar.
• Typically these buttons will have a similar appearance but will differ in the text used in the button. Although different instances of a symbol can differ in shape, color, rotation, etc., the instances cannot vary in terms of the artwork used, e.g. the text used in the button. Thus the different buttons cannot be instances of the same symbol. Thus, the best alternative is to duplicate a button and then alter the text or other aspects that will differ. Duplicating is best because then there is a consistent font and color scheme across buttons and across button states. To duplicate a symbol, you can right-click on a symbol in the library and select Duplicate. This will bring up a dialog box where one can choose the appropriate symbol type (in this case button) and name it appropriately.
• Once the buttons have been created and an instance of each has been dragged onto the Stage, one will generally want to align the buttons. If they are all in the same layer, one can select all the buttons by selecting the layer or clicking in the timeline of the layer and typing Ctrl A. One can then choose Window>Align and then click on the various choices to align the buttons as desired. The icons in Animate 2023 give a good idea of the effect of the various choices. The alignment will be to the other buttons unless one clicks on the To Stage button at the right of the Align dialog box in which case the alignment will be to the Stage which often is not what you want.

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.

Output Formats

As noted in my writeup https://www.billpegram.com/animate/framebyframe.html , one can output from Animate to a number of formats including mp4. However, the button symbol functionality described above will not work if one exports to an mp4 because mp4 is not an interactive format - see https://community.adobe.com/t5/captivate-discussions/is-it-possible-to-create-an-interactive-video-in-mp4/td-p/9281721 Similarly, the button symbol functionality will not work if one exports to an animated gif.

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:

• create the animation in the main Timeline
• Shift click the layers used in the animation to select all the layers and then select Edit>Timeline>Cut Layers
• Choose Insert>New Symbol (choose movie clip)
• Choose Edit>Timeline>Paste Layers (this will add the layers to whatever layers exist in the movie clip)
• Delete the initial layer of the movie clip if not needed
• Drag an instance of the movie clip onto the Stage

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: March 27, 2023. Comments to William Pegram, bill@billpegram.com