flash tutorial: the invisible buttonflash, mx, flash mx, tutorial, invisible buttonThe Invisible ButtonSkill Level: Novice Knowledge Needed: Button Instances Number of Steps: 6 The Movie
----------------------------------------------- 250150invisBtn.swf
------------------------------------------------ invisBtn.flaDownload Flash File
Learn how to use invisible buttons to add functionality to almost any flash app.
pict1.jpg25083Picture 11First, open a new flash document. Next we need to create our button instance. Hit ctrl F8 to make a new symbol. Make sure you select button as the behavior type and give it the name "invisible button."
pict2.jpgpict2.jpg25051Picture 22Now we are inside of the button instance. Highlight the frame that has the world "Hit" over it and press F6. What this does is create a new keyframe on this frame. Now draw a recangle. I usually make the color a bright green or color that I know I won't be using in my movie. Now using the properties toolbar set the rectangle x and y coordinates to 0 and make it 100 pixels wide and 25 pixels high.(of course the position and size of the button are up to, but these are the options that I am using for this tutorial.) Well that's it. You now have your invisible button. What we have done is here is just selected a hit area for our button. We give it no up, down or over states which makes it invisible, well at least to the user. This enables us to keep copying the same button and adding new actions to it instead of having to make a new button every time you need one. For instance if you had a list of links in your flash movie you would either have to make all your text for the links buttons, or just copy this invisible button over your text and change the url in the actions for the button. This helps keep your file size down and helps keep your movie organized.pict3.jpg25099Picture 33Once you have your button it is time to put it to work. Get back to the root timeline by clicking on the Scene 1 button under your layers. If your library is not already open, open it by pressing ctrl L and drag an instance of your invisible button onto the stage. You will notice that your button's color is not what you had drawn, but instead it is a transparent blue. This is just to let you know that it is in fact an invisible button and will not be seen by the user once the movie is published. You can see this for yourself by hitting ctrl Enter to test movie.pict4.jpg250152Picture 44Now we are going to discuess how to make this button function for you. First and foremost we need a way for the user to know that there is a button to press. We will simply be making a list of links like i talked about earlier to show how this works. Write down as many titles as you would like to use, for this example I am going to use three. Create a layer for your text and a layer for your buttons. you can see in the picture that there are now three instances of our invisible button that have been placed on top of our text.
Another way that this button is so functional is that you can resize it to be as big or as small as you need it. You can see that I have made the button fit only over my text.
pict5.jpg25076Picture 55
Now all you have to do is add the actions for each buttons. To do this, select one of the button instances on your stage. Open up your actions window by pressing F9 and add the following:
on(press) {
getURL("http://www.spoono.com",
_blank, "POST");
}]]>
What we are doing is telling flash to open up www.spoono.com into a new browswer window everytime this button is pressed. Now all you have to do is add that same code to all of your other buttons and all you will have to change is the the actual link to the site.
6Where to go from here. I hope that you can see how easy it is to implemet this trick in your flash movies. I use these buttons in almost every fla I make that has any sort of user interaction. Other ways to implement this is to have hot spots in your site that will open up secret links or content on your site. I am sure you won't have any trouble incorporating this and if you have any questions please get back to us so we can help you out.