« SWFAddress and the new Google Analytics (ga.js)
Video tutorial on how to use GOASAP »

The right way to do RollOver Event in AS3

I have been asking myself this question for a long time now. I see two ways of doing a roll over using ActionScript 3. The first one is pretty straight foward and it is the one you've seen everywhere. Here is some sample AS3 showing how to do it:

PLAIN TEXT
Actionscript:
  1. button.addEventListener(MouseEvent.MOUSE_OVER, manageMouseOver);
  2. button.addEventListener(MouseEvent.MOUSE_OUT, manageMouseOut);
  3.  
  4. function manageMouseOver(e:MouseEvent):void{
  5.   //your over code here
  6. }
  7.  
  8. function manageMouseOut(e:MouseEvent):void{
  9.   //your out code here
  10. }

This is the classical way off doing thing. Doing it this way implies that for all your button you always have 2 listeners to do your rollovers. There is another way of doing this that will always use only one listener. Here it is

PLAIN TEXT
Actionscript:
  1. button.addEventListener(MouseEvent.MOUSE_OVER, manageMouseOver);
  2.  
  3. function manageMouseOver(e:MouseEvent):void{
  4.   button.removeEventListener(MouseEvent.MOUSE_OVER, manageMouseOver);
  5.   button.addEventListener(MouseEvent.MOUSE_OUT, manageMouseOut);
  6.   //your over code here
  7. }
  8.  
  9. function manageMouseOut(e:MouseEvent):void{
  10.   button.removeEventListener(MouseEvent.MOUSE_OUT, manageMouseOver);
  11.   button.addEventListener(MouseEvent.MOUSE_OVER, manageMouseOut);
  12.   //your out code here
  13. }

Doing it it this way, there will be less listener active at the same time, but each rollover will do 4 more actions. So is having less listeners worth doing more computations; is there situations where you should use one technique more than the other; or it has so little impact that we should not care about it?

I'd really like to know.

This entry was posted on Friday, February 8th, 2008 at 6:58 pm and is filed under ActionScript 3. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “The right way to do RollOver Event in AS3”

  1. Case Says:
    April 29th, 2008 at 1:42 am

    Yeah! I’d like to know too!… maybe adding and removing listeners could itself be less efficient than setting them and leaving them alone??? Someone should do some tests…

  2. Haydn Says:
    May 27th, 2008 at 10:25 pm

    It would probably be better to use MouseEvent.ROLL_OVER and MouseEvent.ROLL_OUT instead of MouseEvent.MOUSE_OVER and MouseEvent.MOUSE_OUT. That way if your button has nested display objects the event is only fired when the mouse enters or leaves the button, not for every single one of it’s descendants.

  3. dgelineau Says:
    May 29th, 2008 at 11:34 am

    Well, you could set mouseChildren = false and it would have the same behavior as ROLL_OVER. I am currently investigating the difference between ROLL_OVER and MOUSE_OVER.

  4. Dubai Web Design, Development Says:
    June 12th, 2008 at 11:23 pm

    can we add background on mouse over or any effect like shades in css. Does any one have idea of that.

Leave a Reply

Close
E-mail It