Buttons

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

To create a button symbol, select Insert>New Symbol to enter symbol editing mode.

• 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.
• In a typical workflow, one would create the artwork for the up state, 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 states so that the user sees a change in the button appearance during mouseovers or clicks. If nothing is put in the hit state, 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 Scene 1 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 Flash unless one selects Control>Enable Simple Buttons. 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. Alternatively, 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 (although this seems to be less of an issue than in older versions of Flash).. 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 a Flash 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 (button second from the left, immediately below the Timeline) and then dragging the onion skin markers 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. 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 buttons to align the buttons as desired. 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.

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. Then open the button for editing and create a new, appropriately-named layer (e.g. sound) and drag it to the top. 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. You can test the sound by Control>Enable Simple Buttons or Control>Test Movie.

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.

Movie Clips

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.

To create a movie clip, one can select Insert>Symbol to go 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 a Flash movie without the use of ActionScript or JavaScript..

Revised: November 18, 2015. Comments to William Pegram, bill@billpegram.com