Can I condense this?

programming flash
1

for the rollOver rollOut functions, in AS2 I could just run the function in the loop like this:
AS2:


    var names:Array = new Array("Video Introduction", "2008-2009 Catalog");
    for (var i = 0; i < names.length; i++) {
        this["btn" + i].txt.text = names*;
        this["btn" + i].btnbg.onRollOver = function() {
            this.alphaTo(40,0.3,"easeOutExpo");
            this._parent.arrow.slideTo(238,null,0.5,"easeOutBounce");
        };
        this["btn" + i].btnbg.onRollOut = function() {
            this.alphaTo(80,0.3,"easeOutExpo");
            this._parent.arrow.slideTo(288,null,0.5,"easeOutBounce");
        };
    }

but for AS3, the only way I know how to do it is to create a function outside of the loop like this:


function init():void
{
    var names:Array = new Array("Video Introduction", "2008-2009 Catalog");
    for (var i:uint = 0; i<2; i++)
    {
        this["btn" + i].txt.text = names*;
        this["btn" + i].txt.mouseEnabled = false;
        this["btn" + i].btnbg.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
        this["btn" + i].btnbg.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
        this["btn" + i].btnbg.buttonMode = true;
        this["btn" + i].btnbg.useHandCursor = true;
    }
}
init();

function btnOver(e:MouseEvent):void
{
    TweenLite.to(e.target,0.3,{alpha:0.4,ease:Exponential.easeOut});
    TweenLite.to(e.target.parent.arrow,0.5,{x:238,ease:Bounce.easeOut});
}

function btnOut(e:MouseEvent):void
{
    TweenLite.to(e.target,0.3,{alpha:0.8,ease:Exponential.easeOut});
    TweenLite.to(e.target.parent.arrow,0.5,{x:288,ease:Bounce.easeOut});
}

so any way to condense the as3 version or is that pretty much it?

2

That’s pretty much the idea.

3 

function init():void
{
    var names:Array = ["Video Introduction", "2008-2009 Catalog"];
    for (var i:uint = 0; i<2; i++)
    {
        this["btn" + i].txt.text = names*;
        this["btn" + i].txt.mouseEnabled = false;
        this["btn" + i].btnbg.addEventListener(MouseEvent.MOUSE_OVER, setState);
        this["btn" + i].btnbg.addEventListener(MouseEvent.MOUSE_OUT, setState);
        this["btn" + i].btnbg.buttonMode = true;
        this["btn" + i].btnbg.useHandCursor = true;
    }
}
init();

function setState (e:MouseEvent):void
{
	if (e.type == MouseEvent.MOUSE_OVER)
	{
		TweenLite.to(e.target,0.3,{alpha:0.4,ease:Exponential.easeOut});
		TweenLite.to(e.target.parent.arrow,0.5,{x:238,ease:Bounce.easeOut});
	} else if (e.type == MouseEvent.MOUSE_OUT) {
		TweenLite.to(e.target,0.3,{alpha:0.8,ease:Exponential.easeOut});
		TweenLite.to(e.target.parent.arrow,0.5,{x:288,ease:Bounce.easeOut});		
	}
}

note: using the [] syntax when creating an array is (much) faster than the literal syntax :slight_smile:

4

I kinda figured anogar that was pretty much it hehe. I do like the idea of just using one function though like you did dom. Cleaned up nicely. Thanks!

5

your wlecom

6

It’s worth nothing that despite having condensed it into a single function, you’re making it check the conditional statement every time you click on something now, which is minor, but it’s an unnecessary performance barrier just to mash those two functions together. You’re not getting anything, functionally, out of it in return.

I’m a big fan of organization and clean coding, but not at the expense of an illogical performance hit like that with no return. (I know it’s not a big hit, it’s just the principal of it.)

7

spot on Anogar

8

I use anonymous functions like that sometimes too, but I never thought about the whole closure thing, thanks for pointing that out LordMoyne

9

Technically, functions declared (using the function statement) anywhere in AS are closures, so the added benefit to the code that you posted is that the scope of the alternatively-placed function includes additional, potentially useful variables, not that closures hadn’t been created in the old code.