La Clase SimpleButton de Actionscript 3

La nueva clase simpleButton de actionscript 3 permite crear un simbolo de botón mediante código.

Los objetos creados con la clase simpleButton contienen 4 propiedades que hacen referencia a los 3 estados del botón: normal, sobre y presionado, y a la zona activa del botón. Estos estados sería los mismos que los que tienen los botones creados hasta ahora desde Flash:


A la hora de crear la instancia de la clase SimpleButton asignaremos los MovieClips que servirán para mostrar estos estados del botón:

Código :

var boton:SimpleButton = new SimpleButton();
boton.upState = up;
boton.overState = over;
boton.downState = down;
boton.hitTestState = hit;
boton.useHandCursor = true;
this.addChild(boton);

Donde up, over, down, hit serían MovieClips creados dinámicamente, por ejemplo, de la siguiente manera:

Código :

var up:Sprite = new Sprite();
up.graphics.lineStyle(3, 0x000000);
up.graphics.beginFill(0xFF9900);
up.graphics.drawRect(0, 0, 100, 30);

Una muestra sencilla de un boton creado con la clase SimpleButton dentro de una clase AS3 sería la siguiente:

Código :

package
{
import flash.display.Sprite;
import flash.display.SimpleButton;
//----------------------------
   public class botonSimple extends Sprite {
      private var ruta:Sprite
      private var boton:SimpleButton = new SimpleButton;
      //----------------------------
      public function botonSimple(queRuta,queX,queY) {
         ruta = queRuta
         boton.upState = creaSprite(3,0x000000,0xFF9900,100,30);
         boton.overState = creaSprite(3,0x000000,0xFFCC00,100,30);
         boton.downState = creaSprite(3,0x000000,0xFFCC99,100,30);
         boton.hitTestState = boton.upState;
         boton.useHandCursor = true;
         boton.x = queX         
         boton.y = queY
         ruta.addChild(boton);
      }
      //----------------------------
      private function creaSprite(lin_grosor, lin_color, relleno_color, ancho, alto):Sprite {
         var sprite:Sprite = new Sprite();
         sprite.graphics.lineStyle(lin_grosor, lin_color);
         sprite.graphics.beginFill(relleno_color);
         sprite.graphics.drawRect(0, 0, ancho, alto);
         return sprite;
      }
   }
}

Este código debe ir colocado dentro de un archivo .AS, junto a nuestro archivo .FLA o dentro de nuestra carpeta de clases AS3.

Para crear el botón colocaremos el siguiente código en nuestra película:

Código :

import botonSimple
var boton1:botonSimple = new botonSimple(this,50,100);

El resultado sería un botón como este:

Este es un ejemplo muy simple, en el que solo pasamos como parámetro al crear el botón la posición X y Y. Lo interesante será añadir funciones a la clase que nos permitan modificar los parametros (color, grueso, tamaño..) de los Sprites del botón desde fuera de la clase, y que estos Sprites sean más elaborados (con texto, efectos, animaciones...)

 

Tweet