Jul 01

在前面的Flex中设置进度条(ProgressBar)完成时效果的例子中,我们了解了如何给进度条(ProgressBar)设置一个完成(100%)时效果。接下来的例子则演示了Flex中如何利用mx.effects SoundEffect类和ProgressBar类的completeEffect样式,在进度条(ProgressBar)最后完成时播放一个声音效果。

让我们先来看一下Demo(可以右键View Source或点击这里察看源代码):


下面是完整代码(或点击这里察看):

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.events.SliderEvent;
  10.  
  11.             private function slider_change(evt:SliderEvent):void {
  12.                 progressBar.setProgress(evt.value, slider.maximum);
  13.             }
  14.         ]]>
  15.     </mx:Script>
  16.  
  17.     <mx:SoundEffect id="ding"
  18.             source="@Embed('ding.mp3')" /> 
  19.  
  20.     <mx:ApplicationControlBar dock="true">
  21.         <mx:Form styleName="plain">
  22.             <mx:FormItem label="percentComplete:">
  23.                 <mx:HSlider id="slider"
  24.                         minimum="0"
  25.                         maximum="100"
  26.                         value="0"
  27.                         snapInterval="1"
  28.                         tickInterval="10"
  29.                         liveDragging="true"
  30.                         showTrackHighlight="true"
  31.                         change="slider_change(event);" />
  32.             </mx:FormItem>
  33.         </mx:Form>
  34.     </mx:ApplicationControlBar>
  35.  
  36.     <mx:ProgressBar id="progressBar"
  37.             mode="manual"
  38.             completeEffect="{ding}" />
  39.  
  40. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:minidxer

written by Minidxer  |  tags: , , , ,

Related Post

One Response to “Flex中如何利用mx.effects SoundEffect类和ProgressBar类的completeEffect样式在进度条(ProgressBar)最后完成时播放一个声音效果的例子”

Trackbacks

Leave a Reply