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

Tap DJ Icon Final VersionFor our upcoming app 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:// ffmpeg
cd ffmpeg

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

A more detailed install explanation with more options is here:

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

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:

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:

This entry was posted in Uncategorized, experiments and tagged , , , , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.

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

  1. I have been trying to send feedback on you App but your “security” system is impossible for me to deal with. The letters are extremely hard to read and if I guess wrong it erases everything and I have to start over again. How many times do you think folks will try before they just give up?

  2. thinayr says:

    Hey, thanks for this… very cool indeed!

    This is both fun to review and a great motivator– “The cameras are rolling!”

    I was unable to run the configuring commands for ffmepeg. I think I need to install the apple dev tools? I’ll look into this when I get some time…

  3. JohnONolan says:

    This is fantastic! As a small note to non-developer noobs like me: You need to install Apple’s Xcode Developer Tools from your OSX Install Disc 1 before starting – otherwise you will get stuck on the “make” command not working.

  4. Jason says:

    This is sick!

  5. Pingback: Web Design Weekly #11 | Web Design Weekly

  6. tim says:

    sick video, great design!

  7. Mack says:

    Very cool, how can i change the destination of where it is saved to??

  8. Pingback: I keep Google-ing this | Leather Ducking

  9. mark says:

    very useful, will be using this for my next digital illustration. thanks

  10. Gerard says:

    VERY useful. Works very well for me. THANKS a lot cclaan !

  11. finally i found someone who knows how to provide relevant information on the subject i have been searching for? thanks, at last i can study with pleasure..

  12. Jim says:

    Your code doesn’t work. I’m in 10.6.8 and Terminal says:
    i=1: Command not found.
    while: Expression Syntax.

Leave a Reply

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="">