How to make time lapse screencaptures of your design work for free (mac)

For our upcoming app Tap DJ ( tap.dj ), we made the icon ourselves and decided to screencast the process for fun. It turned out to be a fun way to share the creation process, and a motivator to get the whole thing done in one sitting because the “cameras were running.”

Here is the video on vimeo:

Since I plan on timelapsing more design sessions as more of a journal type thing, I though I’d share the process of making it, since it’s free. You could use a screencapture tool like screenflow or snapz pro, but they tend to cost money, and you don’t get to write fun command line scripts. (This technique has already been covered in a few blogs, but I didn’t find a consolidated version with everything I needed. See links at bottom for more info.)

To start your timelapse, you’ll type this script into a terminal window:
i=1;while [ 1 ];do screencapture -t jpg -x ~/Desktop/screencapture/$i.jpg; let i++;sleep 4; done

The script simply captures a screenshot every 4 seconds in this case and saves it into the “Desktop/screencapture” directory with a naming convention of 1.jpg, 2.jpg, and so on. Before you begin, make sure the directory exists, or it won’t work. Then change the sleep number (4 here) to however many seconds you want to wait between screenshots. The script will run infinitely so when you’re done capturing, make sure to Ctrl+C or close the window to stop the script.
If you need to pause, just Ctrl+C to kill the script, then to resume, change the “i=1″ to be whatever the last screenshot image number is plus one. So if the last image taken was “123.jpg” then set i=124 in the script.

When you’re done capturing, you will want to render all your screenshots into movie. To do this, you’ll need to have ffmpeg installed. To install, type each line into terminal…
cd /tmp/
svn checkout svn://svn.ffmpeg.org/ffmpeg/trunk ffmpeg
cd ffmpeg

./configure --enable-shared --disable-mmx
sudo make
sudo make install

A more detailed install explanation with more options is here:
http://stephenjungels.com/jungels.net/articles/ffmpeg-howto.html

Now, simply cd into the directory with all your images, and type:
ffmpeg -r 24 -i %d.jpg -b 15000k timelapse.mov

The number 24 represents frame rate, and you might want to adjust it based on how fast the movie should play. Lowering it to something like 18 will make the video longer, but possibly more watchable for a shorter process. The number 15000k is the target bitrate, and is pretty large because the video will be the size of your screen.

You will notice the video has some compression artifacts, I didn’t spend too long messing with ffmpeg options, but it should be possible to resize or increase the video quality by adding a few command line options to ffmpeg. You can read more here:
http://www.ffmpeg.org/ffmpeg-doc.html#SEC7

Note:
During capturing, I accidentally stopped capturing and restarted again in a different folder. If your image numbers somehow get messed up, you can use this script to rename them based on creation date. First move all images into one folder regardless of the name screwups. Now create a folder called “imgs”, and in terminal, cd to this directory and type this script…

x=1; for i in $(ls -r -t *jpg); do counter=$(printf %d $x); ln "$i" imgs/"$counter".jpg; x=$(($x+1)); done

Now all your images are named in a numbered sequence based on when they were created, and you can use the above ffmpeg script in this directory.

Post used for reference:
http://www.mactricksandtips.com/2009/12/take-timed-lapsed-screen-shots-from-terminal.html
http://www.carbonsilk.com/development/timelapse-video-mac/