Wednesday, October 22, 2008

Buttons in Adobe Flash

Well, this is my first post in this blog. In ActionScript 3 for the Adobe Flash authoring tool or software, many commands have remained the same as in ActionScript 2, such as stop(); and play(); However, many things have also changed, greatly. One of the most noticeable changes in ActionScript 3 is how buttons work.

I will show you how to make clickable buttons in ActionScript 3 for Adobe Flash the easy way. Previously, in ActionScript 2, to create a button to play the flash movie, one would simply assign the code to a button like this:


on(release) {
play();
}

As already mentioned earlier, things have changed in ActionScript 3. It is no longer possible to directly assign actions to buttons or movie clips anymore. Instead, everything is written in the frames in the timeline, and from there, everything is controlled via instance names. This helps keep code a bit more organized, avoiding the need to go button hunting or movie clip hunting if modifications are required later on.

To make a button like the previous one but in ActionScript 3, follow these steps:

1) Create a button(Insert -> New Symbol -> Button), and give it a generic symbol name, like, "MyButton", which is how it will appear in the library.

2) Place said button in the frame where it will appear. Click it, and in properties (ussually in the bottom of the screen, but not always), give it an instance name. It has to be different from the symbol name mentioned above. Lets name it "startbutton".

3) In the timeline, in the same frame where the button appears, we use this actionscript.


function start_my_movie(evt:MouseEvent) {
play();
}


startbutton.addEventListener(MouseEvent.MOUSE_UP, start_my_movie);


Thats it. We have created a button in ActionScript 3 that, upon click, will issue a play() commands. What we did, essentially, was create a function which receives a MouseEvent as parameter. Inside this function, we issued a play() command. Here you can add any code you want or need. After creating the funcion, we added it to the event listener (see that we passed the funcion name to it?)

If you want t create more buttons that do other different things, just create the respective functions as shown, and add the function names as shown, as many times as it is needed.