g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

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.

Add Add+a+Tooltip+to+a+Button+in+Flash+CS3+Professional to Twitter Add Add+a+Tooltip+to+a+Button+in+Flash+CS3+Professional to Facebook Add Add+a+Tooltip+to+a+Button+in+Flash+CS3+Professional to MySpace Add Add+a+Tooltip+to+a+Button+in+Flash+CS3+Professional to Del.icio.us Digg Add+a+Tooltip+to+a+Button+in+Flash+CS3+Professional Add Add+a+Tooltip+to+a+Button+in+Flash+CS3+Professional to Yahoo My Web Add Add+a+Tooltip+to+a+Button+in+Flash+CS3+Professional to Google Bookmarks Add Add+a+Tooltip+to+a+Button+in+Flash+CS3+Professional to Stumbleupon Add Add+a+Tooltip+to+a+Button+in+Flash+CS3+Professional to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor