Flex中如何通过设置backgroundAlpha风格来设定VideoDisplay控件的背景透明度(background alpha)的例子

在前面的 Flex中如何设定VideoDisplay控件背景颜色(background color)的例子中，我们了解了如何通过设置 backgroundColor风格来修改VideoDisplay控件背景颜色。接下来的例子演示了如何通过设置 backgroundAlpha风格来设定VideoDisplay控件背景透明度(background alpha)。

让我们先来看一下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">
7.     <mx:Script>
8.         <![CDATA[
9.             private function loadButton_click(evt:MouseEvent):void {
10.                 var url:String = "http://blog.minidx.com/ext/getting-started-with-the-videodisplay-control/clouds.flv";
11.                 videoDisplay.source = url;
12.             }
14.             private function unloadButton_click(evt:MouseEvent):void {
15.                 videoDisplay.close();
16.                 videoDisplay.source = null;
17.                 videoDisplay.mx_internal::videoPlayer.clear();
18.             }
19.         ]]>
20.     </mx:Script>
22.     <mx:ApplicationControlBar dock="true">
23.         <mx:Form styleName="plain">
24.             <mx:FormItem label="backgroundAlpha:">
25.                 <mx:HSlider id="slider"
26.                         minimum="0.0"
27.                         maximum="1.0"
28.                         value="1"
29.                         snapInterval="0.01"
30.                         liveDragging="true" />
31.             </mx:FormItem>
32.             <mx:FormItem label="backgroundColor:">
33.                 <mx:ColorPicker id="colorPicker" />
34.             </mx:FormItem>
35.         </mx:Form>
36.     </mx:ApplicationControlBar>
38.     <mx:VideoDisplay id="videoDisplay"
39.             backgroundAlpha="{slider.value}"
40.             backgroundColor="{colorPicker.selectedColor}"
41.             width="160"
42.             height="120" />
44.     <mx:ControlBar>
45.         <mx:Button id="loadButton"
46.                 label="Load"
47.                 click="loadButton_click(event);" />
48.         <mx:Button id="unloadButton"
49.                 label="Unload"
50.                 click="unloadButton_click(event);" />
51.     </mx:ControlBar>
53. </mx:Application>