Jul 07

Flex中利用Bitmap和BitmapData类创建FLV暗点缩略图的例子

FlexAdd comments

在前面的不少例子中都介绍过FLV暗点相关的内容（比如：Flex中如何利用cuePointManager属性和addCuePoint事件往FLV中添加ActionScript暗点的例子），接下来的例子演示了Flex中如何利用Bitmap和BitmapData类，创建FLV暗点缩略图。

让我们先来看一下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">
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.             import mx.events.CuePointEvent;
  7.             import mx.collections.ArrayCollection;
  8.  
  9.             [Bindable]
  10.             private var arrColl:ArrayCollection = new ArrayCollection();
  11.  
  12.             private function copyBitmap(source:DisplayObject):Bitmap {
  13.                 var bmd:BitmapData = new BitmapData(source.width, source.height);
  14.                 bmd.draw(source);
  15.                 return new Bitmap(bmd);
  16.             }
  17.  
  18.             private function videoDisplay_cuePoint(evt:CuePointEvent):void {
  19.                 var bm:Bitmap = copyBitmap(evt.currentTarget as DisplayObject);
  20.                 arrColl.addItem({bitmap:bm, cuePointName:evt.cuePointName, cuePointTime:evt.cuePointTime, cuePointType:evt.cuePointType});
  21.             }
  22.         ]]>
  23.     </mx:Script>
  24.  
  25.     <mx:Panel id="panel" layout="horizontal">
  26.         <mx:HBox paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5" backgroundColor="black">
  27.             <mx:VideoDisplay id="videoDisplay" source="http://www.helpexamples.com/flash/video/cuepoints.flv" cuePoint="videoDisplay_cuePoint(event)" top="5" />
  28.         </mx:HBox>
  29.  
  30.         <mx:TileList id="tileList" columnCount="1" dataProvider="{arrColl}" width="{videoDisplay.width}" height="{videoDisplay.height + 10}" verticalScrollPolicy="on">
  31.             <mx:itemRenderer>
  32.                 <mx:Component>
  33.                     <mx:HBox paddingBottom="0" paddingTop="0">
  34.                         <mx:Image source="{data.bitmap}" toolTip="{data.cuePointTime}" maintainAspectRatio="true" scaleX="0.5" scaleY="0.5" />
  35.                         <mx:Text textAlign="left">
  36.                             <mx:htmlText>name: &lt;b&gt;{data.cuePointName}&lt;/b&gt;&lt;br /&gt;time: {data.cuePointTime} &lt;br /&gt;type: {data.cuePointType}</mx:htmlText>
  37.                         </mx:Text>
  38.                     </mx:HBox>
  39.                 </mx:Component>
  40.             </mx:itemRenderer>
  41.         </mx:TileList>
  42.     </mx:Panel>
  43.  
  44. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , , , ,

Related Post

Leave a Reply