Super Smooth Technical Demos
I love it when speakers demo code during their talks, and I equally love it when they can continue telling their story while code zooms across the screen. All without missing a beat.
Unfortunately live coding while performing is not a skill I possess. So instead I cheat and embed pre-recorded samples into my slide decks. A few people have asked how I do this, so I thought I would share it with you all.
Record your raw demo
First, prepare the code you wish to record. Make sure it compiles and makes sense a head of time. Using Screeny, record your screen at full resolution.
Typing very slowly might feel strange, but is a great way to ease the editing later. If you make any mistakes, don’t break out of the recording, Simply backspace and ensure that your screen is in the same configuration it was before the mistake. Generally speaking, the slower you type, the less mistakes you make, the less editing you need to do.
Cut out the mistakes
Take the recorded video, and import that into Final Cut Pro or what ever video editing software you choose. Detach and delete the audio tracks. From there you can cut out the frames where you made mistakes or flipped to another screen. Once you are happy you can speed up the recording. 4x normal speed usually strikes a good balance between not being painfully slow, yet still readable for your audience.
Render at the highest resolution that makes sense.
Drop into Keynote
From there you can simply drop the video onto a slide in Keynote. Select the animation tab to choose if you would like the demo to start automatically when you move to the next slide, or if you would like it to start on click.
Generally I prefer to keep each of the demo’s as short as possible. For example, limited to only a few lines of code per video, or one very simple concept. It’s generally a good idea to break up each demo between slides which give your audience a chance for what they just saw to soak in.