a button with a slide out panel

This is patterned after the volume button in the YouTube player, which has a slide out volume slider that appears on rolling over the button. Enjoy.


<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
xmlns:mx="http://www.adobe.com/2006/mxml"
width="{ BUTTON_WIDTH }"
height="{ BUTTON_HEIGHT + ROLLOUT_HEIGHT }"
verticalGap="0"
verticalScrollPolicy="off"
creationComplete="{ onCreationComplete() }"
rollOut="{ onRollOut() }"
rollOver="{ onRollOver() }">

<mx:Script>
<![CDATA[
// the width and height of the button
private static const BUTTON_HEIGHT:Number = 20;
private static const BUTTON_WIDTH:Number = 20;

// the width and height of the roll out
private static const ROLLOUT_HEIGHT:Number = 100;
private static const ROLLOUT_WIDTH:Number = 20;

private function onCreationComplete():void
{
rollOutContainer.y = -ROLLOUT_HEIGHT;
rollOutContainer.visible = true;
}

private function onRollOut():void
{
hideEffect.play();
}

private function onRollOver():void
{
showEffect.play();
}
]]>
</mx:Script>

<mx:Move
id="showEffect"
target="{ rollOutContainer }"
yFrom="{ -ROLLOUT_HEIGHT }"
yTo="0"/>

<mx:Move
id="hideEffect"
target="{ rollOutContainer }"
yFrom="0"
yTo="{ -ROLLOUT_HEIGHT }"/>

<!-- rollover button -->
<mx:Button
width="{ BUTTON_WIDTH }"
height="{ BUTTON_HEIGHT }"/>

<mx:Canvas
width="{ ROLLOUT_WIDTH }"
height="{ ROLLOUT_HEIGHT }"
verticalScrollPolicy="off">

<mx:Canvas
id="rollOutContainer"
visible="false"
width="{ ROLLOUT_WIDTH }"
height="{ ROLLOUT_HEIGHT }"
backgroundColor="#ffffff">

<!-- content goes here -->

</mx:Canvas>
</mx:Canvas>

</mx:VBox>