At my day job with Many Tricks, we recently updated our time tracking app Time Sink to version two, and an updated web page was part of the project. For the header area, I wanted to create a time-lapse movie showing the Time Sink Activity Report window changing over an extended period of time (90 minutes), but compressed into a short amount of real-world time (about 14 seconds).
Before the how-to, here’s how the final project came out:
To create the time-lapse movie, I’d need a series of screenshots recorded at a fixed interval. I wanted to shoot only the content area of the report window, as I didn’t need the “chrome” for the movie (it would just distract from the content). So using the built-in screenshot tool wouldn’t work—I didn’t want to have to crop 500+ images (even by script).
While I’m sure there are many utilities that can do this (and I’ll see them shortly in the comments), a brief web search found nothing that was designed to capture areas of the screen at a set interval. Luckily for me, though, Keyboard Maestro has a screenshot action that can record an area of the screen, along with repeat and wait actions I could use to capture a series of stills.
Here’s the screenshot action, which is at the heart of the macro:
The area is defined as a starting position (right 125 pixels and down 125 pixels from the top left) and size (300 pixels by 300 pixels). Screenshots are saved to a clipboard, from where you can then save them to a file. This action, plus a little magic from ffmpeg, is the basis for the method I used to create the above movie.
Obviously, to make my movie, I needed more than one screenshot. After some experimentation, I settled on 900 shots, with one recorded every six seconds. That’s 90 minutes of recording time which would play back (at 30 frames per second) in 30 seconds. I then used ScreenFlow to add the titles and further accelerate the video to get it down to 14 seconds.
In Keyboard Maestro, I set up a macro that loops 900 times, saving a screenshot first to the clibpoard (as that’s how the Screen Capture action works), then saving the clipboard to a file:
As always, you can download the macro to look at/use for your own needs. If you do, you should be aware of a couple things…
- The ffmpeg command that creates the movie file expects a sequential series of named images. I’m using MyCounter to hold the sequence number. The “with format 000” means that all numbers will be three digits, i.e. 1 is padded to 001.
- When saving the clipboard to disk, I include the MyCounter variable in the name, which appends the sequence number to the filename. It’s cut off in the screenshot, but the filename in the “to file” box is screenshot_%MyCounter%.png.
- The final macro step just deletes the MyCounter variable.
If you’re going to use this macro, you’ll need to change the screenshot region as well as the path to the file to be saved. In practice, this worked perfectly for me, capturing 900 stills of the Time Sink Activity Report window (which I had open on a second display) to disk while I worked for 90 minutes (on the main display).
The last step is to convert those stills into a movie. My usual way to do this is via the ancient QuickTime 7, which has a built-in “Open Image Sequence” item in the File menu.
But I was curious if anything I had installed, other than a near-seven-year-old no-longer-updated technology, would do the trick.
After some searching, I discovered that ffmpeg has a slideshow function. I already had ffmpeg installed (because I rip Blu-ray discs). So creating my movie file from my image sequence required just one line in Terminal:
ffmpeg -framerate 30 -i screenshot_%03d.png -vf format=yuv420p screens.mp4
The screenshot_%03d.png bit is the filename with an expression attached to describe the sequence numbers: Three (%03) digits (d), in my case. When I pressed Return, ffmpeg churned for a few seconds; when it was done, my movie file was sitting there, ready for editing.
Geeky? You bet. But now I have a free (Keyboard Maestro is a sunk cost, given I own it already), relatively simple tool that I can use to create screenshot time-lapse movies at any time.