In this tutorial we will discuss about, How to create a simple button in flash. This tutorial covers about rollover effects and opens a web page when the user clicks on the button.

Output:


Download Source file

Step 1: Create a new Flash document. (File -> New -> Flash Document)

Step 2: Let us change the dimension of the flash document.

Go to Windows -> Properties -> Properties (or) Press Ctrl + F3
Click on the size button to change the dimension.

Let us change width to 100px and height to 100px.


Step 3: Now the board is ready, lets get started to design a simple flash button.

Select the Oval tool, which is available on the Tools panel on the left side (or) simple press O to select the oval tool.

Select any color for the circle you want, Stroke color is for the outline of the circle and Fill color is for the color inside the circle. After you have selected the colors for the circle.

Draw a circle on the board.

Step 4: Now select the Selection Tool which is available in Tools panel (or) press V to select it.

Now right click on the circle drawn on the board, select convert to symbol option.

Step 5: Give a name to the button, In this case I have given "button" as the name.
Select Button in the Type option.

Now we have created a button, now he have to add rollover effect to the button.
You can check quickly by pressing Ctrl + Enter, the output screen loads up. Rollover the mouse on the circle you can see the click able hand.

Let us add Rollover effect to the button.

Step 6: Now go to the flash board. Double click on the button we have created.
Now you are inside the button. On the frames at the top you can see UP, Over, Down, Hit frames.

Step 7: In the UP frame we already have the circle button. Press Ctrl + A and press Ctrl + C to copy the circle

Step 8: Over frame shows up when the user rolls mouse over the button.
Now right click on the Over frame and select Convert to Blank Keyframes.
Right click on the flash board and select Paste in place option, to paste the circle.
Click the Fill part of the circle and change the color.

Step 9: Down frame shows up when the user presses the mouse the button.
Now again right click on the flash board and select paste in place option, to paste the circle. Do not concentrate too much on this frame, user can not visually see this frame because mouse click happens in a eye blink.

Step 10: Hit frame refers to which part of your button can be clicked.
Again right click on the flash board and select paste in place option, to paste the circle.

At top of the Time line, click Scene 1 to move to out of the button.

You are almost done making a simple button. Now press Ctrl + F to test the button.

Now we have to add actionscript code to the button, so that when the user clicks on the button we can go that particular web page.

Step 11: Now left click on the flash button, press F9 to open the actionscript window.

Copy the code below and paste it on the actionscript window.



on (release) {
getURL('http://www.getw3help.com', '_blank');
}



Change the value of the URL, to your desired URL. _blank is used to open the URL in a new window or you can use _self to open the URL in the same window.

Labels: ActionScript 2, Flash, Flash Basics, Flash Buttons, Tutorials

Post a Comment

Thanks!!
Nice useful tutorial.

By  karthik, at May 22, 2008 10:13 AM  

good work

By  rajeswari, at May 27, 2008 2:03 AM  

@ rajeswari - Thanks
@ karthik - Thanks

By  makubex, at May 27, 2008 5:32 AM  

It was really nice...i made the rollover button very easily with explanatory tutorial...but when i press F9 and enter the script it says it has error<------1087: Syntax error: extra characters found after end of program.-----> and i also want to know how to save the script(like there is no button to save or anything like that)...so i request you to post screenshots of inputing scripts in flash[I am using flash cs3 Proffesional] on your website.....By the thanx for helping me create the rollover button

By  doeacc, at June 22, 2008 3:20 AM  

@ doeacc:
Thanks for comment.
Left click on the button and press F9. Actionscript window will open, copy and paste the code in it.
There is no need save the actionscript, its part of the flash itself. It gets saved along with flash.
and again press F9 to close the actionscript window.
I hope this helps. :)

By  makubex, at June 22, 2008 9:09 AM  

Hi, again!
I'm really enjoying myself here! :-)
No problems so far, as your step by step explanation is really great! I even can work together with my kids, so simple it is. TVM
rosariosirgado@hotmail.com

By  R0zZ_w€l£, at June 29, 2008 9:58 AM  

keep getting this error message:

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

Total ActionScript Errors: 1 Reported Errors: 1
SL

By  s, at September 14, 2008 2:33 PM  

In Falsh pro 8 keep getting this error message:

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

Total ActionScript Errors: 1 Reported Errors: 1


SL

By  s, at September 14, 2008 2:35 PM  

thank you so much.. trying to learn, and you just hit the nail on the head for me.

By  jay1275, at September 30, 2008 9:02 PM  

when i press f9 to put in the action script it says current selection annot have actions applied to it.

By  ozzi, at October 23, 2008 7:09 PM  

hi ozzi,
Change the Actionscript version from 3 to 2.
Go to publish settings change Actionscript 3 to Actionscript 2.

By  makubex, at October 25, 2008 3:12 AM  

I get my button to work when I hit play in the timeline (with simple buttons enabled) but when I go to publish it, the button doesn't work. I have two buttons in two different scenes - one jumping from the first scene to the second and the other going to a website. Any thoughts?

By  peter, at November 3, 2008 10:13 AM  

Just as a follow up to the previous note, I am using CS4 on a Mac.

By  peter, at November 3, 2008 10:16 AM  

Hi Peter,
have you set your actionscript settings to 2.0?

By  makubex, at November 4, 2008 8:59 AM