Managing Menu Buttons in Actionscript 3

One very common task in creating Flash applications is managing menu buttons. It tends to be a very repetitive business. The best approach would be to create a component with a label that you can change at runtime. But in order to create such a component first you need to understand how Flash UI Components work, and that’s not easy. But there are other, simpler approaches that you can use.

Timeline, Copy+Paste Approach

The first method is very simple and the most intuitive one. You create one button, leaving all code in the button’s timeline. Than you duplicate the symbol in the library and make the necessary changes to assets and code.

The problem here is that if you need to make any changes to the code, you have to replicate (copy+paste) the changes to each button’s timeline.

addEventListener(MouseEvent.CLICK, handleClick);

function handleClick(e:MouseEvent):void {
  // ...
}

Ups:

  • Easy to code

Downs:

  • Changes need to be replicated to every button

Base Class Approach

This is the Object-Oriented, most elegant  approach. It consists of creating a base button class that encapsulates the button functionality. In the Actionscript 2 times, that would be (oddly) enough, because you could assign that one class to all your buttons.

But that’s not a problem. In Actionscript 3, all you have to do is, for each button, create a new class that extends that one base button class and assign it to it’s respective button.

package {
  import flash.display.MovieClip;

  class BaseButton extends MovieClip {
    public function BaseButton() {
      // ...
    }
  }
}

package {
  class HomeButton extends BaseButton {
    public function HomeButton() {
      super();

      // ...
    }
  }
}

package {
  class ContactButton extends BaseButton {
    public function ContactButton() {
      super();

      // ...
    }
  }
}

Ups:

  • Object-Oriented
  • Base code is centralized in the base class
  • Particularities can be treated inside each specific class

Downs:

  • Creation of each specific class (that’s just copy+paste+rename, but if you have a lot of buttons can be a bit tiring)

Menu Controller Approach

This is a very interesting approach, not very Object-Oriented, but quite effective. It consists of putting all the buttons’ code in their parent container (usually the Menu movieclip). You use a for to iterate throw the list of buttons and manipulate them as needed.

var buttons:Array = [home, contact];

for each (var button:MovieClip in buttons) {
  button.addEventListener(MouseEvent.CLICK, handleClick);
}

function handleClick(e:MouseEvent):void {
  var button:MovieClip = e.target as MovieClip;
  // ...
}

Ups:

  • Base code is centralized

Downs:

  • Particularities of specific buttons can mess up your code (you have to use a lot of “if”s)

Button Controller Approach

The last approach is also very interesting. It consists of creating a Button Controller, a movieclip with no visual elements that contains all the button’s code. You place an instance of this controller inside each button, and inside the controller you manipulate it’s parent (the button itself).

var button:MovieClip = MovieClip(parent);

button.addEventListener(MouseEvent.CLICK, handleClick);

function handleClick(e:MouseEvent):void {
  var button:MovieClip = e.target as MovieClip;
  // ...
}

Ups:

  • Base code is centralized

Downs:

  • Particularities of specific buttons can mess up your code (you have to use a lot of “if”s)
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: