Making Buttons Work in Flash CS3 (ActionScript 3.0)

ActionScript 3.0 Flash

At the time of this writing, Flash CS3 is still brand spankin’ new on the shelves.  For some lucky folks, whose companies presumably have volume discounts with Adobe, the latest version of Flash is already in their hands — has, in fact, already been installed without any fanfare or training.  Some of these designer/developers are finding, quite suddenly, that button symbols no longer seem to work in Flash CS3 (I’ve seen quite a few panic posts already on the Adobe forums).  What gives?  Is Flash broken?  Not a bit of it!  :)   Let’s see what’s going on. 

ActionScript 3.0 is a new language

The truth of the matter is, ActionScript 3.0 is different, in many respects, from AS2 or 1.  (As it happens, it’s also the same in many respects, which can be a source of frustration for experienced users, but chin up!)  One of the most basic, familiar things people do in Flash is to assign some ActionScript to a button.  In former versions of ActionScript, this could be done in a number of ways, as explained a bit in “Museum Pieces:  on() and onClipEvent().”  In AS3, the rules have changed.  There were at least four ways to handle events in the past — on() and onClipEvent(), dot notation, addListener(), and addEventListener() — and AS3 mercifully reduces those four down to one consistent approach.  Honestly, this makes it easier.

Here’s how it goes.  Let’s say you have a button symbol on the Stage.  Select it, give it an instance name in the Property inspector.  Now that it has an instance name, it has become accessible to ActionScript, which now has a unique way of identifying it from any other objects present.  In a keyframe script (select a keyframe in line with the button, preferably a keyframe on its own layer), type the following:

myButton.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    trace("I've been clicked!");
  }
);

And that’s it.  Why not select the button itself?  What’s wrong with good old on()?  For better or worse, direct attachment of code is a thing of the past.  ActionScript 3.0 simply doesn’t support it.  In fact, you’ll notice that the Behaviors panel is dimmed when a FLA’s Publish Settings are configured for AS3.  Why?  Because Behaviors rely on on() or onClipEvent().  Change your Publish Settings to AS2 or 1, they come back.

In the above short sample code, myButton represents whatever instance name you chose for your button symbol.  If you actually used myButton, you’re good; otherwise, change the above code to match what you chose.

The classes that define button and movie clip symbols both inherit much of their functionality from a class called EventDispatcher, which provides that addEventListener() method.  This method is what “wires up” such objects to respond to events, such as a “mouse up” occurrence, where the user has clicked, then released, the mouse.  There are two required parameters (more, if you’re interested — see the EventDispatcher class entry for details), and they are this:  a) what event to listen for, and b) what function to perform when the event occurs.

In this case, we’re listening for MouseEvent.MOUSE_UP.  To see what other events are available, look up the MouseEvent class (or the Event class itself, which has many inheritors of its base functionality).  The function inside any event handler is going to receive an object of its own (here, a MouseEvent object) that gets passed in as a parameter.  In the above sample, that parameter is the arbitrarily named evt (for “event”), and that object contains a number of useful properties, including, for example, target, which refers back to the object that dispatched it.

Change that trace() statement from "I've been clicked!" to this, for example:

trace(evt.target);

… and you’ll see a reference to the button itself.  The SimpleButton class defines button symbols in AS3, so look up that class to see what further properties are available.  You could trace the button’s instance name, for example, by using this expression:

trace(evt.target.name);

… which makes sense if you consider what the expression means.  Again, when the user clicked the button and released, a MouseEvent.MOUSE_UP event was dispatched.  When that occurred, that dispatch included a MouseEvent instance as carry-on luggage.  Because of our event handler, a function received that instance (and its luggage) by way of an evt parameter.  That evt parameter is the incoming MouseEvent instance, and according to the MouseEvent documentation — make sure to click the “Show Inherited Public Properties” hyperlink under the Public Properties heading — MouseEvent instances have a target property, which points to the object that dispatched the event.  Because that object was a button symbol (an instance of the SimpleButton class), we know that any reference to it has a name property.

This differs from the way such event handling was done in AS2.  For button symbols, it went like this:

myButton.onRelease = function():Void {
  trace("I've been clicked!");
}

Notice the lack of an incoming parameter.  To refer to the button itself, from inside that function, you could use the global this property:

myButton.onRelease = function():Void {
  trace(this._name);
}

In ActionScript 2.0, the property that points to a button’s instance name is _name (with an underscore).  Same principle, different approach.

Enjoy ’em both

If the new approach flies over your head, just go to File > Publish Settings, select the Flash tab, and change the version of ActionScript back to AS2 or 1.  But I encourage you to at least take a few stabs at the new way.  As the months go by, you’re going to see plenty of AS3 stuff on the horizon.  Fortunately, Flash CS lets you take your pick of the language desired.

Leave a Reply