webqem blog

As a contributor to Builder AU I was unable to submit an entry in the recent Adobe/Builder AU Flex Developer Derby, but I decided to build something just the same – a Flex video show & snap app. The main features? Video playback with captioning/translations; image grabbing of the video content; annotation of the image grabs and printing of both the notes and the images themselves.

The application in question was originally a demo application that has been evolving for some time, first as a Flash 8 demo that I had built for a presentation that I delivered at KiwiFlash 2005 and now evolved and redone in Flex.

So what does this application do? Well first, it’s a video player of sorts. What’s missing are the playback controls (easily added but not needed for this demo!) – but there are some nice extras instead.

While loading the video the application also pulls in cuepoints and captioning in a number of languages via a single XML file. It’s written to be generic so that a deployed version could accept arguments to instruct it to load specific videos and associated captions.

The other thing that the application does is allow the user to take “snapshots” of the video as it plays and add notes to their snapshots for some kind of recordkeeping. The images and their associated notes can be printed directly from the application.

This version of the application uses:

• mx:VideoDisplay
• mx:HTTPService to retrieve the XML data used for the video’s cuepoints and the various translations
• E4x to quickly parse the XML data used for the video’s cuepoints and the various translations
• BitmapData in the process of capturing the video images, code inspiration for the Flex version from Jam
• An ArrayCollection to store all data used in the various parts of the application, including the BitmapData for the captures
• Printing logic that was stolen almost directly from the Component Explorer

Credit where credit is due:

• More than 80% of this Flex application was authored on a Mac without the benefit of Flex Builder, instead it was written on Dreamweaver 8 and compiled using Tom Lee’s FlexWeaver plugin, here’s looking forward to Flex Builder on the Mac
• The icons used within the application are Silk Icons from famfamfam.com

So what could you do with this? Well the original inspiration was a video of a Microsoft demo made to a medical imaging conference – their demo allowed a medical specialist to add notes to the video output of a diagnosis machine. Perhaps it could be used by a movie critic to annotate what they’re reviewing – who knows?

Could the images captured be saved back to the server? Without a doubt, check out this post about image capture in Flex from work colleague Mike Shaw – interesting stuff.

Is there sample code available? While I’m intending to release snippets of what’s in the application I probably won’t release it in its entirety – but you never know unless you ask!.