Why is my AS3 SimpleButton not showing?

Question

I'm very new to flash. I'm trying to show a simple button for my simple flash app (with adobe flex builder 3).

The main project file, Client2.as:

package
{
    import flash.display.Sprite;

    [SWF(width="600", height="600", frameRate="31", backgroundColor="#00FFFF")] //set project properties

    public class Client2 extends Sprite
    { 
        public function Client2() {
            trace("Client launched.");
            var loginGui:LoginInterface = new LoginInterface(); //load the login interface object
            loginGui.init(); //initialize the login interface
        }
    }
}

Then the LoginInterface.as class file:

package
{
    import flash.display.Sprite;
    import flash.display.SimpleButton;

    public class LoginInterface extends Sprite
    {
     public function LoginInterface()
     {
      trace("LoginInterface object loaded.");
     }

     public function init():void
     {
      trace("LoginInterface init method was called.");

      var myButton:SimpleButton = new SimpleButton();

      //create the look of the states
      var down:Sprite = new Sprite();
      down.graphics.lineStyle(1, 0x000000);
      down.graphics.beginFill(0xFFCC00);
      down.graphics.drawRect(10, 10, 100, 30);

      var up:Sprite = new Sprite();
      up.graphics.lineStyle(1, 0x000000);
      up.graphics.beginFill(0x0099FF);
      up.graphics.drawRect(10, 10, 100, 30);

      var over:Sprite = new Sprite();
      over.graphics.lineStyle(1, 0x000000);
      over.graphics.beginFill(0x9966FF);
      over.graphics.drawRect(10, 10, 100, 30);

      // assign the sprites
      myButton.upState = up;
      myButton.overState = over;
      myButton.downState = down;
      myButton.hitTestState = up;

      addChild(myButton);



     }
    }
}

When I run it the button is not showing. What am I doing wrong?

Answer 1

ActionScript3 graphics are based on the Display List concept. Essentially graphical elements have to be added to the display list in order to be seen.

The root node of the display list (it's actually a tree) is your main class, Client2. Consequently anything you want displayed on the screen has to be added as a child of this element like so:

addChild(loginGui);  //inside of your main class

Similarly, your buttons would have to be added to your instance of LoginInterface

addChild(myButton);  //inside of LoginInterface