Subscribe By RSS | Email

Flex | Flash | Air | AS3
Tutorials, Resources,
Tips & Tricks

Create a Show/Hide Sliding Panel using Flex

November 19th, 2009 in Flex

This tutorial will show you how to add a nice hide/show sliding panel at the top of your flex application that when clicked will reveal itself.

1. Create a new flex project named SlidingPanel, set the name of the main MXML application file to Main.mxml and set its layout to absolute.

2. First let’s create the top panel. To do so add a Canvas component and give it an id of “panel”. To make it open or close, add a Button at the bottom of the canvas and set its properties as shown in the code below. Its click event will be handled by the toggleBtn function that we are going to create later.
When the application will be launched we want only the button “Open” to be visible so in order to do that set the canvas y property to -180.

<mx:Canvas id="panel" width="100%" height="200" y="-180" backgroundColor="#000000">
		<mx:LinkButton id="btn" width="100%"  height="21"
			bottom="0" horizontalCenter="0"
			label="Open"
		  	click="toggleBtn(event)"/>
</mx:Canvas>

We let you put your own content inside this panel.

3. To make the panel appear and disappear we need to create 2 Move effects, one to slide out and the other to slide in.
The first one will be used to open the panel. To do so set its yTo property to 0 so that the panel is fully visible and when its effectEnd event will occur we set the label property of the button to “Close”.
Follow the same process for the second Move effect that we’ll use to close the panel.
To make these effects more eye-catching, we add a bounce easing.

<mx:Move id="panelOut" target="{panel}" yTo="0" effectEnd="btn.label='Close'"
		duration="1500" easingFunction="Bounce.easeOut"/>
<mx:Move id="panelIn" target="{panel}" yTo="-180" effectEnd="btn.label='Open'"
		duration="1000" easingFunction="Bounce.easeIn"/>

4. Next add a Script section to create the toggleBtn function. In this function we check whether the panel is opened or not and we play the corresponding Move effect.

<mx:Script>
		<![CDATA[
			import mx.effects.easing.*;

			private function toggleBtn(e:MouseEvent):void{
				if(e.currentTarget.label== 'Open')
					 panelOut.play();
				else
					panelIn.play();
			}
		]]>
</mx:Script>

5. Finally we add some CSS to custom the app.

<mx:Style>
		Application{
		   backgroundGradientColors: #E2DEDE, #3C2580;
		}
		LinkButton {
		   rollOverColor: #000000;
		   selectionColor: #000000;
		   color: #ffffff;
		   textRollOverColor: #ffffff;
		   textAlign: center;
		}
</mx:Style>

Here’s the final code, run your application to see it in action.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Style>
		Application{
		   backgroundGradientColors: #E2DEDE, #3C2580;
		}
		LinkButton {
		   rollOverColor: #000000;
		   selectionColor: #000000;
		   color: #ffffff;
		   textRollOverColor: #ffffff;
		   textAlign: center;
		}
	</mx:Style>

	<mx:Script>
		<![CDATA[
			import mx.effects.easing.*;

			private function toggleBtn(e:MouseEvent):void{
				if(e.currentTarget.label== 'Open')
					 panelOut.play();
				else
					panelIn.play();
			}
		]]>
	</mx:Script>

	<mx:Move id="panelOut" target="{panel}" yTo="0" effectEnd="btn.label='Close'"
		duration="1500" easingFunction="Bounce.easeOut"/>
	<mx:Move id="panelIn" target="{panel}" yTo="-180" effectEnd="btn.label='Open'"
		duration="1000" easingFunction="Bounce.easeIn"/>        

	<mx:Canvas id="panel" width="100%" height="200" y="-180" backgroundColor="#000000">
       <!--Add the content of your sliding panel here  -->
		<mx:LinkButton id="btn" width="100%"  height="21"
			bottom="0" horizontalCenter="0"
			label="Open"
		  	click="toggleBtn(event)"/>
	</mx:Canvas>

	<!--Add the content of your page here-->

</mx:Application>

Terms of Use

The source codes downloaded from RiaCodes can be used for you own projects, commercial or non-commercial, without any attribution.

All files downloaded from RiaCodes may not be used for resale or redistribution.

You may not reproduce or publish in full or large part, the tutorials on this site, without written permission from RiaCodes.

ABOUT

RiaCodes is a site dedicated to web developers and designers providing tutorials and resources on Flash, Flex and Air technologies.

Our site is here to help you to build compelling, engaging and rich applications both for the web and for the desktop.

Now it's time to get your users a better and richer experience!