Popup footer/Sidebar

Popup footer/Sidebar

This recipe creates a movieclip that slides on from one of the edges of the stage as cursor gets within a certain distance of that edge. The immediate example shows a movieclip sliding up from the below the bottom edge of the stage.

The example is built from 2 movieclips one nested within the other. The first movieclip hit_mc has been assigned listeners, listening for the ROLL_OVER and ROLL_OUT events. While the inner, footer_mc, clip is animated. Here's the arrangement:

hit_mc

footer_mc

At first thought you might think to place both clips on the stage, rather than nesting one within the other. This the problem of causing the clip in front to block mouse events for the clip that is behind. By nesting the clips both can still receive mouse events.

The problem with two clips two separate clips, as opposed to the nested clips. Is that rolling over the first clip would start the second moving up. When the second clip interposed itself between the mouse and the first clip, the first clip would get a roll out message.

To create the motion for this example I used tweener. See the Tweener recipes for more information on using Tweener.

The registration point for footer_mc was set to the bottom left corner for this example. The position of registration point will determine the y values that you will assign to the Tweener tweens to hide and show the footer.

Here's the code that I used for the example fla.

import caurina.transitions.Tweener;

hit_mc.addEventListener( MouseEvent.MOUSE_OVER, show_footer );
hit_mc.addEventListener( MouseEvent.MOUSE_OUT, hide_footer );

function show_footer( e:MouseEvent ):void {
    Tweener.addTween( hit_mc.footer_mc, { y:0, time:1 } );
}

function hide_footer( e:MouseEvent ):void {
    Tweener.addTween( hit_mc.footer_mc, { y:hit_mc.footer_mc.height, time:1 } );
}

Note, since footer_mc is nested within hit_mc I refer to it in the code above with

hit_mc.footer_mc

Also note, in the exmaple movie I used a rectangular shape on the lowest layer of hit_mc (its below footer_mc). I gave this shape a fill with a 10% transparency. This could be 0% transparent to make it completely invisible. This must be a filled shape.

I used a 10% transparent fill to show where the hit area was for the example.


Popup Footer/Sidebar 2
An obvious extension of this recipe is to add interactive elements to the popup. This is easily one by adding those elements nested within the footer_mc. For example imagine you have a movieclip named button_mc. Using the previous example as a starting point, this clip would be placed within footer_mc. The arrangement could be described like this:

hit_mc

footer_mc

button_mc

Form here the interactive elements can be treated the same as they are treated in any other recipe keeping in mind that the clips must be targeted as:

hit_mc.footer_mc.button_mc

Where button_mc could be the name of any clip nested within the footer.