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

4Oct/097

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

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

    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

    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

    Create these layers in your timelime

    The action panel (F9)

    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.

Comments (7) Trackbacks (2)
  1. I used the code above (at last I found one that works for me !!) but I still get the following error in the compiler error window:-

    The class or interface ‘MouseEvent’ could not be loaded. function mouseClick(event:MouseEvent):void {

    Although the script works from my SWF file I wondered why I still was getting the error message. Any ideas

  2. Are you using AS3 and not AS2?

  3. Very nice, gives me a lot of inspiration being right in the midst of a redesign. It’s all in the details and comment forms are definitely overlooked more often than not. Time well spent on this post.

  4. Your blog is very much worthy of a bookmark, thankshtml coding

  5. thanks for the information.,,,your site is very cool

  6. nice tutorial, definitely going to try it out.

  7. I can’t link to 2 buttons with this code
    what should i do????


Leave a comment

(required)