Draggable Drawer Adobe Flex Mobile - apache-flex

Question

Could someone please assist me with a way to create a drag-able drawer that resides on the bottom of my mobile application? I am wanting to make it so there is a drag handle that is visible all the time (can be an image or whatever) and then allow you to slide the contents into view and slide them back out of view at the bottom of the screen. I am needing a direction to start in, I should be able to figure it out once I have that.

Answer 1

I originally had the sliding initiated on mouse down/move/up events, but have since changed it out for a tap affect (which also occurs when you slide up/down) on the handle image at the top of the dock, since I changed it this afternoon I haven't had a chance to clean it up yet but this is the start:
Drawer:
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" maxHeight="125" minHeight="30" height="30"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
private var dragging:Boolean = false;
protected function resize():void{
var h:int = this.height;
var i:int = 0;
if (h !== 125){
for(i=h;i<=125;i++){
this.height = i;
};
currentState='up';
return;
}else{
}
if(h >= 30){
for(i=h;i>=30;i--){
this.height = i;
};
currentState='down';
return;
}
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:states>
<s:State name="down"/>
<s:State name="up"/>
</s:states>
<s:Rect width="100%" height="100%" top="30">
<s:fill>
<s:SolidColor color="#333333"/>
</s:fill>
</s:Rect>
<s:Image scaleMode="zoom" source.down="#Embed('Images/down.png')" source.up="#Embed('Images/up.png')" mouseDown="resize()"/>
<s:HGroup width="100%" horizontalAlign="center" verticalAlign="bottom" top="30" gap="30">
<!--Buttons here-->
</s:HGroup>
</s:Group>