Creating a show effect on a Spark Panel container in Flex 4

By Peter deHaan On June 30, 2009 · 5 Comments

The following example shows how you can create a simple transition effect when the visibility is toggled on the Spark Panel container in Flex 4 by specifying the showEffect and hideEffect effects.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/30/creating-a-show-effect-on-a-spark-panel-container-in-flex-4/ -->
<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>

Or, instead of using databinding, you could declare the showEffect and hideEffect effects in the Panel declaration itself, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/30/creating-a-show-effect-on-a-spark-panel-container-in-flex-4/ -->
<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>
 
    <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"
                horizontalCenter="0" verticalCenter="0">
            <s:layout>
                <s:VerticalLayout />
            </s:layout>
            <s:showEffect>
                <s:Parallel>
                    <s:Rotate3D angleYFrom="-90" angleYTo="0" />
                    <s:Fade alphaFrom="0.0" alphaTo="1.0" />
                </s:Parallel>
            </s:showEffect>
            <s:hideEffect>
                <s:Parallel>
                    <s:Rotate3D angleYFrom="0" angleYTo="-90" />
                    <s:Fade alphaFrom="1.0" alphaTo="0.0" />
                </s:Parallel>
            </s:hideEffect>
            <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>

Or, you can set the showEffect and hideEffect effects in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/30/creating-a-show-effect-on-a-spark-panel-container-in-flex-4/ -->
<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:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Panel {
            showEffect: showEff;
            hideEffect: hideEff;
        }
    </fx:Style>
 
    <fx:Declarations>
        <s:Parallel id="showEff">
            <s:Rotate3D angleYFrom="-45" angleYTo="0" />
            <s:Fade alphaFrom="0.0" alphaTo="1.0" />
        </s:Parallel>
        <s:Parallel id="hideEff">
            <s:Rotate3D angleYFrom="0" angleYTo="-45" />
            <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"
                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>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/30/creating-a-show-effect-on-a-spark-panel-container-in-flex-4/ -->
<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"
        initialize="init();">
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.effects.Parallel;
            import spark.components.Button;
            import spark.components.DropDownList;
            import spark.components.Group;
            import spark.components.Panel;
            import spark.components.TextArea;
            import spark.components.TextInput;
            import spark.effects.Fade;
            import spark.effects.Rotate3D;
            import spark.layouts.VerticalLayout;
 
            private var showEff:Parallel;
            private var hideEff:Parallel;
            private var btn:Button;
            private var panel:Panel;
            private var fromEmail:DropDownList;
            private var toEmail:TextInput;
            private var message:TextArea;
            private var sendBtn:Button;
 
            private function init():void {
                var showRotate:Rotate3D = new Rotate3D();
                showRotate.angleYFrom = -90;
                showRotate.angleYTo = 0;
 
                var showFade:Fade = new Fade();
                showFade.alphaFrom = 0.0;
                showFade.alphaTo = 1.0;
 
                var hideRotate:Rotate3D = new Rotate3D();
                hideRotate.angleYFrom = 0;
                hideRotate.angleYTo = -90;
 
                var hideFade:Fade = new Fade();
                hideFade.alphaFrom = 1.0;
                hideFade.alphaTo = 0.0;
 
                showEff = new Parallel();
                showEff.children = [showRotate, showFade];
 
                hideEff = new Parallel();
                hideEff.children = [hideRotate, hideFade];
 
                btn = new Button();
                btn.label = "Toggle Panel visibility";
                btn.addEventListener(MouseEvent.CLICK, btn_click);
 
                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.percentWidth = 100;
                appControlBar.setStyle("cornerRadius", 0);
                appControlBar.addElement(btn);
                addElementAt(appControlBar, 0);
 
                fromEmail = new DropDownList();
                fromEmail.dataProvider = new ArrayList(["me@me.com"]);
                fromEmail.requireSelection = true;
                fromEmail.percentWidth = 100;
 
                toEmail = new TextInput();
                toEmail.percentWidth = 100;
 
                message = new TextArea();
                message.percentWidth = 100;
 
                sendBtn = new Button();
                sendBtn.label = "Send";
 
                var gr:Group = new Group();
                gr.percentWidth = 100;
                gr.percentHeight = 100;
                addElement(gr);
 
                panel = new Panel();
                gr.addElement(panel);
                panel.title = "Panel title";
                panel.layout = new VerticalLayout();
                panel.horizontalCenter = 0;
                panel.verticalCenter = 0;
                panel.setStyle("showEffect", showEff);
                panel.setStyle("hideEffect", hideEff);
 
                var form:Form = new Form();
                panel.addElement(form);
 
                var formItem1:FormItem = new FormItem();
                form.addElement(formItem1);
                formItem1.label = "From:";
                formItem1.percentWidth = 100;
                formItem1.addElement(fromEmail);
 
                var formItem2:FormItem = new FormItem();
                form.addElement(formItem2);
                formItem2.label = "To:";
                formItem2.percentWidth = 100;
                formItem2.addElement(toEmail);
 
                var formItem3:FormItem = new FormItem();
                form.addElement(formItem3);
                formItem3.label = "Message:";
                formItem3.percentWidth = 100;
                formItem3.addElement(message);
 
                var formItem4:FormItem = new FormItem();
                form.addElement(formItem4);
                formItem4.percentWidth = 100;
                formItem4.setStyle("horizontalAlign", "right");
                formItem4.addElement(sendBtn);
            }
 
            private function btn_click(evt:MouseEvent):void {
                panel.visible = !panel.visible;
            }
        ]]>
    </fx:Script>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

Tagged with: Gumbo • hideEffect • showEffect

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

5 Responses to Creating a show effect on a Spark Panel container in Flex 4

Chirayu says:

September 18, 2010 at 8:04 am

Great example and great website…wish I cud learn from You….thanks a lot…had been for something like this.

Reply
Chirayu says:

September 18, 2010 at 8:06 am

Sorry for the typo..I meant – Had been looking for something like this since sometime.

Reply
Sameera Thilakasiri says:

November 11, 2010 at 8:30 am

Thanks a lot, this is what I was googling…

Reply
Arend says:

February 26, 2011 at 4:07 am

Thanks a lot, again!

Reply
Wilensky says:

August 23, 2011 at 11:43 am

Thanks a lot for the nice effect ! (even if it is very simple :))

Reply