Flex easing - show / hide window? - apache-flex

Question

Im working on a display that starts with a centered logo and menu. When one of the menu items is clicked I move the logo and menu to the left side and show a datagrid on the right. Is there a way to use an easing function to make this change look better?

Answer 1

The short answer is: Yes! To illustrate it I've created the following sample:
<?xml version="1.0" encoding="utf-8"?>
<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<s:Bounce id="easer1" />
<s:Elastic id="easer2" />
</fx:Declarations>
<s:states>
<s:State name="intro" />
<s:State name="main" />
</s:states>
<s:transitions>
<s:Transition fromState="intro" toState="main">
<s:Sequence>
<s:Move disableLayout="true" easer="{easer2}" target="{menuGroup}" />
<s:SetAction property="verticalCenter" target="{menuGroup}" value="{NaN}" />
<s:SetAction property="horizontalCenter" target="{menuGroup}" value="{NaN}" />
<s:AddAction target="{dg}" />
<s:Fade easer="{easer1}" target="{dg}" />
</s:Sequence>
</s:Transition>
</s:transitions>
<s:VGroup horizontalCenter.intro="0" id="menuGroup" left.main="10" top.main="10" verticalCenter.intro="0">
<s:Label text="Logo is here" />
<s:Button click="currentState = 'main'" label="Click Me!" />
<s:Button click="currentState = 'main'" label="Click Me!" />
</s:VGroup>
<mx:DataGrid bottom="10" id="dg" includeIn="main" left="{menuGroup.width + 20}" right="10" top="10">
<mx:columns>
<mx:DataGridColumn headerText="First" />
<mx:DataGridColumn headerText="Second" />
</mx:columns>
</mx:DataGrid>
</s:Application>