Creating a custom creation complete effect on a Flex Alert control

by Peter deHaan on October 12, 2007

in Alert, Fade, Parallel, Rotate, Sequence, Zoom

The following example shows how to specify an effect which gets played when an Alert control is displayed by setting the Alert control’s creationCompleteEffect style. You can also see how to embed both the normal and bold font using CSS and @font-face.

Full code after the jump.

View MXML

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

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

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

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

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

            private var alert:Alert;

            private function button_click():void {
                alert = Alert.show("The quick brown fox jumped over the lazy dog", "Lorem Ipsum");
            }
        ]]>
    </mx:Script>

    <mx:Sequence id="myEffect">
        <mx:Parallel>
            <mx:Zoom />
            <mx:Fade />
        </mx:Parallel>
        <mx:Rotate />
    </mx:Sequence>

    <mx:Button label="Launch Alert" click="button_click();" />

</mx:Application>

View source is enabled in the following example.

{ 8 comments… read them below or add one }

1 aryan September 29, 2008 at 9:10 am

cool

Reply

2 guillaume November 12, 2008 at 10:54 pm

I don’t understand why changing the effect such way

doesn’t realize what we should expect?

Reply

3 Muhammad Saqib Agha January 20, 2009 at 11:08 pm

Hello,
Saqib Agha from Pakistan.

I am trying to use this technique in external css.. its now working.. how can i use it there. I have Alert class there so cannot declare it internally in mxml file.

Please help

Thanks

Reply

4 Muhammad Saqib Agha January 21, 2009 at 12:02 am

Heyy ,

I achieved it. it worked with external too.

Thanks

Reply

5 Gnanz... April 13, 2009 at 3:45 am

Nice one

Reply

6 J.C.Ködel April 17, 2009 at 12:47 pm

And how can we set a effect when the Alert is closing (as we click on OK button)?

Reply

7 Arnaud September 17, 2009 at 11:13 pm

You can find another kind of Alert (timed and auto closing) here:
http://afoucal.free.fr/index.php/2009/07/06/flex-notification/

Regards

Reply

8 Darrough November 18, 2009 at 7:15 pm

Is there any option for showing that type of effect on close for alerts?

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: