New Flash Tool: The Self-Rendering V-Cam

Today I’m going to introduce you to a tool I developed a while ago that I finally got ready for public release.  It’s a modification of the concept of the V-Cam, a tool that’s been around for a while in the Flash world.

“V-Cam” stands for “virtual camera.”  It’s a tool that lets you define the viewport of your Flash movie with a rectangular “viewfinder”, rather than just with the location of your subject on the stage.  This means that you can leave your drawing in one location on the stage, then animate the V-Cam all over the place, including rotation, skewing, etc, and that view will be the one you see in the final product.  It’s a very useful tool, making framing much more intuitive.

Initially, the problem with the V-Cam that was available online was that it was written only for Actionscript 2.  So I updated it to work with Actionscript 3, since everything I was working on was in the newer version of the language.  I believe someone else has done the same and already released the result online, and many people use it and love it.  I’ve never tried that other one, since I already had my own.

But there’s a problem with using the V-Cam.  Flash is bad at rendering out movies that use Actionscript.  Early on, Flash couldn’t do it at all, and one had to resort to less-than-perfect third-party programs to do the job.  They weren’t so good because they didn’t generally support transparency and the decent ones cost a bunch of money.

Luckily, Adobe caught on and added a feature to Flash that allowed rendering straight to quicktime from Flash, including all Actionscripted dynamic content.  Flash people the world over rejoiced, right up until they actually tried the new feature.  Well, it turned out that it couldn’t be relied upon.  It would drop frames without any notification, so you ended up with a movie that was a different length than the one you started with.  That might be okay for people simply trying to make a quick-and-dirty static version of their Flash movie, but it super-sucked for anyone with tight, frame-accurate editing (such as what you might do if you were animating in Flash and assembling your final product in Premiere or Final Cut, or if you were dealing with lipsync).

So what was I to do?  I didn’t think I could do anything at first, but then I stumbled across a solution.  What if I could make the Flash movie render itself out to disk?  Actionscript has lots of built-in functions, including, it turns out, a PNG encoder.  Combine that with AIR’s ability to write files to the hard drive and suddenly it started to look like I could really do this thing.

So here’s what I came up with: a V-Cam that will not only operate like you would expect a V-Cam to, but it will also save a PNG sequence of itself to disk.  We’re talking full transparency, frame-by-frame precision, no dropped frames or frames missing at the beginning or end, and full support of all filters and color transform information (tint, alpha, etc).  It just does it.

Unfortunately there are a few caveats.

  1. You have to compile your SWF as an AIR application.  It won’t work with the regular Flash player.  This is because the regular Flash player doesn’t allow any significant writing to the local hard disk.  It means that you’ll pretty much have to run your movie with the “Test Movie” command from Flash – double-clicking on an AIR SWF doesn’t execute any actionscript.  There actually is a way do run the SWF directly, though, and I’d be happy to help anyone out who wants to do this.
  2. I don’t do much interactive stuff.  Most of what I use the V-Cam for is non-dynamic animation (perhaps with the occasional actionscript-powered effects).  I’m not sure if this thing’ll work at all with interactive movies.  Again, if enough people ask for it I may do something about that.  That said, it should work with any actionscript that doesn’t require mouse-based interaction.
  3. It will render out at whatever size the SWF window is currently.  The easiest way to control that is to set the document size.  This means it’s easy to develop your animation at, for instance, 640×360 (16×9 aspect ratio), then later render at 720×480 or 1920×1080 or whatever you like – just set the document size to your desired resolution.  I just want to warn you that if you’re dealing with standard-def video you’ll be doing yourself a big favor if you learn all you can about screen aspect ratios, pixel aspect ratios, resolutions, and all that good stuff.
  4. It won’t properly take account of pixel aspect ratio in your output PNG files.  They are likely to look stretched if you’re targeting a screen with non-square pixels (such as standard-def video).  You just have to make sure that the program in which you’re using the PNG sequence knows that it should interpret those files as if they have non-square pixels.  For instance, in Adobe Premiere, right-click on the image sequence in the library and select “interpret footage…” and set the correct pixel aspect ratio.  If you’re targeting a computer display or HD video you don’t need to worry about any of this.

Here’s how to set up your Flash file to use this new V-Cam:

  1. In your Flash document’s publish settings, in the Flash tab, under “Player” choose “Adobe AIR” (if there’s more than one version  choose the highest one unless you have a good reason to choose a lower one).
  2. It’s best to keep your file to a single scene.  I haven’t worked out a way to make it work correctly between multiple scenes.  Perhaps in the next version?
  3. Make sure your V-Cam exists on the first frame of the animation, and contiguously everywhere you want to use it for rendering to PNG sequence.  If the V-Cam is removed from the stage and brought back it won’t resume saving the sequence (this is why it won’t currently work between scenes).
  4. Make sure you’re you’re using the correct version of the V-Cam for your project.  It should have an unmodified aspect ratio equal to the aspect ratio of your target screen – usually either 4:3 or 16:9 if you’re targeting video. While any version of the V-Cam will work in any file, it’ll probably be less of a headache if you can ctrl-shift-Z it back to the same aspect ratio as your stage.
  5. Set your document to have the same aspect ratio as the V-Cam.  It’s not necessary to have exactly the same resolution as the active area of the vV-Cam – just resize it to whatever size you want to use.
  6. If you want to target standard-def video, use the 4:3 V-Cam and give your document a resolution of 720×480.   This will result in non-square pixels when you squish it into a 4×3 screen aspect ratio.
  7. While the movie is running:
    1. Hit shift-insert to save a PNG sequence.  The animation will start saving itself  in a subdirectory of the one that your FLA is in, called swf_render/<fla_name>.
    2. Hit PgUp to see the timeline nav bar
    3. Hit <space> to pause or resume playback
    4. Stretch the playback window to change its size.  In its default mode the movie will stretch to fit the window.
    5. Hit PgDn to switch to the mode where aspect ratio is preserved.  In this mode you can resize the playback window and the movie will expand uniformly to touch the edge of the window, filling any extra space with black.
    6. While rendering, hit <esc> to stop.
  8. The rendering will finish when the movie reaches its last frame

Here’s a video explaining how to use the tool, mostly repeating what I’ve explained above.  I recommend watching it in high-def for best results:

Finally, the download:

Self-rendering virtual camera for Flash (73 KB)

This tool is released under the Creative Commons Attribution-Noncommercial-Sharealike 3.0 license.

4 thoughts on “New Flash Tool: The Self-Rendering V-Cam

  1. rion says:

    Hey, this seems really cool, but it won’t open in my flash..
    I think it’s because of the version of flash I’m using.
    which one is the desired version for this? It doesn’t say anywhere..
    I’m using CS3

  2. David says:

    Sorry for my delayed response. I just uploaded a new version. It’s pretty much the same as the old version, but I changed it to be a CS3-compatible file. Alas, it won’t work with anything earlier than CS3, since it requires Adobe AIR.

  3. smoke_smk says:

    import com.pinkandaint.images.PNGEnc; – ??? where get this package???

  4. Jesse says:

    Hello! I was just wondering, the black border around the vcam is pretty pesky, I was wondering if there was a way to get rid of it without breaking the cam? I deleted the layer before, and it screwed with the cam’s preview. I don’t have that much experience with it.

Leave a Reply to smoke_smk Cancel reply

Your email address will not be published.