[how to] crear un botón con AS3

Hoy me han preguntado cuál es la mejor manera de crear un botón con AS3.
Existen varias soluciones extendiendo directamente de la clase flash.display.Sprite, pero si queremos sacar provecho de la nueva arquitectura, la mejor solución es heredar de la clase flash.display.SimpleButton.
Un ejemplo:

/com/joangarnet/controls/ButtonState.as

PLAIN TEXT
Actionscript:
  1. package com.joangarnet.controls
  2. {
  3.     import flash.display.Sprite;
  4.     import flash.text.TextField;
  5.     import flash.text.TextFieldAutoSize;
  6.     import flash.text.TextFormat;
  7.     import flash.display.Shape;
  8.  
  9.     internal class ButtonState extends Sprite
  10.     {
  11.         private var btnLabel:TextField;
  12.         public function ButtonState( color:uint, btnLabelText:String
  13.         {
  14.             btnLabel = new TextField ();
  15.             btnLabel.text = btnLabelText;
  16.             btnLabel.x = 5;
  17.             btnLabel.autoSize = TextFieldAutoSize.LEFT;
  18.  
  19.             var format:TextFormat = new TextFormat ("Verdana");
  20.             format.size = 10;
  21.             btnLabel.setTextFormat ( format );
  22.  
  23.             var btnWidth:Number = btnLabel.textWidth + 10;
  24.  
  25.             var bkground:Shape = new Shape ();
  26.             bkground.graphics.beginFill ( color );
  27.             bkground.graphics.lineStyle ( .25, 0x333333, 1, true );
  28.             bkground.graphics.drawRect ( 0, 0, btnWidth, 18 );
  29.             addChild ( bkground );
  30.             addChild ( btnLabel );
  31.         }
  32.     }
  33. }

/com/joangarnet/controls/Button.as

PLAIN TEXT
Actionscript:
  1. package com.joangarnet.controls
  2. {
  3.     import flash.display.SimpleButton;
  4.  
  5.     public class Button extends SimpleButton
  6.     {
  7.         public function Button ( btnLabelText:String )
  8.         {
  9.             upState = new ButtonState (0xcccccc, btnLabelText);
  10.             overState = new ButtonState (0xbbbbbb,btnLabelText);
  11.             downState = new ButtonState (0xaaaaaa, btnLabelText);
  12.             hitTestState = upState;
  13.         }
  14.     }
  15. }

/com/joangarnet/controls/ButtonBitmap.as

PLAIN TEXT
Actionscript:
  1. package com.joangarnet.controls
  2. {
  3.     import flash.display.SimpleButton;
  4.     import flash.display.DisplayObject;
  5.  
  6.     public class ButtonBitmap extends SimpleButton
  7.     {
  8.         [Embed(source="upStateBitMap.png")]
  9.         private var upStateBitMap:Class;
  10.  
  11.         [Embed(source="overStateBitMap.png")]
  12.         private var overStateBitMap:Class;
  13.  
  14.         [Embed(source="downStateBitMap.png")]
  15.         private var downStateBitMap:Class;
  16.  
  17.         public function ButtonBitmap ()
  18.         {
  19.             upState = new upStateBitMap() as DisplayObject;
  20.             overState = new overStateBitMap() as DisplayObject;
  21.             downState = new downStateBitMap() as DisplayObject;
  22.             hitTestState = upState;
  23.         }
  24.     }
  25. }

EjemploBoton.as

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import flash.display.Sprite;
  4.     import com.joangarnet.controls.Button;
  5.     import com.joangarnet.controls.ButtonBitmap;
  6.     import flash.display.StageAlign;
  7.     import flash.display.StageScaleMode;
  8.  
  9.     public class EjemploBoton extends Sprite
  10.     {
  11.         public function EjemploBoton()
  12.         {
  13.             stage.align = StageAlign.TOP_LEFT;
  14.             stage.scaleMode = StageScaleMode.NO_SCALE;
  15.             var btn:Button = new Button( "Soy un botón" );
  16.             btn.x = 25;
  17.             btn.y = 25;
  18.             addChild( btn )
  19.  
  20.             var btn2:ButtonBitmap = new ButtonBitmap();
  21.             btn2.x = 25;
  22.             btn2.y = 75;
  23.             addChild( btn2 )
  24.         }
  25.     }
  26. }

Podemos asignar cualquier tipo de DisplayObject como estado del botón, como en el ejemplo de ButtonBitmap, que asignamos un *.png embedido.

Ejemplo botón AS3 (3236) - 50.55 KB
zip
May 23, 2007 | Filed Under ActionScript, Flash general, How To's 

Comments

21 Responses to “[how to] crear un botón con AS3”

  1. morpheo on May 23rd, 2007 15:30

    Gracias. Me ha resultado muy util. Enhorabuena por el blog.

  2. nacho on May 23rd, 2007 18:45

    jooder y todo esto para un botón :-)

    cada vez me da más pereza hacer algo en AS3
    y eso que me encanta la programación orientada a objetos de verdad y las cosas bien estructuradas, peeeeero

    buf

  3. Joan Garnet on May 23rd, 2007 21:06

    Bueno, siempre nos quedará Flash :)
    Supongo que en el CS3 deben haber opciones para creación de botones de la misma forma como se ha hecho hasta ahora.
    saludos!

  4. blog.2grafic.com » Blog Archive » Tutorial para crear botones desde AS3 on May 25th, 2007 18:06

    [...] Excelente tutorial en joangarnet sobre cuál es la mejor manera de crear un botón con AS3. [...]

  5. nacho on May 28th, 2007 09:16

    si, en CS3 se puede cambiar perfectamente entre actionscript 1, 2 y 3... como siempre

    el interface es una maravilla, merece la pena el cambio

  6. Daniel H on June 1st, 2007 20:30

    :O !!!!! todo eso para crear un boton!!!!! creo que ahora si el AS3 se me va cada vez mas de las manos, ni modo mejor me dedicare a diseñar solo interfaces en Photoshop....:(

    Eso si ... es un buen tutorial

  7. Pablo Mercado on August 29th, 2007 23:56

    Muuuuy bien, a todos los que no sabíamos más que lo básico en AS2 y queremos aprender AS3 nos viene de perlas.

  8. Edwin Fuentes on September 19th, 2007 16:11

    Gracias por el tutorial, esta bien explicado.
    Solo tengo una duda.
    Si hago varios botones, como se les cambia la imagen?
    porque por lo que veo, no hay opciones para cambiarla.

  9. edgar on November 27th, 2007 20:28

    perdón por no entender pero me puedes explicar por ejemplo mi archivo se llama calendario.pdf

  10. edgar on November 27th, 2007 20:29

    en la acción donde lo sustituyo

  11. luis on May 4th, 2008 18:29

    mira, creo que lo complicaste mucho como para una serie de botones

  12. juan on August 25th, 2008 23:57

    Concuerdo con el comentario anterior, muy mal explicado y demasiada complejidad inecesaria.

  13. Joan Garnet on August 28th, 2008 08:53

    @luis: No es que lo haya complicado, es que AS3 es así... más complejo.

    @juan: Si me argumentas tu comentario te prometo que lo tomaré en cuenta.
    Si no lo haces entiendo que la frustración puede causar enfado. Te perdono. XD

  14. tano on September 22nd, 2008 23:33

    Me parece bueno sin embargo no puedo bajar los ejemplos, estoy empesando y serian de gran ayuda, gracias

  15. Joan Garnet on September 22nd, 2008 23:45

    Ups :S
    por alguna razón había desaparecido la carpeta de uploads...
    por suerte tenía un backup :)

    Gracias por reportar!

  16. ale on September 29th, 2008 02:44

    a ver si me das una mano, yo veo muy inteligente el codigo que haces, igualmente me cuesta un poco la programación orientada a objetos, soy de la vieja escuela, como podrias pasarle por parametros que cuando hagan el over de ese boton creado dinamicamente se ejecute el over de otro que ya existe o que cambie el color de un objeto grafico, se puede hacer algo asi ? el ejemplo mio es de un mapa, yo quiero que en el rollover del boton creado me pinte por ejemplo una provincia.
    Gracias.

  17. Joan Garnet on October 3rd, 2008 09:21

    Hola, sería así:

    btn.addEventListener( MouseEvent.ROLL_OVER, rollOverHandler )
    btn2.addEventListener( MouseEvent.ROLL_OVER, rollOverHandler2 )
    function rollOverHandler( event:MouseEvent ):void{
    trace( "over btn" )
    var evt:MouseEvent = new MouseEvent(MouseEvent.ROLL_OVER);
    btn2.dispatchEvent( evt );
    }
    function rollOverHandler2( event:MouseEvent ):void{
    trace( "over btn2" )
    }

    Si quieres que además de ejecutarse el evento se pinte el estado deberías hacer que el botón fuera un MovieClip con los n estados que necesites (up, over, down por ejemplo) definidos en distintos frames y en el segundo roll over hacer algo así:

    function rollOverHandler2( event:MouseEvent ):void{
    trace( "over btn2" );
    btn2.gotoAndStop( "over" );
    }

    Saludos!

  18. Ronalds on January 21st, 2009 05:03

    Pero esto del as3 hasta cierto punto como q ya se pasa de complicarse la vida, ya q en as2 con un par de lineas tienes un boton, pero bueno talvez la ignorancia sea atrevida...

  19. Cuervo on February 2nd, 2009 09:26

    Yo siempre he respetado la opinion de los demas pero solo les digo a las personas que dicen que hacer botones ocualquier otro objeto en AS3 es muy complicado les digo en esta vida lo que vale la pena es complicado y hacer objetos dinamicamente vale la pena si de flash se esta hablando pues reduce mucho el tamaño de tu swf y si utilizas xml o rss para crear tus objetos puedes hacer una aplicacion compleja y que el no va a ser muy pesada para el navegador, pues muchos hablan de la usabilidad y este tipo de trabajos resuelven en gran medida ese problema, excelente trabajo amigo sigue asi este tipo de trabajos tienen gran demanda si le das un uso adecuado, felicidades.

  20. christian on May 8th, 2009 06:47

    Me parece perfecto, pero no se olviden que hay muchas formas de hacer un boton.
    Me parece genial esta forma; por que asi aprendes más, aprendes nuevas técnicas, de esta forma te ayuda a resolver otros problemas....

    buen aporte.. gracias totales

  21. David on May 23rd, 2009 17:08

    Hola Joan, estoy probando tu ejemplo porque me parece muy bueno y lo que no se es como Linkar desde flash la clase upStateBitmap ya que cuando ejecuto el programa en flash cs3 me da el siguiente error "Se intentó crear una instancia en un tipo no constructor." Solo me pasa con el boton de las imagenes. Ya que he rebisado el codigo y lo que no entiende justamente son las funciones constructoras
    upState = new upStateBitMap() as DisplayObject;
    overState = new overStateBitMap() as DisplayObject;
    downState = new downStateBitMap() as DisplayObject;

    Me puedes echar una mano, porque el archivo en cs3 no lo tendras, para ver si hay que linkar los png con alguna clase que cuelgue de displayObject o algo parecido ....

Leave a Reply