Mike Henderson mike-henderson

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

##Create an alias to MAMP's PHP installation

To do this, we can simply create an alias for our bash profile. We'll be doing this is nano, though you can do it in vim or a number of other editors as well.

Within the terminal, run:

nano ~/.bash_profile

This will open nano with the contents, at the top in a blank line add the following line:

	<!DOCTYPE html>
	<title>Datalist test</title>
	<meta charset="utf-8">
	<form>
	<label for="source">How did you hear about us?</label>
	<datalist id="sources">
	<select name="source">
	<option>please choose...</option>
	<option value="television">Television</option>
	<option value="radio">Radio</option>

	// ==UserScript==
	// @name Use Markdown, sometimes, in your HTML.
	// @author Paul Irish <http://paulirish.com/>
	// @link http://git.io/data-markdown
	// @match *
	// ==/UserScript==


	// If you're not using this as a userscript just delete from this line up. It's cool, homey.

	@charset "utf-8";
	html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
	{ margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }


	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
	{ display: block }


	blockquote, q { quotes: none }

	presentation
	.title('My Great Presentation')

	.slide({
	title: 'Learn About Borders',
	bullets: [
	'Thing 1',
	'Thing 2',
	],
	code: ['path/to/file.css', [2,4]] // path to file, lines to grab

	gifify() {
	if [[ -n "$1" ]]; then
	if [[ $2 == '--good' ]]; then
	ffmpeg -i $1 -r 10 -vcodec png out-static-%05d.png
	time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png GIF:- \| gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > $1.gif
	rm out-static*.png
	else
	ffmpeg -i $1 -s 600x400 -pix_fmt rgb24 -r 10 -f gif - \| gifsicle --optimize=3 --delay=3 > $1.gif
	fi
	else

	$small = 400px;
	$medium = 800px;
	$upto-medium = $medium, max-width;

	@mixin respond-to($primary, $secondary:min-width) {
	@if $secondary == max-width {
	@media screen and (max-width: $primary - 1) { @content; }
	}
	@else if $secondary == min-width {
	@media screen and (min-width: $primary) { @content; }

	iframe {
	max-width: 100%;
	}