“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.

1. Kung Fu Panda World went live.  I’ve been working on this virtual world since January of Last year and it’s very satisfying to see it “ship”.  This is also the first game I’ve shipped as an animator.  Long ago I was a software engineer and I shipped one game while I worked at Treyarch Studios.  Maybe you haven’t heard of it?
2. I got a number of positive responses regarding the autotweener, including several people who seemed to be suggesting that I could make money with that kind of thing.  Hmmm, it’s an interesting thought.
3. I and two other animators, in the course of a few days, were thinking about the same “if only Flash had this feature” idea.  The two other people brought it up with me and it got me thinking: why couldn’t I program something that does that?  So I’m doing it.  Coming soon to a blog near you: an animation-disc-esque rotatable stage in Flash.  Well, sort of.  It’ll be a bit of a workaround but it should work very similarly to the rotatable canvasses in Toon Boom Studio and TV Paint.  Under normal usage you’ll probably have to remember to run a “reset” command at the end to make sure everything goes back to normal, unless you’re using a virtual camera, in which case you won’t even have to do that.  Speaking of which: Coming soon to a blog near you: my personal take on the virtual camera, which will flawlessly save your movie (including actionscript) as a PNG sequence that you can use in any video editing program.
4. Since we “finished” KFPW my workload has been much lighter and deadlines much looser.  When I told my animation director that I could make a tool that would rotate the stage he gave me the go-ahead to do it.  Making tools for Flash is really fun for me, so it made me happy to be able to do a little programming for a change.
5. Tomorrow’s payday (cha-ching).
6. I’m seriously considering getting a smartphone.  I bristle at the thought of having to pay $30 per month for data but I think maybe the idea is starting to win me over.  That, or buy an unlocked phone (Nexus One!) and don’t have any data plan at all.  I’m with AT&T, and it seems that even when the phone is unsubsidized I have no choice but to get the $30 data plan if I want any mobile internet at all

Finally, I just want to comment on something that struck me as I did some animation on Don’t Fear the Sitter tonight.  Keyframes are hard.  Breakdowns are easier.  Tweens are easy.  These may seem obvious, but it really amazes me sometimes how I can spend a long time doing key poses for a character and then the rest of it just zips by.  In no time I go from just-a-suggestion-of-motion to damn-that-character’s-a-movin’.

I love it.