Am I writing AS3 the right way?

Question

I'm very new to flash and actionscript 3. I've been reading a lot about it and this is also my first aprouch on object oriented programming.

So far, I created an application with a login button, that's all. However, I would like to know what kind of things I am doing wrong or should be doing different (or better). I am using Adobe Flex Builder 3.

The main actionscript file is Client2.as:

package
{
    //import required libraries
    import flash.display.Sprite;

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

    //launch main class
    public class Client2 extends Sprite
    { 
        public function Client2() { //the constructor
            trace("Client launched.");
            var loginGui:LoginInterface = new LoginInterface(); //load the login interface object
            loginGui.init(); //initialize the login interface (load it)
            addChild(loginGui); //add login gui to the display tree
        }
    }
}

It is loading the login interface object. Is that a good thing, and am I doing it the right way?

Then there's the LoginInterface.as class file:

package
{
    //import required libraries
    import flash.display.Sprite;

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

     public function init():void //initialize the login interface (load it)
     {
      trace("LoginInterface init method was called.");
      var loginButton:CustomButton = new CustomButton(300, 300, 100, 30, 3, 18, "Login!"); //create a new custom button
      addChild(loginButton); //add the custom button to the display tree
     }
    }
}

What about that? Any comments? To make the creation of simple buttons a bit easier, I then created another class file called CustomButton.as -->

package
{
    import flash.display.SimpleButton;
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;

    public class CustomButton extends Sprite
    {
     public function CustomButton(xLoc:int, yLoc:int, width:int, height:int, iLabelOffset:int, fontsize:uint, label:String)
     {
      //create new simple button instance
      var myButton:SimpleButton = new SimpleButton();
      //create the look of the states
      var normal:Sprite = new Sprite();
      normal.graphics.lineStyle(1, 0x000000);
      normal.graphics.beginFill(0x6D7B8D);
      normal.graphics.drawRect(xLoc, yLoc, width, height);
      //the mouseover sprite
      var over:Sprite = new Sprite();
      over.graphics.lineStyle(1, 0x000000);
      over.graphics.beginFill(0x616D7E);
      over.graphics.drawRect(xLoc, yLoc, width, height);
      // assign the sprites
      myButton.upState = normal;
      myButton.downState = normal;
      myButton.hitTestState = normal;
      myButton.overState = over;
      //add the button to the display tree
      addChild(myButton);

      //create button label
      var tText:TextField = new TextField();
      tText.mouseEnabled = false,
            tText.x = xLoc;
            tText.y = yLoc + iLabelOffset;
            tText.width = width;
            tText.selectable = false
            var Format:TextFormat = new TextFormat();
            Format.font = "Arial";
            Format.color = 0x000000;
            Format.size = fontsize;
            Format.bold = false;
            Format.align = TextFormatAlign.CENTER;
            tText.defaultTextFormat = Format;
            tText.text = label;
            addChild(tText)
     }
    }
}

Is there anything to comment on this? I am sure that I'm doing a lot of things wrong, maybe I didn't really get the whole object oriented thing? Also, I have a bad feeling about the way I am using the "extends ..." after a class declaration, mainly because I'm just using Sprite all the time and don't really understand why or what it does (having trouble finding out on the internet aswell). Another thing I am unsure about is the naming of variables in AS3. Should I really be using names such as xLoc, or iLabelOffset? I think I am not being very consistent in my variable naming atleast?

I hope someone can give me a push to a better track than the one I am on now, as I am sure that I should improve my AS3 coding before I continue working on this beast.

Thanks a lot.

Answer 1

My opinion:

A class called Client2 is probably a bad naming choice. Client2 isn't telling me much. How much will it tell you in a year's time?

In CustomButton, initialization is taken care of in the constructor. In LoginInterface, using an instance of the class requires an explicit call to init(). Easy to forget and unnecessary. Unless there's a good reason not to, call init from the constructor.

What does iLabelOffset mean? better to use a less confusing name in a parameter list.

The parameter list of the CustomButton constructor is pretty long. It's not necessary to pass in the x and y. Sprite has an x and y property already, so put everything back to a zero offset and manipulate the x and y properties of the CustomButton once it's constructed.

Of the remaining parameters to the CustomButton constructor, consider reordering them so that you can provide default parameters (which can only go at the end of the parameter list). labelOffset and fontSize seem like good candidates.

Keep function size small by removing repeated code. Create a function to create the button state Sprites that takes a color in its parameters (or better yet, move this functionality into a new type of Sprite derived class), and also add a createLabel function so that you can move that code out of the constructor. Your code will become easier to read and maintain if you try to keep function size small. It also means you have to write less comments ;-)

Answer 2

Spender hit the nail on the head. Those are definitely the issues that are raised when I looked over your code. The things he mentioned are not nessesarly Actionscript issues, (issue's not quite the right word, perhaps "areas to note"), these are issues general to all programing languages. Descriptive naming for example is extremely important.

There are few books that focus on this side of programming, and even fewer that do it well. I would highly recommend picking up the following two books if you want to grow more in this area, (I'll recommend it even if you don't want too :)

Code Complete

The pragmatic programmer

There both books that every programmer should read, so check them out. You're code from an Actionscript point of view is fine, but that's just syntax. It's important to note that these skill will never develop unless you actually write code, so by all means "continue working on this beast" and the rest will follow suit.

Answer 3

Just as a matter of style, I like to declare my variables outside of the constructor. It helps me to feel that I won't have any surprises with public vs private or scope. Also notice the added white space, which can improve readability.

public class CustomButton extends Sprite
{
    private var myButton:SimpleButton;
    private var normal:Sprite;
    private var over:Sprite;
    // etc ... 

    public function CustomButton(xLoc:int, yLoc:int, width:int, height:int, iLabelOffset:int, fontsize:uint, label:String)
    {
            //create new simple button instance
            myButton = new SimpleButton();

            //create the look of the states
            normal = new Sprite();
            normal.graphics.lineStyle(1, 0x000000);
            normal.graphics.beginFill(0x6D7B8D);
            normal.graphics.drawRect(xLoc, yLoc, width, height);

            //the mouseover sprite
            over = new Sprite();
            over.graphics.lineStyle(1, 0x000000);
            over.graphics.beginFill(0x616D7E);
            over.graphics.drawRect(xLoc, yLoc, width, height);

            // etc ...