Question

I am working on a class for building drop down buttons dynamically. Here is excerpt one of my code (located in the Class constructor):

_button.onRollOver = function()
            {
                this.gotoAndStop("over");
                TweenLite.to(this.options,0.2 * optionCount,{_y:mask._y, ease:Strong.easeOut, onComplete:detectMouse, onCompleteParams:[button]});
                function detectMouse(button:MovieClip)
                {
                    button.options.onMouseMove = function()
                    {
                        for (var option:String in this._parent.children)
                        {
                            if (this._parent.children[option].hitTest(_root._xmouse, _root._ymouse, true))
                            {
                                if (!this._parent.children[option].active) {
                                    this._parent.children[option].clear();
                                    drawOption(this._parent.children[option], "hover");
                                    this._parent.children[option].active = true;
                                }                               
                            }
                        }
                    };
                }
            };

I am attempting to call on the function drawOption() which is inside the same class and looks like so:

private function drawOption(option:MovieClip, state:String)
    {
        trace("yo");
        switch (state)
        {
            case "hover" :
                var backgroundColour:Number = _shadow;
                var textColour:Number = 0xffffff;
                break;
            default :
                var backgroundColour:Number = _background;
                var textColour:Number = _shadow;
                break;
        }
        option._x = edgePadding;
        option._y = 1 + edgePadding + (optionPadding * (option.index)) + (optionHeight * option.index);
        option.beginFill(backgroundColour,100);
        option.lineStyle(1,_border,100,true);
        option.moveTo(0,0);
        option.lineTo(_optionWidth,0);
        option.lineTo(_optionWidth,optionHeight);
        option.lineTo(0,optionHeight);
        option.endFill();
        var textfield:TextField = option.createTextField("string", option.getNextHighestDepth(), 20, 2, _optionWidth, optionHeight);
        var format:TextFormat = new TextFormat();
        format.bold = true;
        format.size = fontSize;
        format.font = "Arial";
        format.color = textColour;
        textfield.text = option.string;
        textfield.setTextFormat(format);
    }

But because I am trying to call from inside an onRollOver it seems that it is unable to recognise the Class methods. How would I go about accessing the function without making a duplicate of it (very messy, do not want!).

Answer 1

In AS2 I prefer to use the Delegate class to add functions to event handlers whilst maintaining control over the scope.

You implement it like this:

import mx.utils.Delegate;

//create method allows you to set the active scope, and a handler function
_button.onRollOver = Delegate.create(this,rollOverHandler);

function rollOverHander() {
    // since the scope has shifted you need to use 
    // the instance name of the button
    _button.gotoAndStop("over");
    TweenLite.to(_button.options,0.2 * optionCount,{_y:mask._y, ease:Strong.easeOut, onComplete:detectMouse, onCompleteParams:[button]});
}