Flex中利用backgroundImage样式给VideoDisplay控件设置一个背景图片的例子

By Minidxer | August 31, 2008

在前面的Flex中如何设定VideoDisplay控件背景颜色(background color)的例子中，我们了解了如何给VideoDisplay设置背景颜色，不过很多的时候图片让人看起来更加赏心悦目一些。接下来的例子演示了Flex中如何利用backgroundImage样式，给VideoDisplay控件设置一个背景图片。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="VideoDisplay_backgroundImage_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.events.VideoEvent;
  11.             import mx.utils.StringUtil;
  12.  
  13.             private const src:String =
  14.                     "http://blog.minidx.com/ext/water.flv";
  15.  
  16.             private function loadBtn_click(evt:MouseEvent):void {
  17.                 videoDisplay.source = src;
  18.             }
  19.  
  20.             private function playBtn_click(evt:MouseEvent):void {
  21.                 videoDisplay.stop();
  22.                 videoDisplay.play();
  23.             }
  24.  
  25.             private function videoDisplay_ready(evt:VideoEvent):void {
  26.                 loadBtn.enabled = false;
  27.                 playBtn.enabled = true;
  28.             }
  29.  
  30.             private function videoDisplay_playheadUpdate(evt:VideoEvent):void {
  31.                 var playTime:Number = videoDisplay.playheadTime;
  32.                 var totTime:Number = videoDisplay.totalTime;
  33.                 progressBar.setProgress(playTime, totTime);
  34.                 progressBar.label = StringUtil.substitute("{0} of {1}",
  35.                                                     playTime.toFixed(3),
  36.                                                     totTime.toFixed(3));
  37.             }
  38.         ]]>
  39.     </mx:Script>
  40.  
  41.     <mx:ApplicationControlBar dock="true">
  42.         <mx:Button id="loadBtn"
  43.                 label="Load"
  44.                 click="loadBtn_click(event);" />
  45.         <mx:Button id="playBtn"
  46.                 label="Play"
  47.                 enabled="false"
  48.                 click="playBtn_click(event);" />
  49.     </mx:ApplicationControlBar>
  50.  
  51.     <mx:VideoDisplay id="videoDisplay"
  52.             autoPlay="true"
  53.             backgroundImage="@Embed('Fx2.png')"
  54.             width="230"
  55.             height="220"
  56.             ready="videoDisplay_ready(event);"
  57.             playheadUpdate="videoDisplay_playheadUpdate(event);" />
  58.  
  59.     <mx:ProgressBar id="progressBar"
  60.             mode="manual"
  61.             label="{videoDisplay.state}"
  62.             labelPlacement="center"
  63.             width="{videoDisplay.width}" />
  64.  
  65. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads