Add Auto-Hide functionality to Sprite and MovieClip objects in AS3

Auto-Hide might be useful when you deal with situations when you have too many controls on a screen and you just want to hide those which are not used so often to have enough space in the main screen.

A simple option to implement would be to use MouseEvent.MOUSE_OVER and MouseEvent.MOUSE_OUT. Normally, only a margin of the clip should be visible in a margin of the screen. When the mouse is moved over the visible part of the clip, it is “shown” (moved entirely to visible area). When the mouse is moved out, the clip is “hidden”(moved mostly outside of the visible area).

The same functionality could be added inside the panel class in case we have access to it:

As you can notice the second version of code contains a baseX memeber. This is the default x when the panel is in “hidden” mode. This is just and example how the parameter can be used to position the panel in the left margin. With minor changes it can be used to position the panel on the right margin of the screen or a baseY member can be added to put the panel on the top/bottom margins or in the corners.

This code can be “decorated”/changed:

  • using Tweens – to add animations when the panel is shown/hidden.
  • using MouseEvent.ROLL_OVER and MouseEvent.ROLL_OUT instead to activate the menu when other objects are on top of the panel in hidden mode.
  • using panel.alpha = 0 when the panel is an “hidden” mode. This way the panel object will receives the mouse over/out events without being visible.

Leave a Reply

Your email address will not be published. Required fields are marked *