Jul 21

Flex中利用HTTPService从FlashVars载入动态创建ActionScript暗点的例子

FlexAdd comments

在前面Flex中如何从HTML容器中接受FlashVars动态创建ActionScript暗点的例子我们介绍过从HTML中接受FlashVars动态创建ActionScript暗点，接下来的例子演示了Flex中利用HTTPService从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"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="httpService.send()">
  7.  
  8.     <mx:HTTPService id="httpService"
  9.             url="cuepoints.txt"
  10.             result="httpService_result(event)"
  11.             resultFormat="flashvars" />
  12.  
  13.     <mx:Script>
  14.         <![CDATA[
  15.             import mx.rpc.events.ResultEvent;
  16.             import mx.events.VideoEvent;
  17.             import mx.collections.ArrayCollection;
  18.             import mx.events.CuePointEvent;
  19.             import mx.managers.SystemManager;
  20.             import mx.utils.URLUtil;
  21.             import mx.utils.ObjectUtil;
  22.  
  23.             [Bindable]
  24.             private var arrColl:ArrayCollection = new ArrayCollection();
  25.  
  26.             private function httpService_result(evt:ResultEvent):void {
  27.                 var flashVars:Object = httpService.lastResult;
  28.  
  29.                 var item:String;
  30.                 for (item in flashVars) {
  31.                     videoDisplay.cuePointManager.addCuePoint({name:item, time:flashVars[item]});
  32.                 }
  33.             }
  34.  
  35.             private function videoDisplay_cuePoint(evt:CuePointEvent):void {
  36.                 var cpDate:Date = new Date(evt.cuePointTime * 1000);
  37.                 arrColl.addItem({name:evt.cuePointName, time:dateFormatter.format(cpDate)});
  38.             }
  39.  
  40.             private function videoDisplay_playheadUpdate(evt:VideoEvent):void {
  41.                 var pDate:Date = new Date(evt.playheadTime * 1000 || 10);
  42.                 var tDate:Date = new Date(evt.currentTarget.totalTime * 1000);
  43.                 progressBar.setProgress(evt.playheadTime, evt.currentTarget.totalTime);
  44.                 progressBar.label = dateFormatter.format(pDate) + " / " + dateFormatter.format(tDate);
  45.             }
  46.  
  47.             private function videoDisplay_progress(evt:ProgressEvent):void {
  48.                 progressBar.conversion = 1024; /* Convert bytes to kilobytes. */
  49.                 progressBar.label = "%1 of %2 KB (%3%%)";
  50.                 progressBar.setProgress(evt.bytesLoaded, evt.bytesTotal);
  51.             }
  52.  
  53.             private function videoDisplay_click(evt:MouseEvent):void {
  54.                 videoDisplay.play();
  55.             }
  56.         ]]>
  57.     </mx:Script>
  58.  
  59.     <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />
  60.  
  61.     <mx:HBox>
  62.         <mx:Canvas>
  63.             <mx:VideoDisplay id="videoDisplay"
  64.                     autoPlay="false"
  65.                     autoRewind="false"
  66.                     source="http://www.helpexamples.com/flash/video/water.flv"
  67.                     cuePointManagerClass="mx.controls.videoClasses.CuePointManager"
  68.                     cuePoint="videoDisplay_cuePoint(event)"
  69.                     playheadUpdate="videoDisplay_playheadUpdate(event)"
  70.                     progress="videoDisplay_progress(event)"
  71.                     click="videoDisplay_click(event)"
  72.                     rewind="arrColl=new ArrayCollection()"
  73.                     rollOver="progressBar.visible = true"
  74.                     rollOut="progressBar.visible = false" />
  75.  
  76.             <mx:ProgressBar id="progressBar"
  77.                     mouseChildren="false"
  78.                     labelPlacement="center"
  79.                     visible="false"
  80.                     mouseEnabled="false"
  81.                     mode="manual" left="5" right="5" bottom="5" />
  82.         </mx:Canvas>
  83.  
  84.         <mx:DataGrid id="dataGrid"
  85.                 height="100%"
  86.                 dataProvider="{arrColl}">
  87.             <mx:columns>
  88.                 <mx:DataGridColumn dataField="name"
  89.                         headerText="CuePoint Name:" />
  90.                 <mx:DataGridColumn dataField="time"
  91.                         headerText="CuePoint Time:" />
  92.             </mx:columns>
  93.         </mx:DataGrid>
  94.     </mx:HBox>
  95.  
  96. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , ,

Related Post

Leave a Reply