Creating a custom creation complete effect on a Flex Alert control – creationCompleteEffect – mx:SoundEffect
Monday, February 22nd, 2010 - 11:28 pm - Flex 3, Flex 3 Action Script 3 Tutorial
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="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>
The following example shows how you can set a creation complete effect on a Flex Button control by setting the creationCompleteEffect style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Button id="button"
label="Button"
creationCompleteEffect="Zoom" />
</mx:Application>
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.
<?xml version="1.0" encoding="utf-8"?>
<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>

