Create a Show/Hide Sliding Panel using Flex

November 19th, 2009 in Flex | 24 Comments

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.

View DemoDownload Source

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>
  • Digg
  • del.icio.us
  • Reddit
  • StumbleUpon
  • Twitter


What you think ...

(24 Comments)

+ Add a Comment
  1. Emilio
    Nov 25th, 2009

    Nice tut, love flex !!!

  2. Ed Syrett
    Dec 14th, 2009

    Nice idea…

    However, having the bounce easing function on the close is a little incongruous.

    Here’s my attempt:

    http://edsyrett.wordpress.com/2009/11/27/focus-loops-within-focus-loops/

    My test app shows a reusable component that can we switched between docking on the right or left, and also shows how to create a focus loop within the slidiing panel itself.

    Cheers,

    Ed.

  3. srinivasaraju
    Jan 11th, 2010

    its good..i luv it

  4. Gabor Kako
    Jan 24th, 2010

    Thank You.
    It is cool.

    But my question is:
    How to do this from bottom of my application?
    My application is full screen and sizeable.

  5. Jones
    Feb 24th, 2010

    hei nice site…

  6. RAHUL PATIL
    Mar 1st, 2010

    its nice, could we some more animative in flex itself

  7. andy
    Apr 23rd, 2010

    Thanks alot for putting this up.

  8. Saurabh Datta
    May 12th, 2010

    Hey, Just a question..
    IS the action-script used here the same as the one used in flash. I mean, I’ve never coded in flash and I think I need to get my hands wet. So will it be easier with AS 3.0 ??

  9. Anurag Bhulyan
    May 27th, 2010

    Yeah it is ACTION SCRIPT 3.0 :D

    cheers,
    Anurag

  10. Daneil
    May 30th, 2010

    Hey, thnx a lot for this. Helped me loads get started with flex and after you tutorial i understand it a lot more. One thing i can;’t work out how to do is to add a background color to the drop down panel. Does anyone know how to do this.

    Thanx a lot

    Dan.

  11. saumya
    Jul 30th, 2010

    m new to flex n think ur tut helped me understantand it

  12. abhishek
    Jul 31st, 2010

    hey frnd,
    very nice example it is,
    its very easy to use.
    send more like this if thr is.
    thx in advanced,
    :)

  13. Anand
    Aug 5th, 2010

    Good.. Looks very cool.. thanks..

  14. acebomoza
    Sep 1st, 2010

    *o* it’s pretty…. nice!!

    Thank a lot ^3^

  15. Babatunde
    Sep 6th, 2010

    hey guys, anyone know how to hide a panel/canvas when the focus is on another component

  16. Pozycjonowanie stron
    Sep 21st, 2010

    Very nice TUT :)

  17. vasu
    Feb 22nd, 2011

    Nice tut dear……

  18. Tonmoy
    May 24th, 2011

    Nice…….

  19. javier
    Jun 15th, 2011

    y porque no usa un PANEL control ????????

  20. imran akram
    Jul 19th, 2011

    Nice tutorial. really helpfull

  21. yuanhuiliu
    Aug 16th, 2011

    it is so cool , I like it.

  22. Adobe Flex - Programming Resources
    Sep 21st, 2011

    [...] Create a Show / Hide Sliding Panel using 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. [...]

  23. Mahmoud
    Dec 17th, 2011

    viry good :D
    ty…

Leave a Comment

Name (required)

E-mail (required, will not be published)

Website