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
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Create an Invisible Button in Flash Professional CS3


In this tutorial, we will add an invisible button to our FlashR website. Invisible buttons are easy to make in Flash because there are no visible characteristics to add to the button states. You need only to designate the clickable area for the button in the Hit frame of the button's Timeline.

As you remember, a Flash button has four button states. They are Up, Over, Down and Hit. The Up state is the inactive state where the button is just sitting there on the webpage. The Over state is when the mouse is over the button and the Down state is when the button is clicked. The Hit state is invisible when the movie is playing. Its only purpose is to designate the clickable area for the button.

Open your Flash movie and lets make an invisible button.

  1. Let's put the invisible button (or buttons) on their own layer in the Timeline. Click the Insert Layer button in the Timeline and name the new layer "InvButtons".

    Now we are ready to make our master button. Then we will place an instance of the master button on the Stage over the computer. Remember from the last tutorial, we built an animation for the computer screen. Now we will put an invisible button on top of that same area but on a different layer.

  2. Click Insert, New Symbol to make a new button symbol. In the Create New Symbol dialog box, name the new button symbol "InvButton" and set the Type of symbol to Button.

    When you click OK the Stage will disappear and the workspace will change to the edit mode for our new button. The workspace is now all white with a small plus sign in the center. You will also notice that our master button has been added to the Library and there is a new Timeline for our master button which has the four button states.

  3. The default name for the first layer in the new Timeline is Layer 1. Change this to ButtonAni or anything you wish.

  4. We need to add a rectangle over the plus sign which will tell Flash the size of the clickable area for this button. I used an 85 x 85 pixel rectangle but you may wish to use a smaller or larger size.

    Click on the Hit frame in the Timeline and click Insert, Timeline, Keyframe. Use the Rectangle tool to draw a rectangle and center it over the plus sign. The Fill color can be set to any color. It will not be visible when the movie plays.

  5. Click on Scene 1 in the Edit Bar to return to the main movie.

  6. Click on Frame 1 of the InvButtons layer. Now drag an instance of our new master button from the Library to the Stage and place it over the computer. It will appear to be a bright blue color to indicate that there is an invisible button in that location on the Stage but this will not be visible when the movie plays.

  7. In the Properties Inspector, I gave the button an Instance Name of "EmailButton" because I will program the button to open an email window.

  8. To test our button, click Control, Test Movie. When the movie plays and you move your mouse over the computer, the mouse pointer should change to a hand indicating that this area is now a button.

  9. Save your movie.




Add Create+an+Invisible+Button+in+Flash+Professional+CS3 to Twitter Add Create+an+Invisible+Button+in+Flash+Professional+CS3 to Facebook Add Create+an+Invisible+Button+in+Flash+Professional+CS3 to MySpace Add Create+an+Invisible+Button+in+Flash+Professional+CS3 to Del.icio.us Digg Create+an+Invisible+Button+in+Flash+Professional+CS3 Add Create+an+Invisible+Button+in+Flash+Professional+CS3 to Yahoo My Web Add Create+an+Invisible+Button+in+Flash+Professional+CS3 to Google Bookmarks Add Create+an+Invisible+Button+in+Flash+Professional+CS3 to Stumbleupon Add Create+an+Invisible+Button+in+Flash+Professional+CS3 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 © 2014 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
Motion 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

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 © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor