Flex 4中如何创建特定显示效果Spark Panel的例子

下面是完整代码(或点击这里察看)：
下面是main.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_Panel_showEffect_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<s:layout>
<s:VerticalLayout />
</s:layout>

<fx:Declarations>
<s:Parallel id="showEff">
<s:Rotate3D angleYFrom="-90" angleYTo="0" />
<s:Fade alphaFrom="0.0" alphaTo="1.0" />
</s:Parallel>

<s:Parallel id="hideEff">
<s:Rotate3D angleYFrom="0" angleYTo="-90" />
<s:Fade alphaFrom="1.0" alphaTo="0.0" />
</s:Parallel>
</fx:Declarations>

<mx:ApplicationControlBar width="100%" cornerRadius="0">
<s:Button id="btn"
label="Toggle Panel visibility"
click="panel.visible = !panel.visible;" />
</mx:ApplicationControlBar>

<s:Group width="100%" height="100%">
<s:Panel id="panel"
title="Panel title"
showEffect="{showEff}"
hideEffect="{hideEff}"
horizontalCenter="0" verticalCenter="0">
<s:layout>
<s:VerticalLayout />
</s:layout>
<mx:Form>
<mx:FormItem label="From:" width="100%">
<s:DropDownList id="fromEmail"
requireSelection="true"
width="100%">
<s:ArrayList source="me@me.com" />
</s:DropDownList>
</mx:FormItem>
<mx:FormItem label="To:" width="100%">
<s:TextInput id="toEmail" width="100%" />
</mx:FormItem>
<mx:FormItem label="Message:" width="100%">
<s:TextArea id="message" width="100%" />
</mx:FormItem>
<mx:FormItem horizontalAlign="right" width="100%">
<s:Button label="Send" />
</mx:FormItem>
</mx:Form>
</s:Panel>
</s:Group>

</s:Application>

本文转自：http://blog.minidx.com/2009/10/31/3009.html