Advertisement
  1. Code
  2. Flash
Code

Buttonology: A Walkthrough of Button Making Methods

by
Difficulty:IntermediateLength:MediumLanguages:

How you approach a problem is to some extent your key to accomplishing good solid work. This walkthrough will guide you in the six most commonly used methods for button creation and show you in which situations they are best put to use.


The Button Making Dilemma

Let me tell you a little story about how all of this button interaction conflict started. One day Adam and Eve were out in the Garden of Eden.

ADAM: Hey Eve, you look different today, what's wrong?
EVE: I'm really thirsty, and we don't have fresh water anymore.
ADAM: Stay right here.

Adam went to a near by vending machine, saw an apple juice box, memorized its number, inserted a coin and pressed the button! Nothing happened. There was a bug.

You see, Adam started an event that should have triggered an action. Luckily, being a well versed ActionScript programmer, he plugged his USB ActionScript compiler into the vending machine's USB ActionScript programming slot and started to debug the code.

He had a shape lying on the stage that looked like a button, and nothing else. Someone had forgotten to make the code. It was now up to him to find the most appropriate method to approach this problem and code his way to the juice box.


Old School Method

When you first open Flash 5 you're prompted to view a few tutorials if you wish. One of these tutorials teaches you how to make simple button interaction and for the most part of your ActionScript 1 and beginning 2 you follow that path.

It works something like this:

  1. Create a button symbol.
  2. Inside the symbol set the states you want the button to have.
  3. Go to the timeline where you put the button, click to select it, open up the actions and write:

Even though it's not standard practice anymore, there are a lot of designers that I know who still use this method. It's still quite useful if you're on a tight deadline, you're working on a banner restricted to Flash Player 5 or lower (yes there are still restrictions of that sort nowadays) and you have to rely on a designer to build and animate the banner. In the end all you need is a clickTag button.

Note: A clickTag is a variable that an ad host injects inside a swf object through html. It contains the url to which the banner should navigate. Check out Victor Jackson's clickTag tut for more information.

Download example 1 to see this method in action.


If I Could Just Tell the Target...

Later in your ActionScript life, when 2.0 came along, there was also the ability to associate functions to events inside MovieClip Objects. By using this method you could build your own button based on a movieclip and the best thing was that all your code could be stored in just one place. This is very useful for menus, too bad it was only made available in Flash Player 6.

Here's how that workflow looks.

  1. Create a movieclip symbol.
  2. For the states you can do whatever you want: you could add keyframes, you could create different movieclips, you could color transform them, it's up to you since you are going to have full control over the events.
  3. Give the movieclip you created an instance name, I named mine "myMovieClip".
  4. Place the movieclip on stage and in the same keyframe (different layer) add the following lines of code:

If you have a player limitation up to version 8 or you're not used to AS3 and you're building something with little interaction, this is the way to go.

Download example 2 to see this method in action.


You Can Actually Delegate

For more complex models, where the structure involves nested movieclips for instance, you can actually delegate functions and set a new scope for the function to act. This may sound confusing so just check the difference below.

As you can see there's no need to call the parent, I can just re-scope to the object. This is a fairly simple example, but you can see how this could come in handy in a more complex situation.

Download example 3 to see this method in action.


3.0

That's all very pretty, but if you have no restrictions at all concerning the player version, you should ignore all the steps above and focus on ActionScript 3.0. Not feeling comfortable with the language is no excuse, you will never feel comfortable with something unless you use it. After a few hours understanding the syntax and a few days with the AS2 to AS3 cheat sheet next to you, you will feel right at home. It doesn't need to be completely OOP class based, if you are used to timeline programming you can keep doing that. The Flash IDE will build a MainTimeline class as soon as you export your movie.

Just write this in the first frame of your FLA, consider you have a movieclip symbol on that keyframe (different layer though, just to help organization) with an instance of myMovieClip.

There are a few drawbacks to using this method though:

  • Dispersed code, like when we have too many symbols on stage and lose track of where the code is sitting for a particular object
  • Code reusability is a no-no, the only way you reuse anything is by copy-paste, and that's a bit lame isn't it?

But I must admit, I use this method way too often. Mostly for convenience, but I regret it most of the times. My advice is to program in the timeline only with banner ads and small simple mini/micro sites. Even in those cases you may want to import a slider class, a slideshow class, a tween class, a snow making class, etc. that you will build specifically for that project.

Download example 4 to see this method in action.


Full Structured Object Oriented Programming

Let's do the same with a full OOP approach. Say the designer has built the Flash file and left the graphics on stage, here's what to do.

In the Flash IDE convert the graphic to a symbol and give it an instance name. In a new AS file named Main.as write the following code:

Probably the method that causes nightmares to newcomers of the AS3 and OOP world, and probably the best method for mild-to-highly complex Flash projects.

Look at it as timeline programming with a few extra characters that will help you create a robust, reusable code. You will always know where it is, making reading and understanding your work easier.

Download example 5 to see this method in action.

Note: If the button's design is simple enough we could have built it inside the class with no need for Flash IDE and its fancy design tools. Most of the time it's just not practical.


Then "God" Created the Button Component

Back to the main story, Adam accidentally deleted the shape that someone had made as the button and since he didn't know how to use the rectangle tool to draw a new button he took the component route. Here's how he did it.

  1. He added the Button component to the library.
  2. He saved his code as MyButton.as in the same directory as his FLA file.
  3. He set the Document class in the FLA file to MyButton.

When to use this? If you're planning to build a user interface for a rich internet application and instead of using Flex you want to try out Flash, then that's the way to do it. (My advice would be to go with Flash Builder instead) or if you just need a simple UI for whatever form you're building which doesn't require much design work. Of course you can customize a button component, but that takes too long compared to building a button from scratch.

Download example 6 to see this method in action.


Conclusion

Ultimately the decision is yours. I've numbered the methods I've come to know and use throughout my Flash developing career and the opinions here mentioned are the ones I came to realize while working on different projects.

If you feel comfortable with your button making method and feel it suits you, then that's fine, as long as it works, but eventually you will come to understand why OOP structured ActionScript is a best practice. Not because it's geekier, but because it's actually easier, to write, to read and therefore to understand.

Thanks for reading, I hope you liked it, and have a great 2010!

Note: Adam managed to get hold of the apple juice box, which he gave to Eve. The rest of the tale, you probably know..

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.