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 with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

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

  1. Anonymous says:

    Why i can’t hear anything when the dialog box displayed?

  2. MusGar says:

    Yeap, im dont hear too :(

  3. peterd says:

    Anonymous/MusGar,

    What version/build of Flash Player are you guys using (the Alert control above should tell you the exact build number, or visit http://blog.flexexamples.com/about-you/)? Also, what browser/OS are you using?

    I’m using the following browsers/Flash Players and hear the audio “beep” on each:
    (a) Win 10,0,0,525 / Windows XP SP3 / Chrome
    (b) Win 10,0,0,525 / Windows XP SP3 / Firefox 3.0.3
    (c) Win 10,0,2,54 / Windows XP SP3 / IE7

    Peter

  4. Hashashino says:

    Im running on Flash player 9 and the sound’s good.

  5. Marc says:

    This tiny code also works:

    <mx:SoundEffect id="SndError" source="@Embed(source='/assets/gui_error.mp3')" />
    
    <mx:Style>
           Alert { creationCompleteEffect: SndError; }
    </mx:Style>