design-nation.blog/en

Button weirdness

The last time I had to work with buttons was at least two years ago, but today at work, we have received some graphic assets from a freelance designer, that has provided us with a lot of buttons.

These buttons have a textfield inside, and there are two different textfields, one for the "normal" state, and another for the "over state. So I wrote the following code to assign that dynamic fields text ( where "tf" is the textfield )

class net.designnation.UI.buttonHandler
{
 public static function setHandlers( instanceName: MovieClip, text: String )
 {
  instanceName[ "theText" ] = text;
  instanceName.onRollOver = function( )
  {
   this.tf.text = this[ "theText" ];
  }
  instanceName.onRollOut = function( )
  {
   this.tf.text = this[ "theText" ];
  }
 }
}

It didn't work. So, I tried to trace the buton contents:

class net.designnation.UI.buttonHandler
{
 public static function setHandlers( instanceName: MovieClip, text: String )
 {
  instanceName[ "theText" ] = text;
  instanceName.onRollOver = function( )
  {
   for ( var k in this )
   {
    trace( k );
   }
   this.tf.text = this[ "theText" ];
  }
  instanceName.onRollOut = function( )
  {
   this.tf.text = this[ "theText" ];
  }
 }
}

And here came my surprise. Maybe this is well know to all of you, but the result of the trace command was:

tabIndex
getDepth
enabled
useHandCursor
instance1

So, there was the textfield: instance2. But, when I rolled out, it traced "instance3". And when I rolled over again, it traced "instance4", and so on. It only happens when there are two different textfields. If there's only one textfield for all the button's states it always traces "instance1"

It was the first time I saw it, so it surprised me. By the way, the final solution was as easy as it seems ( althoguh it relies on something really weird ):

class net.designnation.UI.buttonHandler
{
 public static function setHandlers( instanceName: MovieClip, text: String )
 {
  instanceName[ "theText" ] = text;
  instanceName.onRollOver = function( )
  {
   for ( var k in this )
   {
    if  ( k.substring( 0,8 )== "instance" && k.text != undefined )
    {
     this[ k ].text = this[ "theText" ];
    }
   }
  }
  instanceName.onRollOut = function( )
  {
   for ( var k in this )
   {
    if  ( k.substring( 0,8 )== "instance" && k.text != undefined )
    {
     this[ k ].text = this[ "theText" ];
    }
   }
  }
 }
}

But, how much time will it work?. I don't know

At least, I've found another reason to not use buttons, and use movieclips instead