H  1  2  3  4.1  4.2  4.3  5  6  7  8  9 

Hands-On: Flash MX 2004 the Basics

Exercise 9: Invisible Buttons and Behaviors

Why you may wish to do this… having an invisible button at your disposal allows you to make anything from a blank button, text, or a free-form image to become a hyperlink in Flash MX 2004. It’s relatively easy to make text a hyperlink, but a tad more difficult with shapes and buttons. This way you can create blank button symbols that can be used over and over again within a document, just change the invisible buttons shape, add button text, and the corresponding hyperlinks. Follow the easy steps below to build your own invisible button.

  1. Create a new Flash MX 2004 document and save it as invisibleButton.fla. Saving a new graphic symbol.
  2. Select the Rectangle tool and then, turn off the Stroke color.
  3. Draw a Rectangle on the Stage in any bright color, I used red.
  4. Hit the [Esc] key and then hit the [V] key to turn on the Selection Arrow.
  5. Press [F8] and then choose Button for the behavior and name the button invisibleRectangle.
  6. Double-click inside of the new rectangle button to open the button Timeline.

    7. The UP state for the button.   The HIT state for the button.   Showing the blue rectange that is slice.

  7. Select the Up State black square and then drag it to the Hit state.
  8. Click on the Scene 1 link to go back to the Stage and notice that the button has now changed into a cyan colored rectangle. The rectangle now only lives in the invisible hit state of the button and that will be invisible on the Stage.
  9. Delete the rectangle on the Stage for now.
  10. Save your work and go on to the rest of the steps.
  11. Type some text on the Stage that will include at least one word that will become a hyperlink. (Note: You might want to distinguish the hypertext from the plain text on the page with a color change or underline).
    View of the Stage and Timeline layers.
  12. Open the Library [F11] and then drag the invisibleRectangle symbol out onto the Stage. Place it over the text that will become a hypertext link.

    Placing an Invisible Rectangle HOT button on the page.
  13. Using the Free Transform tool reduce the size of the invisibleRectangle until it fits nicely over the word or words that will become a hypertext link.
  14. Next you will use something new to Flash MX 2004, but has been used for sometime in Dreamweaver MX. It will be a Behavior. Select the Behavior panel if it is already in the panel area, otherwise, select Window > Development Panels > Behaviors or [Shift] + [F3].
  15. Select the invisibleRectangle on the Stage, and then click on the Plus + sign drop-down arrow in the Behaviors panel.
  16. The Behaviors panel. Choose Web > Go To Web Page. Type in the URL for the address to the hyperlink. Choose “_blank” from the Open in: drop-down box. This opens a new window for the hyperlink.
    The Go to URL dialog box.

    17. Using Publish Preview on the old site.

  17. To test your movie, go to the File menu and then choose Publish Preview > HTML, this will create the .swf file needed to view your work. Click the hyperlink on the Web page to be sure that it works.
  18. Save your work and go on to the next few steps.

 

The Round Rectangle tools Next, let’s make a blank button to place into the Library that can put this invisible button to good use. In the Timeline select the layer called button and then follow these simple steps:

  1. Select the Rectangle tool, and like the last time do not use the Stroke color. Look down in at the bottom of the Tools panel in the Options area and notice this icon under the magnet, it is the Round Rectangle Radius tool, select it to round the corners of the button rectangle, I chose 35.
  2. The Down state for the Button. Select the button and hit [F8], choose the Button behavior and name it myButton.
     The Rectangle Settings dialog box.
  3. After drawing a button, hit the [Esc] key and then hit [V] to select the selection tool. Double-click the new button to open its Timeline. (For practice only, do steps 4 & 5).
  4. In the Over state hit [F6] to add a keyframe, click the button and change the color to a slightly darker shade.
  5. In the Down state hit [F6] to add another keyframe, click the button and change the color to a slightly darker shade than before.
  6. DO NOT add a keyframe to the Hit state because you’ll use the invisibleButton for that later.
  7. The Go to URL dialog box. Return to Scene 1 and open the Library [F11] and then drag a copy of the invisibleButton onto the Stage. Use the Free Transform tool to resize the shape to cover your new button.
    A small area that needs a little TKC.
  8. With the button still selected, choose the Behaviors panel and then select the Plus + drop-down menu. As before, choose Web > Go To Web Page. I just left the default entry this time.
  9. In step 3 I had you do some button practice, normally, this is how you could make a button look interactive, by changing its color or text or shape in each state; however, with the short cut hyperlink trick shown on these pages, the Over and Down states do not show up in the browser. But, the hyperlinks DO WORK!

 

Back to Top