In a previous example, “Setting a complete effect on a ProgressBar control in Flex”, we saw how you could apply an effect that plays once a Flex ProgressBar control completes (reaches 100%).
The following code shows how you can play an embedded sound effect once a Flex ProgressBar control completes using the mx.effects SoundEffect class and the ProgressBar class’s completeEffect
effect/style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/06/30/playing-a-sound-effect-when-a-progressbar-control-completes-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.SliderEvent; private function slider_change(evt:SliderEvent):void { progressBar.setProgress(evt.value, slider.maximum); } ]]> </mx:Script> <mx:SoundEffect id="ding" source="@Embed('ding.mp3')" /> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="percentComplete:"> <mx:HSlider id="slider" minimum="0" maximum="100" value="0" snapInterval="1" tickInterval="10" liveDragging="true" showTrackHighlight="true" change="slider_change(event);" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:ProgressBar id="progressBar" mode="manual" completeEffect="{ding}" /> </mx:Application>
View source is enabled in the following example.
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/06/30/playing-a-sound-effect-when-a-progressbar-control-completes-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" initialize="init();"> <mx:Script> <![CDATA[ import mx.containers.ApplicationControlBar; import mx.containers.Form; import mx.containers.FormItem; import mx.controls.HSlider; import mx.controls.ProgressBar; import mx.controls.ProgressBarMode; import mx.effects.SoundEffect; import mx.events.SliderEvent; [Embed("ding.mp3")] private var dingMP3:Class; private var ding:SoundEffect; private var slider:HSlider; private var progressBar:ProgressBar; private function init():void { ding = new SoundEffect(); ding.source = dingMP3; slider = new HSlider(); slider.minimum = 0; slider.maximum = 100; slider.value = 0; slider.snapInterval = 1; slider.tickInterval = 10; slider.liveDragging = true; slider.setStyle("showtrackHighlight", true); slider.addEventListener(SliderEvent.CHANGE, slider_change); var formItem:FormItem = new FormItem(); formItem.label = "percentComplete:"; formItem.addChild(slider); var form:Form = new Form(); form.styleName = "plain"; form.addChild(formItem); var appControlBar:ApplicationControlBar; appControlBar = new ApplicationControlBar(); appControlBar.dock = true; appControlBar.addChild(form); Application.application.addChildAt(appControlBar, 0); progressBar = new ProgressBar(); progressBar.mode = ProgressBarMode.MANUAL; progressBar.setStyle("completeEffect", ding); addChild(progressBar); } private function slider_change(evt:SliderEvent):void { progressBar.setProgress(evt.value, slider.maximum); } ]]> </mx:Script> </mx:Application>
Oh great tutorial. thanks dude.
This code is really hard… But love it
I am not your dude!