Posts Tagged Roll Over

Difference between MouseEvent.ROLL_OVER and MouseEvent.MOUSE_OVER in AS3

This was a question that has been in my head for a long time: what is the difference between MouseEvent.ROLL_OVER and MouseEvent.MOUSE_OVER. I have been using MouseEvent.MOUSE_OVER for all my rollOvers up to now without really thinking about it, but I think it would be interesting to know the difference for something so basic.

If you look at the documentation that comes with Flash CS3. You will find very little help. There are no examples explaining the difference between the two. The only difference you will find there is that the MOUSE_OVER event has the bubbles property set to true and the ROLL_OVER to false. I don’t know how much that property impacts on the behavior of the event, but I am keeping event bubbling for another post (I have been postponing that post for a long time).

Where I found there was a difference between the two events is in the way they handle children of the display object you added the listener too. I have made a simple example to show this:

In that flash example, be sure to roll over the blue part of the button to really see the difference(note that the blue rectangle is inside the black rectangle movieClip, not just over). In the MOUSE_OVER example, the event is fired for every children of the display object that the listener was added to. This does not happen with the ROLL_OVER event. If you move your mouse from the exterior of the button to the blue part MOUSE_OVER will generate 3 times the events that ROLL_OVER will. One way to make MOUSE_OVER act as ROLL_OVER is to set mouseChildren = false but as a consequences: the first is that it will disable all mouse events from children which I think might help the CPU but at the same time you won’t be able to interact with the children with the mouse.

In our previous example, it didn’t really matter how many events where fired because we used a tween to do the rollover and we weren’t able to see the difference visually, but there might be times where you will want all the different events. Like if you want the mouse cursor to change when over a movieClip and still want rollOver effects from children of that movieClip, you would use the MouseEvent.ROLL_OVER to change the mouse cursor and MouseEvent.MOUSE_OVER for the children movieClips rollOver effects.

As a side note on cpu efficiency, it doesn’t really matter if you listen to  MouseEvent.ROLL_OVER or MouseEvent.MOUSE_OVER events, they are both as efficient. What will save you cpu cycles is if you disable the children of a movieClip from sending events if you don’t need them (even if you don’t listen to them events are still fired) using mouseChildren =  false.

I hope this shed some light on the subject.

, , , ,

60 Comments


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 forward and it is the one you’ve seen everywhere. Here is some sample AS3 showing how to do it:

button.addEventListener(MouseEvent.ROLL_OVER, manageMouseOver, false, 0, true);
button.addEventListener(MouseEvent.ROLL_OUT, manageMouseOut, false, 0, true);
 
function manageMouseOver(event:MouseEvent):void{
  //your over code here
}
 
function manageMouseOut(event:MouseEvent):void{
  //your out code here
}

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

 
button.addEventListener(MouseEvent.ROLL_OVER, manageMouseOver, false, 0, true);
 
function manageMouseOver(event:MouseEvent):void{
  button.removeEventListener(MouseEvent.ROLL_OVER, manageMouseOver);
  button.addEventListener(MouseEvent.ROLL_OUT, manageMouseOut, false, 0, true);
  //your over code here
}
 
function manageMouseOut(event:MouseEvent):void{
  button.removeEventListener(MouseEvent.ROLL_OUT, manageMouseOver);
  button.addEventListener(MouseEvent.ROLL_OVER, manageMouseOut, false, 0, true);
  //your out code here
}

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.

Following the indication in the comments I investigated the difference between MOUSE_OVER and ROLL_OVER and found that most of the time it is better to use ROLL_OVER.

Edits May 5th 2010
Because this post is now receiving a lot of traffic and it is one that I wrote so long ago, I felt obliged to update it a little. First off I would like to say that I would stick with method number 1 because it is just way easier to understand the code and method number 2 doesn’t save much (it just makes things more complicated, keep it simple). Secondly, I did some edits to the code itself; I removed the bad habits I used to have. I switched the MOUSE_OVER for ROLL_OVER because 99% of the time that is what you will need. I also change “e:MouseEvent” to “event:MouseEvent” as it is easier to read and it is the best practice that Adobe is pushing. Finally, I added “false, 0, true” at the end of my listener functions to set weakReference to true. In short, this is a fail safe if you forget to remove your listeners when you don’t need your button anymore. The button won’t be held into memory by the listeners. I just thought you should know.

,

30 Comments