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>

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

  1. I have a problem that the Alert box is not appearing at the center.. its appearing at the top. thanks.

  2. Hi….I wish to decrease the transparency of the fade effect that takes place when an alert shows, since my alert has background color as white… Can you suggest something for this?

    Thanks in advance

Comments are closed.