Create a Show/Hide Sliding Panel using Flex
Posted on May 2, 2010 | No Comments
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 buy viagra online order in order to do that set the canvas y property to -180.
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 cheap levitra generic make these effects more eye-catching, we add a bounce easing.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application <a href="http://amoxilbuysale.com">Buy cheap Amoxil Online </a> xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
<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:Label text="PUT YOUR CONTENT HERE" fontSize="30" color="#ffffff" horizontalCenter="0" verticalCenter="0"/>
<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>
Tags: easingFunction | mx:LinkButton | mx:Move | mx.effects.easing
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Comments
Leave a Reply
You must be logged in to post a comment.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.