Flex Examples
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 deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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.
When I scroll up and down it looses the images
this example
http://blog.flexexamples.com/2007/08/03/duplicating-images-using-the-bitmap-and-bitmapdata-classes/
looses the images as well.
I am using Flex 3. I am looking for away to have hundreds of images in the tilelist ( nor from files) and scrolling up and down wont loose the images
any idea folks. I am pulling my hair out!
geoff,
I’m not seeing the images disappear when i scroll the page (or scroll the tile list).
Which version of Flash Player are you using? http://blog.flexexamples.com/about-you/
Peter
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(data.bm.bitmapData.clone())}. That fixed it but I’m sure its a waste of memory.
My configuration:
flex builder 3, flex 3.2 sdk, flash player 10
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
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
I too need to create thumbnails for PDF, DOC, other files (besides images)… please help! thanks in advance!
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……………..
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.
T.