Tuesday 25 March 2008

Buttons in as3

The first thing i did when i opened CS3 for the first time was tried to create a button. 

I obviously tried to do it the as2 way, forgetting that most of the actionscript language had changed so i drew a object, then converted it to a button. But when i tried to add actions to it, flash said "Current selection cannot have actions applied to it.". 
What you have to do is to write the actions in the frame.
i will do a step by step tutorial, to show you how its done.
  • Open up a new Flash Actionscript 3 file in the way that i explained before.
  • Draw a button shape.
  • Highlight the button shape and press F8. A box should pop up that looks like this.                                                                                                                                                                                
  • Click on "Button" in the type section and name the button appropriately.
  • Press "OK" to continue, which should take you back to the stage where you're button is.                
  • Click on your button and look to the bottom of the screen, where the properties bar should be.                                                                                                                                                                                                                                                                                                              
  • Write an instance name in the box provided. I have called mine "buttonTest". This is important for when we do the script.
  • Now we are ready to write the Actionscript for this button. All the button is going to do is trace a message in the output panel. Make a new layer and call in "actions". To do this click on the "insert layer" button, where my cursor is and then double click on the new layer title, "Layer 2" to edit it's name.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
  • Click on the frame head of layer 2 frame one, which should be a white rectangle with a white circle in the middle, like the one in this image, and press alt+F9 to open the action panel.
  • This is where we have to start coding the button. In the actions panel that you just opened write...

    import flash.events.MouseEvent;
    buttonTest.addEventListener(MouseEvent.MOUSE_DOWN, traceFunction);
    function tracefunction(Event:MouseEvent):void{
    trace("Button Clicked")
    }


Explaining the code:-
line 1 - importing the Mouse Events
line 2 I'm adding event listeners to the buttons instance names that i have. When the mouse is touching buttonTest and it is pressed, do the traceFunction.
line 3-5 This is the traceFunction. It is a MouseEvent function that is executed when the buttonTest is pressed. When it is pressed the trace function is called which traces the message "Button Clicked" in the output panel.

  • Test your movie by pressing Command+Enter, (control+Enter on windows)
  • You should see that when you click the button a message comes up in the output panel that says "Button Clicked".
  • Thats all for the button tutorial, i will explain how to make functions in a later post.

1 comment:

Anonymous said...

There is a typo in your sample code.

When you call the function in the listener you have a capital in its name, but when you declare the function you don't have a capital in its name...

So if you test the code it doesnt work :(