Creating a custom creation complete effect on a Flex Alert control

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.


<?xml version="1.0" encoding="utf-8"?>
<!-- -->
<mx:Application xmlns:mx=""

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

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

        Alert {
            fontFamily: VerdanaEmbedded;
            creationCompleteEffect: myEffect;

            import mx.controls.Alert;

            private var alert:Alert;

            private function button_click():void {
                alert ="The quick brown fox jumped over the lazy dog", "Lorem Ipsum");

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

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


View source is enabled in the following example.

8 thoughts on “Creating a custom creation complete effect on a Flex Alert control

  1. 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


Comments are closed.