[Tutorial] Buttons (Beginner)

36 posts

Flag Post

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 :)

 
Flag Post

Cool. I think this topic should be stickyed. 5/5!

 
Flag Post

Cheers :D Any particular topic you’d like covered next? Otherwise I’ll just go to basic variable stuff, gradually building up to a platformer game tutorial.

 
Flag Post

Heres an idea for you, create a torturial on a character jumping. Sounds dumb but I can’t get it lol.

 
Flag Post

Only use one set of tags for the code. Using both preformat and code tags makes the font tiny :)

 
Flag Post

That explaiined why it was extremly small.

 
Flag Post

Ok, i’ll only use the “pre” tag from now on then :)

Next tutorial will be about variables and how to make a platformer game…

 
Flag Post

editundo could you please post this tutorial in the AS thread

 
Flag Post

editundo could you please post this tutorial in the AS thread


This info is fine in its own thread.

 
Flag Post

Sorry just thought that it would be easyer for all the tuts in one section to be in the same thread because browsingthe whole forum to find one tut would be annoying

 
Flag Post

It can be worse if you have tons of tutorials in one thread, and everyone is discussing every tutorial. Then things become even more out of order.

 
Flag Post

Hmm maybe if you lock it for everyone exept me from me so only i can post tuts but that way the others cant post tuts too hmm well im gonna try and figure it out i dont know i mean it works with NG

 
Flag Post

Not possible.

 
Flag Post

Yeah i guess it a too big code for something so small

 
Flag Post

I think you would need moderation powers to do something like that Nqkoi1.

 
Flag Post

I’m sorry but this button tutorial is retarded. There is a right way to make a button in AS 2.0, unfortunately this isn’t it… maybe I’ll post a better one sometime.

 
Flag Post

Well at least he’s trying :)

It would probably be better if this thread wasnt labeled as “AS2” though, since I dont really see any AS2 specific code in it.

 
Flag Post

I’m still totally lost in this tut…Even though it looks real cool and stuff…Woohoo for being confused!

 
Flag Post

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…

 
Flag Post

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.

 
Flag Post

This takes me back to about a year ago at the summer camp hahahahaaaaaaa good times tear

 
Flag Post

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.

 
Flag Post

Oh yeah, and don’t let my comments discourage you from writing more tutorials, like Coder said, at least someone’s trying to make some, so huzzah.

 
Flag Post

Well ok then, I didn’t know that :) Out of interest, how would you code a button, IndieFlashArcade?

 
Flag Post

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!