Flex Examples » draw() http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Creating FLV cuepoint thumbnails using the Bitmap and BitmapData classes http://blog.flexexamples.com/2007/08/03/creating-flv-cuepoint-thumbnails-using-the-bitmap-and-bitmapdata-classes/ http://blog.flexexamples.com/2007/08/03/creating-flv-cuepoint-thumbnails-using-the-bitmap-and-bitmapdata-classes/#comments Sat, 04 Aug 2007 05:55:06 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/03/creating-flv-cuepoint-thumbnails-using-the-bitmap-and-bitmapdata-classes/ This is semi-related to the previous post, but this is something I’ve wanted to do for a while now. In fact, I first started thinking about it when I did the Image color picker sample. Basically, how can you take a bitmap image of something on the Stage and then create an item renderer out [...]]]> This is semi-related to the previous post, but this is something I’ve wanted to do for a while now. In fact, I first started thinking about it when I did the Image color picker sample. Basically, how can you take a bitmap image of something on the Stage and then create an item renderer out of it. The answer turned out to be fairly easy (much to my surprise).

In this mini-application we look at how to take a snapshot of the video at each cue point. We then take that bitmap, and bind it to a TileList control’s data provider so our TileList shows handy video cue points, along with an HTML-formatted label of the cue point name/time/type.

Full code after the jump.

Also note that when we create the HTML-formatted itemRenderer, we have to escape the <b> tags as &lt;b&gt;.

<?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[
            import mx.events.CuePointEvent;
            import mx.collections.ArrayCollection;

            [Bindable]
            private var arrColl:ArrayCollection = new ArrayCollection();

            private function copyBitmap(source:DisplayObject):Bitmap {
                var bmd:BitmapData = new BitmapData(source.width, source.height);
                bmd.draw(source);
                return new Bitmap(bmd);
            }

            private function videoDisplay_cuePoint(evt:CuePointEvent):void {
                var bm:Bitmap = copyBitmap(evt.currentTarget as DisplayObject);
                arrColl.addItem({bitmap:bm, cuePointName:evt.cuePointName, cuePointTime:evt.cuePointTime, cuePointType:evt.cuePointType});
            }
        ]]>
    </mx:Script>

    <mx:Panel id="panel" layout="horizontal">
        <mx:HBox paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5" backgroundColor="black">
            <mx:VideoDisplay id="videoDisplay" source="http://www.helpexamples.com/flash/video/cuepoints.flv" cuePoint="videoDisplay_cuePoint(event)" top="5" />
        </mx:HBox>

        <mx:TileList id="tileList" columnCount="1" dataProvider="{arrColl}" width="{videoDisplay.width}" height="{videoDisplay.height + 10}" verticalScrollPolicy="on">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox paddingBottom="0" paddingTop="0">
                        <mx:Image source="{data.bitmap}" toolTip="{data.cuePointTime}" maintainAspectRatio="true" scaleX="0.5" scaleY="0.5" />
                        <mx:Text textAlign="left">
                            <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>
                        </mx:Text>
                    </mx:HBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:TileList>
    </mx:Panel>

</mx:Application>
 
]]> http://blog.flexexamples.com/2007/08/03/creating-flv-cuepoint-thumbnails-using-the-bitmap-and-bitmapdata-classes/feed/ 15