Make a Button in Flash Cs4

When you see a Flash animation, you often see a large button in the middle of the image that you can press to play the animation. In addition to playing movie clips, a button in Flash CS4 can help you to navigate timelines or open new windows from within your animation. Follow these steps to make a button in Flash CS4.

Steps

Create a Button from an Image and Text

  1. Open a new document in Flash CS4.
  2. Choose an image for your button. You can either draw a shape and select it or choose an existing image.
    • If you use an image from your browser, then you will have to save it to your hard drive and then drag and drop the image into your document. You cannot copy and paste an image from your browser into Flash.
    • You can also insert a saved image into the document by choosing File > Import > Import to Stage.
  3. Add text to your button. Select the Text tools from the Tools panel and write your text next to the image.
  4. Use your cursor to select both the image and the text. Launch the Convert to Symbol dialog box by pushing F8 or by selecting Modify > Convert.
  5. Type the name "simpleButton" into the Name field and choose Button from the drop-down menu next to Type. Click OK when you have finished.

Define the Button States

  1. Double-click the button and select Edit in Place from the drop-down menu.
  2. View your Timeline. You should see headings that say Up, Over, Down and Hit.
  3. Right-click on Layer 1 and choose Insert Layer. Rearrange the layers so that Layer 1, which contains your image and text, is on top.
  4. Select all 3 frames in the Over column. The Over column determine how your button will appear when you hover your cursor over it. Right-click and select Insert Keyframe from the drop-down menu.
  5. Click the Over keyframe in Layer 2. When the button appears, use your line tool to draw a straight line beneath the text of your button. Your Layer 2 keyframe will appear solid on the Timeline.
  6. Select the Layer 3 keyframe under Over. Draw a rectangle that is just large enough to surround your button. When your cursor hovers over the button, you will now see an underline and a rectangle appear along with the button.
  7. Choose the Down column, right-click, and choose Insert Keyframe. Make sure that your Down column remains highlighted.
  8. Click on the rectangle to the left of the Up column heading. Change the color of the button from its hover color to another color. Doing this will enable your button to change colors when you click it.

Add the Code

  1. Use your cursor to select your button. Type the name "myButton" into the Name field of the Properties panel.
  2. Press F9 to open the Actions panel. Input the following code into the Actions window:
    • function set up Events() {
    • // associate events with event handlers
    • myButton.addEventListener(MouseEvent.CLICK, clickButtonHandler);
    • myButton.addEventListener(MouseEvent.MOUSE_OVER, hoverButtonHandler);
    • }
    • setupEvents();
    • function clickButtonHandler(e:MouseEvent) {
    • trace("Clicked Button!");
    • }
    • function hoverButtonHandler(e:MouseEvent) {
    • trace("Hovered Over Button!");
    • }
  3. Choose Control > Test Movie > Test Command. Your application will then appear in the Flash Player window.
  4. Hover and click over your button. The Output window will display text such as "Hovered Over Button!" or "Clicked Button!" depending on the actions that you took.



Tips

  • You can always vary the Action Script to make your button perform different tasks. Check out the Code Snippets panel for pre-written Action Script code that will enable many common button uses.

Warnings

  • Action Script 2.0 is not compatible with Action Script 3.0. For this reason, you can't copy and paste code from Action Script 2.0 into your button.

Things You'll Need

  • Computer
  • Adobe Flash CS4

Related Articles

Sources and Citations

Retrieved from "https://kipkis.com/index.php?title=Make_a_Button_in_Flash_Cs4&oldid=359227"