We have reduced support for legacy browsers.

What does this mean for me? You will always be able to play your favorite games on Kongregate. However, certain site features may suddenly stop working and leave you with a severely degraded experience.

What should I do? We strongly urge all our users to upgrade to modern browsers for a better experience and improved security.

Kongregate is a community-driven browser games portal with an open platform for all web games.
Get your games in front of thousands of users while monetizing through ads and virtual goods.
Learn more »

[Tutorial] Buttons (Beginner)

There aren’t enough tutorials on this site, so I’m going to write a few over the next couple of weeks, if no-one minds. I apologise in advance if any Actionscript given is all squished up and unreadable, I haven’t yet got the hang of this textile stuff…
**ANYWAYS** , todays tutorial is about **buttons**. Every Flash developer should learn about buttons, as they are incredibly useful to allow the user basic interactivity with your game or movie.
**Creating a button**
Draw something on the stage. Highlight it. Right click \> convert to symbol. In the dialogue box that comes up, select ‘button’. You’ve created a button, huzzah.
**Editing a button**
Double click on it to edit it. You’ll see that the timeline looks slightly different from the main timeline, this is because the different frames have different purposes within your button.
- Frame 1 is what will be displayed when the cursor is not touching the button
- Frame 2 is what will be displayed when the cursor hovers over the button
- Frame 3 will be displayed while the button is being pressed
- Frame 4 is the ‘solid’ area of your button. It will not be visible to the user. This frame defines how big and what shape the clickable area of the button is. If you’re unsure what it does, experiment.
Draw on the frames like you would on the main timeline. Fairly obvious :)
**Basic button actions**
This is an example of what actions might be on a button which pauses a movie:
`
on(release){
stop();
}
`
It’s simple stuff when you get the hang of it. Now to explain that code.
`on(release){` This is the ‘event handler’. It says when the actions should be triggered. In this case, it specifies that the actions should be triggered when the button is released from being clicked on. All button actions need to be contained in event handlers.
`stop();` This is the function that happens when the event is triggered. In this case, it stops the playing of the main timeline. There are thousands of different functions and operations which can be performed.
`}` This curly bracket indicates the end of a block of code. In this case, it signifies the end of the on(release) block.
So that’s that code explained. But you want to write your own, specific to what you want the button to do…
**Event Handlers**
…say when the actions should be triggered. A list of common event handlers for buttons:
- `on(release){` Triggers the actions when the button is released after being clicked
- `on(press){` Triggers the actions when the button is clicked on
- `on(releaseOutside){` Triggers the actions when the button is clicked on, and then the cursor is dragged out of the button area before being released
- `on(rollOver){` Triggers the code when the cursor touches the button
- `on(rollOut){` Triggers the code when the cursor stops touching the button
Event handlers have to have an opening curly bracket ({) after them, and a closing curly bracket (}) to show the end of the actions governed by that handler.
**Actions**
…are what happens when the button is pressed, released, touched, etc.
There are thousands of possible actions, but this is a brief list of the ones you will be most likely to use:
- `play();` Causes the main timeline to progress through the frames, i.e, play the movie
- `stop();` Causes the main timeline to pause
- `gotoAndPlay(frame);` Causes the timeline to skip to, and continue playing from, a specified frame. This can be a frame number or the name of the frame, for example, gotoAndPlay(17); or gotoAndPlay(“main\_menu”);
- `gotoAndStop(frame);` Causes the timeline to skip to and stop at a specified frame
- `stopAllSounds();` Causes all sounds to be stopped
- `startDrag();` Causes the button to ‘stick’ to the mouse cursor
- `stopDrag();` Causes the button to stop sticking to the mouse cursor
- `gotoAndPlay(scene, frame);` Causes the timeline to skip to and play from a specified frame in a specified scene. Remember, names need to be in “quotes”.
**Simple game with buttons**
So, now you’re just about ready to make a game! This will be a simple dress-up game. First, draw each item of clothing, and convert each one into a separate button. Then give each button the following Actionscript:
`
on(press){
startDrag();
}
on(release){
stopDrag();
}
`
What this does is cause the button to stick to the cursor when it is pressed, and to be dropped when it is released. This makes a simple drag-and-drop game :)

There are no right or wrong ways to make buttons, as long as they work. But this way works and I’m sticking to it.
And I assumed AS3 is completely different from AS2, which is why I said this was for AS2… it might work with AS1, I don’t know, I haven’t tried it…

There are what you call “best practices”.
This code is not AS2 though. Its actually AS1 – and some of it is the earliest AS1 ever created, as it works in Flash Player 2 (referring to the on() handlers for example). AS1 later evolved to have additional methods, as did AS2 and AS3. AS3 made the biggest jump by actually removing support for many of these previous methods.
This tutorial is suitable for beginners though, as they _can_ use it in AS1-AS2.

> And I assumed AS3 is completely different from AS2, which is why I said this was for AS2… it might work with AS1, I don’t know, I haven’t tried it…
Well, my point is that your tutorial **is** AS 1, not AS 2.
AS 2 is a lot different from this, so, like I said, you’re doing it the ‘depreciated’ way… which basically means the code is becoming obsolete. I’ll post an example when I get some time.

Here’s my short and sweet ActionScript 2.0 button tutorial. Follow these steps:
> 1) Draw something or take some text and press F8 to convert it to a MovieClip.> 2) Edit the MovieClip and create two additional keyframes on the timeline (click on frame 2, press F6, then click on frame 3 and press F6).> 3) Now create a frame label for each of the three keyframes. Name the first keyframe ‘\_up’ (without quotes), the second keyframe ‘\_over’, and the third keyframe ‘\_down’. Don’t forget to put the underscore before the name.> 4) Create a new layer and name it ‘actions’. Create two additional keyrames on the new layer, to match the keyframes on the main button layer. Open the actions window and add the
>
> `stop();` command to each frame.> 5) Now edit the images on each keyframe to match the button state for that keyframe. The up state, over state, and down state.> 6) Then, go back to your main timeline and give the button (MovieClip) itself an instance name. Call it ‘myButton’. Then add the following code to your main timeline in the actions window:
`
myButton.onPress = function():Void {
}
`
bq. 7) Now you can put an ActionScript command inside of the onPress hander you just defined for the button. The command will be invoked every time the user clicks on the MovieClip. When the user rolls their mouse over the MovieClip, it will show the ‘\_over’ frame. When they click and hold the mouse button, it will show the ‘\_down’ frame.
The way that this works is by creating this special MovieClip with the three special frame labels, and then defining any mouse event handler to the MovieClip. Only once a mouse event handler has been assigned to the clip will you be able to have the button interactivity.
So, there’s your AS 2.0 button… No need for the Button class!