Slow motion flash for debugging

So, here’s the deal. You’re working on something in flash, you test several simultaneous scripted (or not) animations out and notice something’s wrong. There’s some weird overlapping or something going on there, but it’s really hard to tell since it all happens so fast. Sure, you could leave it there as it’s barely noticable, but we want to make products that aren’t just good but perfect.

So, how do we solve this? Well, by now—since you’ve read the title—you probably know where I’m heading. Me and Svante from ACNE Digital (the company i worked for before) were talking about this and i decided that i’d come up with some slick solution that’s easy and quick to use whenever this happens. So, that’s what I did. And of course to support open sourcen and help other people make better products, you’ll get it too. For free as always.

recorder.as

The Recorder is a pretty simple class that let’s you specify an area to record and then simply record that into RAM, which you can then play back at the desired speed. To keep it easy to share I put everything in one class, including the recorder, the playback, and the gui with an animation engine. This of course makes it more difficult/annoying to create & modify, but it’s easier to download and use as it’s only one file.

So, how do you use it?

Well, it’s pretty simple. Place the class in a folder /com/anttikupila/debug/ in your classpath. Then just import the class, and call Recorder.initialize();. That’s it.

import com.anttikupila.debug.Recorder;
Recorder.initialize( );

Here’s an example with some motion graphics, courtesy of Alexander Petterson (thanks Alex!):

(Example is no longer working)

To try it out. Click inside it first to give it focus, press and hold space, then drag an area to record and click the area. Then press space again to stop recording and start playback. Adjust speed with the up and down keys or with the dial to the right. You can hide it again by clicking space, which obviously also frees all resources required (this thing’s really ram-hungry). If you want, you can download the source to the example too.

There is really no limit on the length (except your ram/patience), but I’d keep it pretty short - basically just for the time you see the problem. After this it’ll start playing those frames in a loop at the original speed. You can adjust the playback speed from the dial to the right.

Now I know some people will say that there’s no timeline etc. But people, think about it; do you really need it? I don’t think so, and it looks nicer like this 😃 Less is more, ‘aye. Still, if you want, feel free to add additional controls (if so, please help everybody else and share the code).

Actionscript 2.0 only at the moment, sorry about that. Still, it’s very easy to port to AS3 if you need to do so. Also i want to mention that this is something i made in like one or two days, so please don’t use it in any production environment as it is. It’s meant as a debug tool so bug threshold isn’t the same as on production sites 😉

I’d love to hear your comments & suggestions

Enjoy 😄