Jul 20

Flex中如何从HTML容器中接受FlashVars动态创建ActionScript暗点的例子

FlexAdd comments

在前面的例子中分别了解过FlashVars以及暗点的创建（右上角Search……），接下来的例子演示了Flex中如何从HTML容器中接受FlashVars动态创建ActionScript暗点。

让我们先来看一下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" layout="vertical" verticalAlign="middle" backgroundColor="white" applicationComplete="init()">
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.             import mx.events.VideoEvent;
  7.             import mx.collections.ArrayCollection;
  8.             import mx.events.CuePointEvent;
  9.             import mx.managers.SystemManager;
  10.             import mx.utils.URLUtil;
  11.             import mx.utils.ObjectUtil;
  12.  
  13.             [Bindable]
  14.             private var arrColl:ArrayCollection;
  15.  
  16.             private function init():void {
  17.                 arrColl = new ArrayCollection();
  18.  
  19.                 var cpObj:Object;
  20.  
  21.                 var item:String;
  22.                 var itemArr:Array;
  23.                 var params:Object = Application.application.parameters;
  24.                 if (params.hasOwnProperty("cuepoints")) {
  25.                     cpObj = URLUtil.stringToObject(params.cuepoints);
  26.                     for (item in cpObj) {
  27.                         itemArr = item.split(":");
  28.                         videoDisplay.cuePointManager.addCuePoint({name:itemArr[0], time:Number(itemArr[1])});
  29.                     }
  30.                 }
  31.             }
  32.  
  33.             private function videoDisplay_cuePoint(evt:CuePointEvent):void {
  34.                 var cpDate:Date = new Date(evt.cuePointTime * 1000);
  35.                 arrColl.addItem({name:evt.cuePointName, time:dateFormatter.format(cpDate)});
  36.             }
  37.  
  38.             private function videoDisplay_playheadUpdate(evt:VideoEvent):void {
  39.                 var pDate:Date = new Date(evt.playheadTime * 1000 || 10);
  40.                 var tDate:Date = new Date(evt.currentTarget.totalTime * 1000);
  41.                 progressBar.setProgress(evt.playheadTime, evt.currentTarget.totalTime);
  42.                 progressBar.label = dateFormatter.format(pDate) + " / " + dateFormatter.format(tDate);
  43.             }
  44.  
  45.             private function videoDisplay_progress(evt:ProgressEvent):void {
  46.                 progressBar.conversion = 1024; /* Convert bytes to kilobytes. */
  47.                 progressBar.label = "%1 of %2 KB (%3%%)";
  48.                 progressBar.setProgress(evt.bytesLoaded, evt.bytesTotal);
  49.             }
  50.  
  51.             private function videoDisplay_click(evt:MouseEvent):void {
  52.                 videoDisplay.play();
  53.             }
  54.         ]]>
  55.     </mx:Script>
  56.  
  57.     <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />
  58.  
  59.     <mx:HBox>
  60.         <mx:Canvas>
  61.             <mx:VideoDisplay id="videoDisplay"
  62.                     autoPlay="false"
  63.                     autoRewind="false"
  64.                     source="http://blog.minidx.com/ext/water.flv"
  65.                     cuePointManagerClass="mx.controls.videoClasses.CuePointManager"
  66.                     cuePoint="videoDisplay_cuePoint(event)"
  67.                     playheadUpdate="videoDisplay_playheadUpdate(event)"
  68.                     progress="videoDisplay_progress(event)"
  69.                     click="videoDisplay_click(event)"
  70.                     rewind="arrColl=new ArrayCollection()"
  71.                     rollOver="progressBar.visible = true"
  72.                     rollOut="progressBar.visible = false" />
  73.  
  74.             <mx:ProgressBar id="progressBar" mouseChildren="false"
  75.                     labelPlacement="center"
  76.                     visible="false"
  77.                     mouseEnabled="false"
  78.                     mode="manual" left="5" right="5" bottom="5" />
  79.         </mx:Canvas>
  80.  
  81.         <mx:DataGrid id="dataGrid"
  82.                 height="100%"
  83.                 dataProvider="{arrColl}">
  84.             <mx:columns>
  85.                 <mx:DataGridColumn dataField="name"
  86.                         headerText="CuePoint Name:" />
  87.                 <mx:DataGridColumn dataField="time"
  88.                         headerText="CuePoint Time:" />
  89.             </mx:columns>
  90.         </mx:DataGrid>
  91.     </mx:HBox>
  92.  
  93. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , ,

One Response to “Flex中如何从HTML容器中接受FlashVars动态创建ActionScript暗点的例子”

Trackbacks

Leave a Reply