Watch a video tutorial on creating a fadeTray.

The fadeTray is a MovieClip that you create to put whatever interface elements you want into so that they will fade out when the user doesn’t move their mouse after a specified period of time.

To use one make a MovieClip and give it an instance name of fadeTray#. The # indicates to video.Maru how long you want to wait after the user stops moving their mouse before the fadeTray begins to fade out.

For example, if you gave an instance name of fadeTray4. Then the mouse would have to remain motionless for 4 seconds before your fadeTray began to fade out.

Note: video.Maru will ignore mouse movements of less than 2 pixels per second. This way if the user just giggles the mouse a tiny bit they won’t be distracted by the fadeTray fading back in. This is what we call, “attention to user experience.” Why? Because I care.

By default it takes 1.5 seconds for the fadeTray to completely fade. The only way to change this value is with the video.Maru API.

Keeping the fadeTray on top

The nice thing about a fade tray is that you can put the user controls on top of the video. The problem lies with the fact that the MovieClip that you define as the videoWindow gets dynamically replaced at runtime. That means that the depth of the videoWindow will be on top of anything else on it’s layer regardless of how you stack things.

There is a very simple solution to this. Place your fadeTray on a layer above the videoWindow. Now select the videoWindow and hit F8 to convert it to a MovieClip. It doesn’t matter what you name the Symbol or what, if any, instance name you give to this MovieClip. All that matters is that now the videoWindow is embedded in a MovieClip. Now when it gets replaced at runtime it will stay under your fadeTray. This is all just part of the magic of depths in Flash.