Playing a sound effect when an Alert control is displayed in Flex

The following example shows how you can play an embedded MP3 when a Flex Alert control is displayed by setting the creationCompleteEffect style/effect.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/10/playing-a-sound-effect-when-an-alert-control-is-displayed-in-flex/ -->
<mx:Application name="Alert_creationCompleteEffect_test_2"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            [Embed("assets/iconCritical.png")]
            private var IconCritical:Class;

            private function showAlert():void {
                var message:String = "The quick brown fox jumped over the lazy dog.";
                var title:String = "Alert title";
                var a:Alert = Alert.show(message,
                            title,
                            Alert.OK,
                            null,
                            null,
                            IconCritical);
                a.status = Capabilities.version;
                a.isPopUp = false;
            }
        ]]>
    </mx:Script>

    <mx:Style>
        Alert {
            creationCompleteEffect: ding;
        }
    </mx:Style>

    <mx:SoundEffect id="ding"
            source="@Embed('assets/ding.mp3')"
            useDuration="false" />

    <mx:Button id="button"
            label="Launch Alert"
            click="showAlert();" />

</mx:Application>

View source is enabled in the following example.

You can also embed the MP3, specify the SoundEffect, and set the creationCompleteEffect in ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/10/playing-a-sound-effect-when-an-alert-control-is-displayed-in-flex/ -->
<mx:Application name="Alert_creationCompleteEffect_test_2"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

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

            [Embed("assets/iconCritical.png")]
            private const IconCritical:Class;

            [Embed("assets/ding.mp3")]
            private const DingSoundEffect:Class;

            private var ding:SoundEffect;

            private function init():void {
                ding = new SoundEffect();
                ding.source = DingSoundEffect;
                ding.useDuration = false;
            }

            private function showAlert():void {
                var message:String = "The quick brown fox jumped over the lazy dog.";
                var title:String = "Alert title";
                var a:Alert = Alert.show(message,
                            title,
                            Alert.OK,
                            null,
                            null,
                            IconCritical);
                a.setStyle("creationCompleteEffect", ding);
                a.status = Capabilities.version;
                a.isPopUp = false;
            }
        ]]>
    </mx:Script>

    <mx:Button id="button"
            label="Launch Alert"
            click="showAlert();" />

</mx:Application>

Tagged as: creationCompleteEffect