logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


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.

g


g features
Ken Burns Effect In Motion - Record Keyframes

Ken Burns Effect In Motion 5 - Set Up

Animated Title in Motion

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor