Bluepearl Blog – Web Design Tutorials for vBulletin, Invision, XenForo, HTML, CSS & jQuery

Actionscript 3.0 for a button in Flash CS3 and CS4

Recently i have been using Adobe Flash CS4 and i must say i am really liking it!! Especially the new tweening and animation, makes life alot easier.

I had to create a button in Actionscript 3.0 today and had some problems getting the button to work.. the actionscript for a button since actionscript 2.0 has changed. For starters you need to give the button an instance name by right clicking the button on the stage and then going to the the properties window you can enter the instance name like in the image below.

button instance for flash CS4

So to create a button in Flash CS3 and CS4 with actionscript 3.0 please follow these steps.

1. Create a button, for example create a box using the rectangle tool then right click the box and select covert to symbol then select type as Button, then press OK.
   

   Simple button in flash CS4

2. Select the button and then goto the properties window on the right side of the screen. Give the button an instance name of My_Button.
   

   The button instance name

3. Create a new layer above your button layer in the timeline called actions. Select the first frame in the actions layer and bring up your actions panel by either going to window -> actions or by pressing F9 on your keyboard.
   

   Create these layers in your timelime

   

   The action panel (F9)

   This is what the action panel looks like
4. In the actions panel enter the Actionscript 3.0 below.

My_Button.addEventListener(MouseEvent.MOUSE_DOWN, mouseClick);

function mouseClick(event:MouseEvent):void {
navigateToURL(new URLRequest("http://www.bluepearl-design.com/"));
}

The Actionscript above will open a new window to www.bluepearl-design.com when clicked, if you prefer the link to open in the same window use this code below:

My_Button.addEventListener(MouseEvent.MOUSE_DOWN, mouseClick);

function mouseClick(event:MouseEvent):void {
navigateToURL(new URLRequest("http://www.bluepearl-design.com/"), "_self");
}

You can also have the button use a timeline control.

My_Button.addEventListener(MouseEvent.MOUSE_DOWN, mouseClick);

function mouseClick(event:MouseEvent):void {
gotoAndPlay(2);
}

And that's about it on how to create a simple clickable button in Actionscript 3.0, test the demo out below.