Creating a custom creation complete effect on a Flex Alert control (redux)

In a previous example, “Creating a custom creation complete effect on a Flex Alert control”, we saw how you could specify an effect which gets played when an Alert control is displayed by setting the Alert control’s creationCompleteEffect style.

The following example shows how you can apply a parallel Fade/Move effect when the Alert control is created by setting the the creationCompleteEffect effect/style in MXML and ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/15/creating-a-custom-creation-complete-effect-on-a-flex-alert-control-redux/ -->
<mx:Application name="Alert_creationCompleteEffect_test_3"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.effects.easing.*;

            private function showAlert():void {
                var a:Alert = Alert.show("Nam vel nunc sed arcu fringilla fringilla. Cras dapibus nunc ut nisi.\\n" +
                        "Nullam porttitor mi et mauris.\\n" +
                        "Suspendisse hendrerit, turpis eu ornare suscipit, nulla sem tempus lorem,\\n" +
                        "sit amet semper nibh mi cursus neque.\\n" +
                        "Nulla vel purus. Sed a nulla. Quisque venenatis laoreet mi.",
                        "Lorem ipsum dolor sit amet, consectetuer adipiscing elit");
                a.isPopUp = false;
                a.cacheAsBitmap = true;
            }
        ]]>
    </mx:Script>

    <mx:Style>
        @font-face {
            src: local("Verdana");
            fontFamily: VerdanaEmbedded;
        }

        @font-face {
            src: local("Verdana");
            fontFamily: VerdanaEmbedded;
            fontWeight: bold;
        }

        Alert {
            fontFamily: VerdanaEmbedded;
            creationCompleteEffect: alertCreationCompleteEffect;
        }
    </mx:Style>

    <mx:Parallel id="alertCreationCompleteEffect">
        <mx:Fade duration="500" />
        <mx:Move yFrom="0"
                easingFunction="Elastic.easeOut"
                duration="1000" />
    </mx:Parallel>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="button"
                label="Click me"
                click="showAlert();" />
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/15/creating-a-custom-creation-complete-effect-on-a-flex-alert-control-redux/ -->
<mx:Application name="Alert_creationCompleteEffect_test_3"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.controls.Alert;
            import mx.controls.Button;
            import mx.effects.easing.*;
            import mx.effects.Fade;
            import mx.effects.Move;
            import mx.effects.Parallel;

            [Embed(systemFont="Verdana",
                    fontName="VerdanaEmbedded",
                    fontWeight="normal",
                    mimeType="application/x-font")]
            private const verdanaEmbeddedNormal:Class;

            [Embed(systemFont="Verdana",
                    fontName="VerdanaEmbedded",
                    fontWeight="bold",
                    mimeType="application/x-font")]
            private const verdanaEmbeddedBold:Class;

            public var alertCreationCompleteEffect:Parallel;

            private var button:Button;

            private function init():void {
                var fader:Fade = new Fade();
                fader.duration = 500;

                var mover:Move = new Move();
                mover.yFrom = 0;
                mover.easingFunction = Elastic.easeOut;
                mover.duration = 1000;

                alertCreationCompleteEffect = new Parallel();
                alertCreationCompleteEffect.addChild(fader);
                alertCreationCompleteEffect.addChild(mover);

                button = new Button();
                button.label = "Click me";
                button.addEventListener(MouseEvent.CLICK, button_click);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(button);
                addChildAt(appControlBar, 0);

                var alertStyles:CSSStyleDeclaration;
                alertStyles = StyleManager.getStyleDeclaration("Alert");
                alertStyles.setStyle("fontFamily", "VerdanaEmbedded");
            }

            private function button_click(evt:MouseEvent):void {
                showAlert();
            }

            private function showAlert():void {
                var a:Alert = Alert.show("Nam vel nunc sed arcu fringilla fringilla. Cras dapibus nunc ut nisi.\\n" +
                        "Nullam porttitor mi et mauris.\\n" +
                        "Suspendisse hendrerit, turpis eu ornare suscipit, nulla sem tempus lorem,\\n" +
                        "sit amet semper nibh mi cursus neque.\\n" +
                        "Nulla vel purus. Sed a nulla. Quisque venenatis laoreet mi.",
                        "Lorem ipsum dolor sit amet, consectetuer adipiscing elit");
                a.setStyle("creationCompleteEffect", alertCreationCompleteEffect);
                a.isPopUp = false;
                a.cacheAsBitmap = true;
            }
        ]]>
    </mx:Script>

</mx:Application>

Tagged as: creationCompleteEffect