g
Printer Friendly Version

editor  
BellaOnline's Flash and Animation Editor
 

Add a Tooltip to a Button in Flash CS3 Professional

In the last tutorial, we created an invisible button for our FlashR website. After making the master button which we stored in the Library, we dragged an instance of the invisible button onto the Stage. In this tutorial, we will add a tooltip to the button. Tooltips are one way that you can tell your site visitors the purpose of a button. As we did in the last tutorial, we will be editing the master version of the buttom from the Library when we add the tooltip. Your button does not need to be an invisible button for you to add a tooltip.

  1. Open your movie into Flash CS3.

  2. Double-click on the InvButton in the Library and you will enter the edit mode for the master button. You can tell this by the change in the Timeline and the InvButton added to the Edit Bar.

    We want the tooltip to appear when the mouse is over the button. So we need to add it to the Over frame on the button's Timeline. However, because the button is invisible on every frame but the Hit frame, we will first create the tooltip on the Hit frame and then move it to the Over frame. We will draw a simple Primitive Rectangle with the new Rectangle Primitive tool. This new tool will allow us to easily round all the corners of the rectangle from the Properties Inspector. Set the Fill Color box in the Tools Panel to a color of your choice for your tooltip and set the Stroke Color box to null.

  3. Click on the Hit frame in the Timeline. We will draw this tooltip rectangle above the rectangle that you added to this frame in the last tutorial which indicated the clickable area for the invisible button. Click and drag to draw a tooltip rectangle about the width of the clickable area.

  4. We will move the tooltip rectangle to the Over frame in the Timeline. While still on the Hit frame, click Edit, Cut. Click on the Over frame and add a Keyframe. Now, click Edit, Paste in Place. This will put the tooltip rectangle in the same position above the clickable area on the Over frame.

  5. Let's round the corners for this tooltip rectangle. Click on the rectangle with the Selection tool. In the Properties Inspector, use the Rectangle Corner Radius Slider to create the rounded corners for the tooltip.

  6. Let's add some text to the tooltip. Click on the Text tool and set the Font Color box to black or a color of your choice in the Properties Inspector. You may also want to set the Font, Font Size and the Center Alignment. Also, set the Text Type to Static. Now, click on the tooltip rectangle and add the text. Use the Selection tool to center the text over the tooltip.

  7. When you click on Scene1 on the Edit Bar to go back to the main movie Timeline, you will not see any change. But, your tooltip will appear when you test your movie and pass your mouse over the button. Save your movie.




Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor