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

Tap DJ Icon Final VersionFor 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/

Posted on January 18, 2011 in experiments, Uncategorized

Share the Story

About the Author

Responses (11)

  1. Charles maclauchlan
    January 29, 2011 at 3:04 am · Reply

    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
    March 15, 2011 at 1:23 am · Reply

    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
    June 10, 2011 at 9:41 am · Reply

    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
    July 28, 2011 at 12:48 pm · Reply

    This is sick!

  5. Web Design Weekly #11 | Web Design Weekly
    September 8, 2011 at 6:47 pm · Reply

    […] How to make time lapse screencaptures of your design work for free (mac) (laan.com) The guys at Lann love time lapsing so much they decided to share the process of how to make them for 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. […]

  6. tim
    October 21, 2011 at 11:43 pm · Reply

    sick video, great design!

  7. Mack
    February 17, 2012 at 2:33 pm · Reply

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

  8. I keep Google-ing this | Leather Ducking
    April 22, 2012 at 8:15 pm · Reply

    […] How to Make Time Lapse Screencaptures This entry was posted in Prototyping by Carrie Stiens. Bookmark the permalink. […]

  9. mark
    October 11, 2012 at 2:20 am · Reply

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

  10. Gerard
    November 22, 2012 at 9:06 pm · Reply

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

  11. premium themes
    May 22, 2013 at 10:36 am · Reply

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

Leave a reply

Your email address will not be published. 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>

Back to Top