design-nation.blog/es

Las rarezas de los botones

Hacía aproximadamente un par de años que no tenía que vérmelas con un botón, pero ayer en el curro recibimos una avalancha de elementos gráficos de un freelance, entre otros una tacada de botones.

Esos botones deben presentar un texto dinámico, y contienen dos campos de texto distintos. Uno para el estado normal, y otro para el rollover. Así que allá que me lancé

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" ];
  }
 }
}

No funcionó. Así que intenté tracear el contenido del botón:

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" ];
  }
 }
}

Y aquí llegó la sorpresa. En el primer rollover la traza fue:

tabIndex
getDepth
enabled
useHandCursor
instance2

Pero en el rollout, instance2 cambió a instance3. Y en el siguiente rollover a instance4, y en el rollout instance5, y así sucesivamente.La primera vez que veía algo parecido, aunque supongo que para muchos de vosotros no será ninguna novedad. ¿La solución?: pues nada elegante, ya que se basa precisamente en ese comportamiento tan extraño:

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" ];
    }
   }
  }
 }
}

¿Durante cuánto tiempo funcionará? Pues no lo sé, la verdad.

Una razón más para no volver a utilizar botones, y hacerlo todo con movieclips