Hooking Low Level Events on Component

Someone was recently trying to hook into some low level events such as onRollOver or onRollOut on my components. The problem was that those events were not broadcast for all components. If you just said myButton.onRollOver = …, that’s going to wipe out the existing functionality that swaps the image on a mouse over. Actually, the same thing will happen in UIComponents. Say you want to implement a tool tip on a mouse over of a Macromedia button. You’d want to activate it with an onRollOver, but that would wipe out the beautiful green highlight that it does on a roll over.
If you are using Macromedia’s comps, you can hook into mx.events.LowLevelEvents somehow. I’m not too sure how that works, as it doesn’t appear to be documented anywhere. It might even work with other components or clips, but I’m not sure since it uses UIObjectDispatcher. It also appears to hook into every possible event, rather than just the one or two you want. I didn’t have time to analyze the class to figure out how to use it. so I made my own basic function for hooking into events of any component or movie clip instance. Here it is:

function hookEvent(comp, event:String, func:Function):Void
{
	comp["old" + event] = comp[event];
	comp[event] = function()
	{
		func.apply(comp, arguments);
		comp["old" + event]();
	}
}

Basically, you just provide the name of a component or movie clip instance, the event name you want to hook into, as a string, such as “onRollOver”, and the function you want to handle the event. Here’s an example:

hookEvent(myBtn, "onRollOver", customRoll);
function customRoll()
{
	trace("rollover");
}

Note that this will work with my components, MM’s components, anyone else’s components, or any movie clip that already has your event defined. Also, note that this calls your function in the scope of your component, rather than dispatching an event which you can handle from another scope. This may or may not be what you need.
Purists will also note that is uses nested functions. If you can’t bring yourself to do such a henious thing, this function is not for you. 🙂

This entry was posted in Flash. Bookmark the permalink.

6 Responses to Hooking Low Level Events on Component

  1. Peter says:

    Great little workaround there Keith, thanks for posting! 😉

  2. I useally use an approach like this to tap into events:

    import mx.utils.Delegate;

    //store the current callback
    var myBtnOver=Delegate.create(myBtn, myBtn.onRollOver);

    //overwrite the instance callback
    myBtn.onRollOver=Delegate.create(this, tapIntoEvent);

    function tapIntoEvent(){
    // extra code
    // call the orginal callback
    myBtnOver();
    }

    Not sure this is what you were shooting for though :).

  3. Keith Peters says:

    Hmmm… that seems even better than my idea! Thanks.

  4. Evan Schulz says:

    Some information about mx.events.LowLevelEvents:
    http://www.philterdesign.com/blog/archives/000027.html

  5. 1stpixel says:

    for MMs Buton u use:
    import mx.events.LowLevelEvents;

    onButtonMouseOver = function (evt) {
    //
    }
    onButtonMouseOut = function (evt) {
    //
    }
    myV2Button.addEventListener (“mouseOver”, onButtonMouseOver);
    myV2Button.addEventListener (“mouseOut”, onButtonMouseOut);

  6. enjine says:

    badass.

    thanks for sharing-

Comments are closed.