Create a Button from an Image and Text

  1. 1

    Open a new document in Flash CS4.

  2. 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. 3

    Add text to your button. Select the Text tools from the Tools panel and write your text next to the image.

  4. 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. 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. 1

    Double-click the button and select Edit in Place from the drop-down menu.

  2. 2

    View your Timeline. You should see headings that say Up, Over, Down and Hit.

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

    Choose the Down column, right-click, and choose Insert Keyframe. Make sure that your Down column remains highlighted.

  8. 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. 1

    Use your cursor to select your button. Type the name “myButton” into the Name field of the Properties panel.

  2. 2

    Press F9 to open the Actions panel. Input the following code into the Actions window:

    • function setupEvents() {
    • // 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. 3

    Choose Control > Test Movie > Test Command. Your application will then appear in the Flash Player window.

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


Edit Video


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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s