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

在前面的Flex中如何设定VideoDisplay控件背景颜色(background color)的例子中，我们了解了如何通过设置

backgroundColor风格来修改

VideoDisplay控件背景颜色。接下来的例子演示了如何通过设置

backgroundAlpha

风格来设定VideoDisplay控件背景透明度(background alpha)。

让我们先来看一下Demo（

可以右键View Source或点击这里察看源代码

）

：
Download: main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

<mx:Script>
<![CDATA[
private function loadButton_click(evt:MouseEvent):void {
var url:String = "http://blog.minidx.com/ext/getting-started-with-the-videodisplay-control/clouds.flv";
videoDisplay.source = url;
}

private function unloadButton_click(evt:MouseEvent):void {
videoDisplay.close();
videoDisplay.source = null;
videoDisplay.mx_internal::videoPlayer.clear();
}
]]>
</mx:Script>

<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="backgroundAlpha:">
<mx:HSlider id="slider"
minimum="0.0"
maximum="1.0"
value="1"
snapInterval="0.01"
liveDragging="true" />
</mx:FormItem>
<mx:FormItem label="backgroundColor:">
<mx:ColorPicker id="colorPicker" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>

<mx:VideoDisplay id="videoDisplay"
backgroundAlpha="{slider.value}"
backgroundColor="{colorPicker.selectedColor}"
width="160"
height="120" />

<mx:ControlBar>
<mx:Button id="loadButton"
label="Load"
click="loadButton_click(event);" />
<mx:Button id="unloadButton"
label="Unload"
click="unloadButton_click(event);" />
</mx:ControlBar>

</mx:Application>