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 <b>.
<?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: <b>{data.cuePointName}</b><br />time: {data.cuePointTime} <br />type: {data.cuePointType}</mx:htmlText>
</mx:Text>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
</mx:Panel>
</mx:Application>
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.
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.
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
ilanb,
Sorry, I don’t have any experience with FMS, so I don’t think I can offer any useful advice. Although, I did find the following URLs while searching for Flex FMS:
http://www.flash-communications.net/technotes/fms2/flex2FMS/index.html
http://livedocs.adobe.com/labs/flex/3/html/controls_015_20.html
Hopefully that helps,
Peter
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
Here I have a guide on how to add subtitles to videos with cuepoint. Maybe it’s also helpful.
The site is http://www.video-to-flash.com/add_watermark/.
Until now I’ve been using Captionate by Burak in order to work with flash video and cue points:
http://www.flash-video-soft.com/flash-video-mx-sdk/
Now the Flash 8 Video Encoder enables you to embed more metadata such as cue points, which I think is a fantastic feature.