Syllabus --------------------- Calendar/Schedule --------------------- Lecture Notes --------------------- Projects --------------------- Resources --------------------- Student Work				Art 444 Lecture Notes Flash MX 2004 Lecture Notes Building Buttons for Interactivity (Chapter 11) Basic Rollover Button: Flash buttons have four states: Up, Over, Down and Hit. These states take up 4 frames of the button's timeline in Symbol Editing mode. The Up state, is how the button looks before the cursor enters it. The Over state is how the button reacts when the cursor enter it. The Down state is how the button reacts when the button is clicked and the Hit state is the area defined as the button's hotspot. 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. Creating a Basic Rollover Button: Starting from scratch: Insert> New symbol (create button within the new symbol's timeline) or select a graphic on the stage and from the Modify> Convert to Symbol. Give the button a name and choose Button Behavior and click OK. Flash creates a symbol for your button in the l0ibrary. If you started from scratch, you will enter the button symbol's timeline. If you converted a graphic, you will be returned to the main stage's timeline (root) and will need to dbl. click the symbol to enter its timeline. By default the Up state in the button symbol's timeline contains a keyframe. You must add a keyframe for each additional state (that you'd like to change) and edit the original symbol or place new a graphic in each keyframe of the button. Use your F6 key to duplicate the first keyframe to the next buton state. Once your done you can edit each state independently. Use the crosshair symbol to center your button. If you created the button as a New Symbol you will need to place an instance of your button on the stage from your library. Defining the Hit State of the Button: the Hit state of a button defines where the button is active (i.e. its hotspot). The hit area does not need to be the same shape or location of the button's other states. Hit states can be be offset or have multiple hit areas. The Hit graphic does not appear in your actual button, so use any color fill. NOTE: Text button Hit states should not be the text. Use onion skinning to cover the text outline with a rectangle so it is easier to select as a button. See inset on p. 418 for more info. Previewing Buttons in Movie-Editing Mode: to enable buttons on the Stage, select Enable Simple Buttons from the Control menu. In order to re-edit or move a button you need to turn this feature off. Creating a Fully Animated Button: in order to make buttons animated you must place a movie clip symbol in the keyframe Up, Over or Down state of your button. Follow the steps to create a Movie Clip Symbol (Chapter 11) and place the movie clip (from the Library) in the one of the states of the button (not the "hit"). To view your animated button you must use Control>Test Scene, Control>Test Movie or Publish. Adding Actions to Buttons: all Flash buttons have certain actions built in; by default, when you move the cursor into the button it switches to the Over frame, when you click the button, Flash takes you to the Down frame. To create more interactivity or to refine how the button reacts to the cursor's movements you need to attach an Action Script to the instance of a button. We will cover the steps for making your button interactive in the next lecture note. Creating an Invisible Button: invisible buttons contain a blank keyframe in their Up state (additionally the Over and Down state as well) so they do not show up on the stage. Use these to add a hidden soundclip.

Back to top of page | School of Art, Design and Art History | SDSU Main