Flash Practice 7—Button

Ms. Rocío Acevedo

Computer Applications II

Introduction: 

         You will learn how to create buttons to be used later on animations.

 

 

Task: 

         Create a button that will change its appearance when you move the mouse over and when you click it.

 

 

Process: 

 

  1. Start a new blank document.

 

  2. Insert a new symbol with Insert —> New Symbol, select the type Button, name it as mybutton and click OK.

 

 

 

 

 

 

 

 

  3. You are now in symbol-editing mode and viewing a separate Timeline for the button symbol.  The Up frame contains a keyframe and each frame on the Timeline of a button symbol has a specific function:

· Up state: represents the button whenever the pointer is not over the button.

· Over state: represents the button’s appearance when the pointer is over it.

· Down state: represents the button’s appearance as it is clicked.

· Hit state: defines the area that will respond to a mouse click.  This area will be invisible in the published movie.

 

 

 

 

 

 

 

4. Select the Up frame.

 

5. Use the drawing tools to create a shape for your button.  Use the Property inspector to set the fill and stroke colors for the Up state of the button.

 

 

 

 

 

 

 

 

 

 

 

 

6. Select the Over state and select Insert —> Timeline —> Keyframe to add a keyframe. Adding this keyframe copies the button graphic from the Up frame to the Over frame.

 

 

 

 

 

 

 

 

 

7. Select the Over keyframe and use the Selection tool to select the button.

 

8. Change the fill or stroke color of the button shape. When the visitor rolls the pointer over the button, the button will appear as you see it in the Over frame.

 

9. Insert keyframes in the Down and Hit frames of the Text layer.

This copies the button graphic from the Over frame to the Down and Hit frames.

 

 

 

 

 

 

 

 

 

 

 

 

10. Insert a new layer and name it Text.

 

11. Select the Up frame of the Text layer. This frame already contains a keyframe.

 

12. Use the Text tool to type text on the button shape.

 

13. Use the Property inspector to adjust the font, size, and color of the text so it fits nicely on your button shape.

 

14. Use the Selection tool or the up, down, left, and right arrow keys to position the text on the button shape.

 

 

 

 

 

 

 

 

 

 

 

 

15. Insert a keyframe in the Over frame of the Text layer.

 

16. Select the text and use the Property inspector to change some feature of the text in the Over frame, such as color.

 

17. Insert a keyframe in the Down frame. If you want the text to change appearance when the button is clicked, edit the appearance of the text in the Down frame. Now you can insert an instance (copy) of the button symbol into the main Timeline of your movie.

 

 

 

 

 

 

 

 

 

 

 

 

18. Click Scene 1 to exit symbol-editing mode and return to the main Timeline.

 

19. Now the new button symbol appears in the Library panel.

 

 

 

 

 

 

 

 

 

20. Drag the button symbol from the library onto the Stage.

 

21. Select Control —> Test Movie to test the movie. When you roll over the button with the pointer, you see the changes you defined in the Over frames for the button. If you edited the Down state of the button, this will be visible when you click the button.

 

22. Your button will look like this example.

 

23. Test your animation, save and publish your file as button_INITIALS.

24. Open your movie in the browser.

 

 

Resources: 

         Flash Help