Creating an invisible button in Flash

Invisible buttons are very useful when you want to make clickable an entire banner or you want to make clickable two or more elements, without adding code to each of them. In this tutorial it will be shown how you can easily create an invisible button in Flash.

1. Make a new Flash document, with 400x400 dimensions. Save it as invisiblebuttons.fla.

2. Rename first layer button.(Right click on the layer name, choose Properties and type the new name in the Name section and choose OK, or double click the layer name and type the new name).

3. I the first frame of the button layer, Use the Rectangle tool (R) from the Tools panel to draw a rectangle on the stage. Double click the rectangle to select both stroke and fill, and from the Properties panel choose for Stroke Color none, like in the picture below.


4. From the Properties panel also set the width and the height of the rectangle to 400x400, and X:0, Y:0. The rectangle shave the same le stage.

5. Click the rectangle to select it and press F8 (or choose Modify>> Convert to Symbol). From the window that appear type invisiblebutton to the Name, and choose Button for the Behavior.



6. Now double click the button you created (or right click and choose Edit in Place). More about creating buttons in Making a simple AdobeFlash 8 button – tutorial for beginners .

7. Now in the Hit frame press F6 to introduce a new keyframe.

8. Go back to the Up frame and press the Delete key from the keyboard.

9. Go back to Scene 1 and you should see on the stage the button like in the next picture.

Congratulations, You just did your first invisible button!

Subscribe now via RSS feed and get all the new tutorials

written by Carl , August 10, 2007

When i place this in the as2.0 = it only pulls up the web browser and not the website when I create the invisible button. I get no errors I'm lost on how to get this to link to the site (invisible button)

invbutton_btn.onRelease = function() {
getURL("http://celebritypersonalassistants.com");
};

written by AnaS , August 12, 2007

Put the following ActionScript code in the same frame where the invisible button is:

invbutton_btn.onRelease=function(){
getURL("http://celebritypersonalassistants.com");
}

Don't forget to give to the invisible button an instance name of invbutton_btn (in the Properties panel).


Hope it helps!

written by Melissa Mays , August 30, 2007

I'm making a flash site. On the home page I'm making a list of what the company does. Each item in the list is a link to another page which will describe the services. Every time I try to make the text a button when I bring it up in the browser you can click only around the text to make it change to a new page. I've made the hit frame a big square around the text. I don't understand what I'm doing wrong. Thank you

written by fernando , October 18, 2007

i dont know how to put a code in this button =/
f9 dont work ..

written by anon , October 19, 2007

alt f9
but make sure the instance is selected and not the frame

written by sean rogan , October 24, 2007

well its not really about invisible buttons but im kind of stuck with my button. i made a simple game of PONG and i want to make a menu for it so i made a button and then put a keyframe on frame 2 and in that frame i put the game of PONG and i put the actionscript of the button to go to the game like this:

on (press) {
gotoAndStop(2);
;

}

So that made the button go to next frame but when i play it before i even click on the button it flicks really fast between frame 1 and 2. How do i get it to stay on frame 1 until i click on the button to go to frame 2. plz help!!

written by AnaSt , October 24, 2007

Hi! In the first frame put the following code:
stop();

Now it should work

written by Patrick T , November 03, 2007

im like stuck on this part.
When i make the stroke color of the rectangle to "none" my rectangle just dissapears and i can't find it again. Am i doing this right? or is it not suppose to do that?

written by Amur Tigre , November 15, 2007

I'm stuck on prob - I've got layer with movie which has mouse related activity such as

on (rollOver) {
play();}

Now I insert usual layer - invisible button with release function

on (release) {
getURL(ClickTAG);
}

and it doesn't work! If I put on top the invisible button - it clicks(open site), but the movie doesn't play, and vice versa!

What to do?

written by pp , November 15, 2007

not sure

written by pp , November 15, 2007

on (rollOver) {
_root.note_visible = false;
}
on (rollOut) {
_root.note_visible = true;
}

// note = mc button

written by kenia , November 15, 2007

example ,,,, where is??????????

written by Adi , November 19, 2007

after creating invisible button i wz goin to write

on(rollOver)
{
_root.mouse_over_me_mc = true;
}
on(rollOut)
{
_root.mouse_over_me_mc = fstartlse;
}

after writing diz

**Error** Scene=Scene 1, layer=InvMe, frame=1:Line 1: Mouse events are permitted only for button instances
on(rollOver)

**Error** Scene=Scene 1, layer=InvMe, frame=1:Line 5: Mouse events are permitted only for button instances
on(rollOut)

Total ActionScript Errors: 2 Reported Errors: 2

diz prb iz arising Help Me plzzzz. i dont know how to solve it

written by CANDYBALLS , December 07, 2007

AYE BRO

written by Tremon , February 02, 2008

Thanx for the tutorial. It was immensily helpful. Just wanna know how to open a new window instead of opening the url into the same window. Thanx

written by Pan , April 29, 2008

whats the code if i want to link the invisible button to an javascipt popup page? thats customized to my example an video?

;>

Do you need more help? Ask now!

Comment
Name
Email
Website
	Add Comment

Trackback(0)

Comments (16)