I'm creating a component that when the mouse is over shows a sprite and when the mouse is out, hide it
What I want to do is show another sprite when the mouse is over the first sprite. The pobem is that when the mouse is over the first sprite, the component remove it.
What is the best approach for this?
I believe the issue you're having is the second sprite is catching the mouse events and causing the component to throw its rollOut event. Setting an object's mouseEnabled property to false should fix this (if the sprite has any children you'll have to set mouseEnabled to false for them as well).
hope that helps,