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 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="" layout="vertical" verticalAlign="middle" backgroundColor="white">

            import mx.collections.ArrayCollection;

            private var arrColl:ArrayCollection = new ArrayCollection();

            private function copyBitmap(source:DisplayObject):Bitmap {
                var bmd:BitmapData = new BitmapData(source.width, source.height);
                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:Panel id="panel" layout="horizontal">
        <mx:HBox paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5" backgroundColor="black">
            <mx:VideoDisplay id="videoDisplay" source="" cuePoint="videoDisplay_cuePoint(event)" top="5" />

        <mx:TileList id="tileList" columnCount="1" dataProvider="{arrColl}" width="{videoDisplay.width}" height="{videoDisplay.height + 10}" verticalScrollPolicy="on">
                    <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>


15 thoughts on “Creating FLV cuepoint thumbnails using the Bitmap and BitmapData classes

  1. Peter your examples are very clear and useful! I hope you continue for next days.
    Can i have this example: highlight with the select color the duplicates words in the TextArea.
    Tank’you in advance.

  2. FlexLover,

    That’s a good idea, I’ll see if I can think of a semi-decent way of doing that. Off the top of my head I’d guess that you need to do the following steps:
    1) Populate a TextArea with a bunch of words.
    2) Create an array of words, and track the frequency of each word. This would probably be an array of objects where the object key is the word, and the value is the count.
    3) Filter the array from step 2 so you only have words that appear 2 or more times.
    4) Use RegExp class or String class to find each instance of duplicated words.
    5) Use the TextRange class to hightlight each duplicated word.

    Shouldn’t be *too* hard (famous last words) but I imagine the trick will be when using RegExp that you have to carefully determine word boundaries. If you find a duplicated word of “an”, you wouldn’t want to highlight portions of words such as “cantaloupe” or “anteater” or “candy”. I imagine you may also run in to some issues with punctuation where it may consider “times.” and “times” to be different words because one happens to contain a period.

  3. Hi,

    Realy cool exemple, but can you tell how to use this with a video on FMS server (rtmp), I try your exemple and I have always sandbox security error .

    here is the code :

    Thanks for all your exemples

  4. Hello. i have tryed you sample and works great, so i decided to include it in my app but there is a problem.

    I have created a custom component based on the tile list, and another custom component based on the HBox for the item renderer. The error arraises when I scroll up and down with my mouse weel the imges get lost…if i scroll the tileList custom component with the handlers, there is no problem.

    Any idea?

    I´m using flex builder 3 and air b2.

    Thanks a lot

  5. I’m getting similar results, I lose the images when I scroll. The only workaround I could find is to bind the images to {new Bitmap(}. That fixed it but I’m sure its a waste of memory.

    My configuration:
    flex builder 3, flex 3.2 sdk, flash player 10

  6. hey herve i m facing the same problem but i didnt understand wat u did,sry but i m new to flex3 ,so plz can u provide ur mxml file.
    thank u

  7. hi , i want to put videos and pdf/doc files in the tilelist , and when i put it inside th tilelist i wanted the thumbnail image of the respective file to be displayed , can anyone help me out.
    thank you

  8. hi,
    i have swf file, which i have loaded using swfloader. Now that swf contains text control. I am not able to make out how to
    access that control because swf is generted through the actionscript project.
    If i want to access only the text appearing the text control of the swf file, is it possible?
    please reply……………..

  9. Hello,

    First off thanks for the post this is really helpful.
    I was wondering if anyone knew of a website that uses this mechanism (of thumbnail cue points)?

    Thanks for your help.

Comments are closed.