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

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Invisible Buttons in Flash


In this tutorial, we will create an invisible button in FlashR CS3. Usually when you create a button in your Flash project, you will first draw or import a graphic on to the stage. Then you would convert the graphic to a button. In this tutorial, we will not be using a graphic as a button. Instead we will create a "hot zone" over the spot on the stage that we want our invisible button to function.

The first thing we need to do is to open our project into Flash. Next we will decide how large the "hot zone" will be and where on the stage we want our invisible button to be located.

  1. We will create a new layer in the Timeline for our invisible button or buttons. Let's call this new layer "InvButton". You will also need an Actions layer, if you do not already have one for this project. Therefore, add two new layers at the top of the Timeline. The Actions layer should be the top most layer and the InvButton layer will be just under the Actions layer.

  2. With the first frame of the InvButton layer selected, draw a rectangle shape over the location that you have determined your button will be located. You can set the Fill to any color and the Stroke to null. Although your new button will be invisible when your Flash movie is running, the button will be visible when your project is open in Flash. You may wish to set the Alpha lower to allow you to see through the button when you are working within Flash. Set the Alpha for the rectangle to 20%.

  3. With the Selection tool, select the new button. From the Menu Bar, click Modify Convert to Symbol. In the Convert to Symbol dialog box, name the button something that will help you remember its function. In the example, I named my new button "InvButton_EBay" because it will function as a link to my eBay auction listings. Set the Type to Button and click OK.

  4. With the new button still selected, go to the Properties Inspector and give the button an Instance Name. For the example, I used the name "EBayButton".

    In the Library, you will notice that you have a new button named "InvButton_EBay". Double-click on the button to enter the edit mode. Once you are in the edit mode, your stage should disappear and you will only see the rectangle.

  5. The new Timeline for the button is different from the usual Timeline. It has four button states called Up (Not active), Over (Mouse over button), Down (Clicked) and Hit (hot zone). We will only need the Hit frame for our invisible button to work. Let's rename the Layer 1 in the Timeline to "ButtonAni".

  6. If we leave the rectangle on the Up frame, it will be visible in our Flash movie at runtime. What we need to do is to move the rectangle to the Hit frame which will determine the "hot zone" for our button. Click on the Up frame in the Timeline and click Edit Cut. Now click on the Hit frame and click Insert Timeline Keyframe. Next, click Edit Paste in Place to paste the rectangle back to the exact position it was before. That's all we need to do to edit the button. Click on Scene 1 to return to the main stage.

  7. The last step is to add the ActionScript that will program our button. Click on the first frame of the Actions layer and open the Actions panel (Window Actions). Add the following code to the Actions panel. You will find more information about programming a button to work as a hyperlink in the ActionScript articles section.

    EBayButton.addEventListener(MouseEvent.CLICK, goEBay)
    function goEBay (evt) {
    var url = "http://www.YourWebSite.com"
    navigateToURL(new URLRequest(url))
    }

When you test your movie, the button will be invisible until you place your mouse over the hot zone.





Add Invisible+Buttons+in+Flash to Twitter Add Invisible+Buttons+in+Flash to Facebook Add Invisible+Buttons+in+Flash to MySpace Add Invisible+Buttons+in+Flash to Del.icio.us Digg Invisible+Buttons+in+Flash Add Invisible+Buttons+in+Flash to Yahoo My Web Add Invisible+Buttons+in+Flash to Google Bookmarks Add Invisible+Buttons+in+Flash to Stumbleupon Add Invisible+Buttons+in+Flash 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
The Motion Toolbar Tools

Apple Motion 5 - The Toolbar

Apple Motion - HUD

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