actionscript-3 - AS3: One class with parameter, or two similar classes

Question

In case of creating two similar custom AS3 visual components, ex. Button, with different look, but same function, which methodology is better, more efficient from the aspect of code-execution, speed, performance?

1. Creating two, almost identical classes, where the only difference is in the visual components, so I have to write the button-controlling functions two times?
2. Creating one class, with a parameter input that defines, which kind of button I would like to have

1:

package {
            public class bigButton {
                public function bigButton() {
                    //make a bigButton
                }
            }
}

and

 package {
                public class smallButton {


                    public function smallButton() {
                        //make a smallButton
                    }
                }
 }

or

2:

package {
        public class OneKindOfButton {
            public function OneKindOfButton(thisIsBigButton:Boolean) {
                if (thisIsBigButton == true) {
                     //make it big
                } else {
                     //make it small
                }
            }
        }
}

Answer 1

I would just create one kind of button class since you can draw or add other display objects into it. You don't even need a boolean to control that. For example :

public class OneKindOfButton extends Sprite{


    public function OneKindOfButton(width:Number,height:Number) {
        create(width,height);
    }


    private function create(width:Number,height:Number):void
    {
        graphics.clear();
        graphics.beginFill(0xff0000,1.0);
        graphics.drawRect(0,0,width,height);
        graphics.endFill();
    }

}

Now you can use this class to create any size of button.

var myButton:OneKindOfButton = new OneKindOfButton(200,20);
myButton.x = 100;
myButton.y = 300;
addChild(myButton);

If you want to use images instead of drawing into the button you can do that too by just adding bitmaps into the button sprite.

Answer 2

In terms of an academic argument about the two structures (not this particular example), I'd have to argue that the first option is "better." Although opinion based posts are generally regarded as worthless by most of the SO community, I have a couple of points to bring up and would like to hear counter arguments.

For the second option of doing it, first off it makes me think that potentially there should be a base class that contains all the original functionality then a sub-class that tweaks some part of the functionality. Secondly it requires a condition in the constructor (and probably elsewhere littered throughout that class) to deal with the two scenarios the one class is handling. I think part of the issue here is that in AS3 there is a tendency to mash up all of the functionality and the view logic into one class, just because it's possible doesn't make it a good idea.

All said, I would probably go the route of having a base class that contains the functionality for the buttons, then make some sub-classes that do things different visually.

Also in terms of run-time efficiency I believe the first scenario will work out better again due to the extra conditions that will have to be checked at run-time with the second scenario. In any case, when performance and optimization is the issue it's always best to just run a test (build a little test app that makes 10,000 of each, run it a couple of times and get an average).

Answer 3

I think all these answers kind of miss the point of Flash.

Firstly, I don't think that View classes should ever have constructor arguments in Flash, because right off the bat you're making it impossible to ever use them on the timeline/stage. The Flash player can't (and shouldn't) provide these constructor arguments. The stage and timeline are Flash's biggest strength, so if you're not using them, you're wasting at least 25% of your time (the time where you're setting x, y, width, height, drawing graphics programmatically and all that unnecessary crap). Why lock yourself into a design that actively prevents you from using all the tools at your disposal?

The way I do it is I have one Class that defines the behavior of the button. Then the buttons are differentiated by having a library symbol for the big button, one for the small button, one for the button shaped like a pig, one for the button that looks like a spaceship, whatever. Any of these symbols will have that single Button Class as the Base Class (or more likely, just be defined as a Button in the library, so they subcass SimpleButton). Then I just place an instance of the library symbol on the stage and the variable in whatever parent Class is typed to my Button Class or SimpleButton.

The advantage of doing this is that the parent Classes don't need to know the specific implementation type, just the more general type. This means that the library symbols can have "export for Actionscript in frame N" unchecked, and they can just be compiled in where they are used. This means that initial load time can be reduced to the point that you may not ever need a preloader, depending on what else you have going on.

For more on this approach, see Combining the Timeline with OOP in AS3.

Answer 4

If the only difference between you two buttons is their look, but all the logic is shared, then you should definitely use only one common class.

If you're dealing with spark button, then you can simply specify a different skin for each of your instances (about spark skins).

package
{
    import spark.component.Button;

    public class MyCustomButton extends Button
    {
        static public const SMALL:String = "smallButton";
        static public const BIG:String   = "bigButton";

        static private const DEFAULT_SIZE:String = SMALL;

        public function MyCustomButton(type:String = DEFAULT_SIZE)
        {
            super();

            if (type == SMALL)
            {
                setStyle("skinClass", SmallButtonSkin);
            }
            else
            {
                setStyle("skinClass", BigButtonSkin);
            }
        }
    }
}

You then have to create to different skin classes where you'll define the visual logic of your buttons.