IN2*V2 - Dispatching Mouse Events with "Button-Based" Components
March 07, 2004

Ever notice how a lot of the "button-based" components come with only a "click" event? Ever want to trigger an event when, say, the user rolls their mouse over a button? For example, maybe you want to have a tooltip appear when you roll over a button. Well, you could do something like this:

myBtn.onRollOver = function( ) {
 // display tooltip here
}
However, if you do this, you lose the nice hover effect on the button. Fortunately, there is a way to capture the roll over (as well as some of the other button events) in your button based components. The key lies in a seldom talked about class called "mx.events.LowLevelEvents". This class will mix in all of the button events into UIEventDispatcher (which itself mixes into the component). This class also implements key events. The cool thing is that all you have to do to utilize this functionality in your component is to create a reference to it somewhere in your movie like so:

var ll:mx.events.LowLevelEvents;
Now you should be able to listen for these events:

1) mouseOver
2) mouseOut
3) mouseDown
4) mouseUp

So you can do something like this (this example uses an AS2 Tooltip class created by Laiverd):

var ll:mx.events.LowLevelEvents;

var tt:Tooltip = new Tooltip();
var bListener:Object = {};
bListener.mouseOver = function(evtObj) {
 tt.tipText = "Tooltip text goes here";
 tt.drawTip();
}
bListener.mouseOut = function(evtObj) {
 tt.removeTip();
}
btn1.addEventListener("mouseOver",bListener);
btn1.addEventListener("mouseOut",bListener);
This is a cool undocumented (AFAIK) feature, but just as cool is the fact that this added functionality costs you less than 1K in filesize.

Posted by philter at March 7, 2004 11:05 PM

Comments Disabled