flash interactivity_simplebutton

Interactivity is one of the major forces of Flash player. We have always been able to quickly manipulate a whole range of objects reactive to the mouse, keyboard or other input device. ActionScript 3 adds more features to this interactivity that we will now investigate.

As we saw in the articles regarding Symbols, the SimpleButton class represents button type symbols in ActionScript 3. This class proves to be very practical by offering an advanced management of buttons created in the author environment or by programming.

We should consider the SimpleButton object as a button made up of 4 DisplayObjects assigned to each one of its states. Each one of them is accessible via properties, for example:

• SimpleButton.upState
• SimpleButton.overState
• SimpleButton.downState
• SimpleButton.hitTestState

To familiarise ourselves with this new class we will create a simple button then using it we will build a dynamic menu.

In a new Flash CS3 document we create a button symbol which is added to the library:

Then we define an associated Button class using the Linking Properties panel. By defining an associated class we can instantiate our button at a later date through programming:

We place an occurrence of it on the main timeline and give it the instance name myButton. Each property relative to the button returns a flash.display.Shape object type:

/*displays :
[object Shape]
[object Shape]
[object Shape]
[object Shape]
*/
trace( myButton.upState );
trace( myButton.overState );
trace( myButton.downState );
trace( myButton.hitTestState );

Each state can be defined by any DisplayObject object type. When we create a button in the author environment and that simple shape is in the upState we get a Shape object for each state. If we have created a clip for the upstate we would get a flash.display.MovieClip object type.

The following image illustrates the correspondence between each state and property:

It was previously impossible to dynamically access the different button states. We will see later in the article that a button, as well as its states and associated sounds, can be entirely created or defined through programming. We will come back shortly to the other new things brought to the SimpleButton class.

To graphically enrich a button we need to understand how it works. Let’s look at how to decorate our button in order to render it usable by our menu.

A button generally isn’t restricted to just being a clickable shape, a text or an animation. Before starting the code we should know that the SimpleButton class is an exceptional class. We could think that it is inherited from the DisplayObjectContainer but there is no inheritance.

The SimpleButton class is inherited from the InteractiveObject class and cannot add content through traditional methods such addChild, addChildAt etc.

Only the upstate, downState, overState and hitTestState allow you to add and access content of a SimpleButton instance.

The only way to delete a button state is to pass the value null to a button state:

// delete the downState
myButton.downState = null;

If we test the previous code we see that the button no longer has a downState when we click on it. To add a caption to our instance of SimpleButton we have to add a textfield to each graphic object with a state. If we directly add a TextField object to one of the states we replace it:

// creation of textfield being used as a caption
var myCaption:TextField = new TextField();
// we allocate the content
myCaption.text = "Button Caption";
// we make the caption a state of the button
myButton.upState = myCaption;

By testing the previous code, we get a clickable button made up of a caption in an upstate.

When we hover over the button, the three other states are kept, only the upstate is replaced. This behavior teaches us that even if a state was defined in the author environment, the player copies the upState for each button state. If we alter a state the others continue to function.

It is not the result that we had anticipated; we will need to use another technique. The problem comes from the fact that we add a textfield to an object serving as a state but we replace a state by a textfield. In order to get what we want we go into the author environment and convert the upState into a clip and overlay a textfield to which we give the occurrence name myCaption.

We should get a clip positioned on the upState with a textfield overlaid as illustrated above.

If we target the upState of our occurrence we get our clip that has just been created:

// recuperation of the clip positioned in the upState
// displays : [object MovieClip]
trace( myButton.upState );

Then we target the textfield by the traditional pointer syntax:

// variable referering to the clip used for the upState
var upState:MovieClip = MovieClip ( myButton.upState );
// allocation of content
upState.myCaption.text = "My caption";

We could be tempted to give an instance name to a clip positioned on the upState but remember that only the upState, downState, overState and hitTestState properties allow you to access different states.

Even if our overlaid clip was called myOverlaidClip the following code would come back as undefined:

// displays : undefined
trace( myButton.myOverlaidClip );

The Flash player by default duplicates the upState for each state on compilation. That guarantees that when a state has been modified on execution, like with the input of content in a textfield, the other states don’t show any modification.

When we wish to have a single global state on a button we trick the player by making our clip use the upState for each state:

// variable referencing the clip used for the upState
var upState:MovieClip = MovieClip ( myButton.upState );
// input of text
upState.myCaption.text = "My caption";
// modification for all states
myButton.upState = upState;
myButton.downState = upState
myButton.overState = upState
myButton.hitTestState = upState

We get the following result:

Now our button symbol has been enhanced we can now integrate it into a menu.

Worth remembering

• The SimpleButton class is an exceptional class and doesn’t inherit the DisplayObjectContainer class
• Each state of a SimpleButton is defined by four properties: upstate, overstate, downstate and hitTestState.