AS3: Visualizing Video

In an attempt to start using AS3 and Flexbuilder, I created a simple module (based in part on Brendan Dawes “Cinema Redux” processing experiment), that visualizes a movie by taking snapshots of frames on a supplied sample rate. It uses those snapshots to create a visual mosaic image, which allows you to see the use of light, color, and transition throughout the movie.

SAMPLE SWF
Below is a sample of the module using the video “Pakt”, courtesy of my friend Shawn Moore.

Download the latest Flash player to view this content

SOURCE
The source files are available for you to play around with, but make sure you use the following compiler settings :
-default-size 320 270

AS3 MIGRATION NOTES

  • Stage is now accessible as an instance property (stage) of a DisplayObject
  • Bitmaps can be a DisplayObject instead of having to add them to a MovieClip
  • NetStream’s audio can be controlled directly via it’s soundTransform property
  • NetStream’s onMetaData event is not part of the listener model and must be caught using an event handler
  • Netstreams are added to a Video instance using attachNetStream now vs. attachVideo
  • setInterval has been depreciated and replaced with the new Timer class
  • onMetaData is not assured to come after detecting a Video’s completion of load.

6 comments

  1. John Giotta

    Hey Ken,
    True that there is no event framework for onMetaData, but the old method still holds it’s value.

    NStream[“onMetaData”]

    It may not be proper, but it still works for the time being.

  2. Ian Turgeon

    I know you mentioned this was built in Flex Builder 2, but I’m a little confused as it’s running perfectly fine in my Flash 8.0 player

  3. Kenny Bunch

    Ian,
    Nice observation. The demo you see is actually v8, as I wanted to let as many people see it as possible. The source is 8.5.

  4. mason

    kenny, nice to see you posting again — this demo is great. When you get a chance you should put up the two panel view where you can see the video and the mosaic.

    As always, great work!

  5. Andrea

    Hi Kenny, I’m strongly trying to display a Video with a mxml in Flex 2.0; I created a class in AS3 that works exactly like yours but even though FCS is workinf fine I can’t see the video..why? How do I instantiate the class? As an mxml tag? Do you have any suggestion? Can you help me?

  6. Patrick Hunton

    Kenny, very cool. I did something like this a few months ago, but haven’t gotten a chance to get back to it and make it quite what I wanted it to be. I also did another experiment that uses BitmapData and video so that you can click and drag sections of a video to different areas and it continues to play.

    the wall:
    http://dev.cabedge.net/videowall/video_wall.swf

    the movable sections (click and drag around the video):
    http://dev.cabedge.net/videowall/video3.swf

    (oh, and just FYI, they are both F8)

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">