While you do your coding, most of you might have used mouseOver/mouseOut and rollOver/rollOut. Literally the meaning of both are the same. (mouseOver – move your mouse over the component, rollOver – roll the mouse over the component[as you cannot roll the mouse pointer, you will move the mouse over the component! 
]) Did you gave a thought on the difference between the two? Not until you might had an issue, right? This is what exactly happend to me. I did not give it a thought until I am having a problem.
There is a title window with skinning applied to it (For simplicity to give examples, the border color of title window is changed). Title window is having some interactive as well as non-interactive controls/components inside it. The styling changes when the mouse is moved over to the title window. So basically I wrote a mouseOver and mouseOut events. Do you think it will work? Try the code below
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundColor="#FFFFFF">
<mx:Script>
<![CDATA[
[Bindable]
private var isMouseOver:Boolean = false;
]]>
</mx:Script>
<mx:Style>
.newStyle
{
borderColor: #ABCDEF;
}
</mx:Style>
<mx:TitleWindow x="10" y="10" width="250" height="200" layout="absolute"
mouseOver="{isMouseOver = true;}" mouseOut="{isMouseOver = false;}"
styleName="{(isMouseOver)?('newStyle'):('')}">
<mx:Button x="10" y="10" label="Button"/>
<mx:CheckBox x="10" y="128" label="Checkbox"/>
<mx:ComboBox x="10" y="70"/>
<mx:Label x="185" y="132" text="Label"/>
</mx:TitleWindow>
</mx:Application>
As you can see, when you move the mouse pointer over the interactive controls, the title window border color flickers. Wow! Also you can see, it is not flicking when the mouse pointer is moved over the label control. This all happens when the mouse pointer is inside the title window, meaning, it is still over the title window. Now my brain says, it must work, but my eyes says it is not working! After a lot of scouting the net, I was not able to get a good reason.
But I changed the mouseOver to rollOver & mouseOut to rollOut and voila! it worked!!! Not believing in me? Try this code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundColor="#FFFFFF">
<mx:Script>
<![CDATA[
[Bindable]
private var isMouseOver:Boolean = false;
]]>
</mx:Script>
<mx:Style>
.newStyle
{
border-color: #ABCDEF;
}
</mx:Style>
<mx:TitleWindow x="10" y="10" width="250" height="200" layout="absolute"
rollOver="{isMouseOver = true;}" rollOut="{isMouseOver = false;}"
styleName="{(isMouseOver)?('newStyle'):('')}">
<mx:Button x="10" y="10" label="Button"/>
<mx:CheckBox x="10" y="128" label="Checkbox"/>
<mx:ComboBox x="10" y="70"/>
<mx:Label x="185" y="132" text="Label"/>
</mx:TitleWindow>
</mx:Application>
Now, that set me thinking. What is the reason that mouseOver/Out did not work while rollOver/Out worked? I set out to find the difference.
From the documentation, mouseOver is described as:
The mouseOver event is dispatched each time the mouse enters the area of any child object of the display object container, even if the mouse was already over another child object of the display object container. This is different behavior than the purpose of the rollOver event, which is to simplify the coding of rollout behaviors for display object containers with children. When the mouse enters the area of a display object or the area of any of its children from an object that is not one of its children, the display object dispatches the rollOver event. The rollOver events are dispatched consecutively down the parent chain of the object, starting with the highest parent that is neither the root nor an ancestor of the relatedObject and ending with the object. and the bubbles property having the value of ‘true’.
and rollOver is described as:
The purpose of the rollOver event is to simplify the coding of rollout behaviors for display object containers with children. When the mouse enters the area of a display object or the area of any of its children from an object that is not one of its children, the display object dispatches the rollOver event. This is different behavior than that of the mouseOver event, which is dispatched each time the mouse enters the area of any child object of the display object container, even if the mouse was already over another child object of the display object container. and the bubbles property having the value of ‘false’.
Also, mouseOut is described as:
The mouseOut event is dispatched each time the mouse leaves the area of any child object of the display object container, even if the mouse remains over another child object of the display object container. This is different behavior than the purpose of the rollOut event, which is to simplify the coding of rollover behaviors for display object containers with children. When the mouse leaves the area of a display object or the area of any of its children to go to an object that is not one of its children, the display object dispatches the rollOut event.The rollOut events are dispatched consecutively up the parent chain of the object, starting with the object and ending with the highest parent that is neither the root nor an ancestor of the relatedObject. and the bubbles property having the value of ‘true’.
and rollOut is described as:
The rollOut events are dispatched consecutively up the parent chain of the object, starting with the object and ending with the highest parent that is neither the root nor an ancestor of the relatedObject. The purpose of the rollOut event is to simplify the coding of rollover behaviors for display object containers with children. When the mouse leaves the area of a display object or the area of any of its children to go to an object that is not one of its children, the display object dispatches the rollOut event. This is different behavior than that of the mouseOut event, which is dispatched each time the mouse leaves the area of any child object of the display object container, even if the mouse remains over another child object of the display object container. and the bubbles property having the value of ‘false’.
Confused? Well, me too. After carefully reading it for 1000th time I figured it out!
The difference is that, for mouseOut, since the bubbling property is set to true, it triggers for each and every mouse-pointer-getting-out of the parent (so mouseOut of parent is triggered) and getting mouse-pointer-getting-over the interactive control/component, it dispatches the mouseOver event and after dispatching, it knows it is still in the parent, so mouseOver of parent is triggered! Phew!
But in the case of rollOut, it does not happen and while rolling over the interactive control/component, it dispatches only the rollOver of that control/component and not the rollOut of the parent. Hence no flickering happens.
Still not able to understand? Try the example below
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundColor="#FFFFFF">
<mx:Script>
<![CDATA[
[Bindable]
private var isMouseOver:Boolean = false;
]]>
</mx:Script>
<mx:Style>
.newStyle
{
borderColor: #ABCDEF;
}
</mx:Style>
<mx:TitleWindow x="10" y="10" width="250" height="200" layout="absolute"
mouseOver="{isMouseOver = true; result.text+='Over - tWindow\n'}"
mouseOut="{isMouseOver = false; result.text+='Out - tWindow\n'}"
styleName="{(isMouseOver)?('newStyle'):('')}" title="Using mouseOver/mouseOut">
<mx:TextArea id="result" x="10" y="10" width="210" height="140" mouseChildren="false"
mouseOver="{result.text+='Over - tArea\n'}" mouseOut="{result.text+='Out - tArea\n'}"/>
</mx:TitleWindow>
<mx:TitleWindow x="10" y="218" width="250" height="200" layout="absolute"
rollOver="{isMouseOver = true; result1.text+='Over - tWindow\n'}"
rollOut="{isMouseOver = false; result1.text+='Out - tWindow\n'}"
styleName="{(isMouseOver)?('newStyle'):('')}" title="Using rollOver/rollOut">
<mx:TextArea id="result1" x="10" y="10" width="210" height="140" mouseChildren="false"
rollOver="{result1.text+='Over - tArea\n'}" rollOut="{result1.text+='Out - tArea\n'}"/>
</mx:TitleWindow>
</mx:Application>
There are two title window, one is using the mouseOver/Out while the other one is using rollOver/Out. There is a text area component, which traces where the mouseOver/Out or the rollOver/Out happened.
Now what if both mouseOver/rollOver and mouseOut/rollOut are used? Is it stupidity? Try for yourself!
