Screencast Tips
Jul 14, 2011 18:54

I'm putting together screencasts for the new Remembary 1.4. Screencasts are a bit like standup comedy routines: the best ones seem effortless and spontaneous, but they in fact take a huge amount of work.

I've come up with a set of methods that work well for me, and I thought I'd share my notes with everyone else. Everyone has different strengths and weaknesses in speaking and editing, so these techniques might not work as well for you.


  • USB microphone. I use a mid-range Logitech headset with an attached microphone. It was designed for web chat or gaming, but it sounds pretty good.

  • GarageBand. A great Swiss-Army knife for general audio stuff, and it's already on your Mac.

  • ScreenFlow. There are various products that do screen capture. This one is pretty good, and it's the one I sort of know how to use. There are a number of other great screencasting products out there - use whichever one works best for you.

  • XCode with the iPad simulator. Filming a real iPad is difficult. The screen picks up a lot of glare and fingerprints, you need a really good camera, edits are obvious, and sometimes pets get in the way. It's much easier to just record the simulator.

Backing Music Track

  • Build a backing music track in Garageband. This is important for two reasons: it makes your video seem more professional, and it also helps cover up audio edits.

  • This is actually pretty easy (and a lot of fun): just search the Garageband library for catchy loops and put them together.

  • Aim for something distinctive, upbeat, and catchy, but not too annoying.

  • Don't get carried away with detail since it'll mostly be in the background.

  • Keep in mind that higher notes will be more audible over the vocal mix than lower notes. My first screencast had a backing track where the variety was all in the bass part while the higher notes repeated every bar - it became really annoying after two minutes. For the new one, I added a higher melody line, which made it more listenable.

  • Export the music ("Share" -> "Export to Disk") at the highest quality level, so you have a good foundation to edit from.

Vocal Narration Track

  • Record your vocal track in Garageband too, using one of the 'podcasting' setups. I find the "Male Narrator Noisy" amp / effects setup works well for my voice.

  • Your vocal track will probably require multiple takes. That's okay. This is a good point to remind yourself that almost everything you hear on radio or in podcasts is the result of a whole lot of takes (or in some cases years and years of practice).

  • You'll probably want to take multiple takes of your entire script, so you can pick and choose the best parts of each take.

  • You could also record each phrase separately. This gives you a lot more control, but it takes longer. It's also a dangerous way to fall into obsessive nit-picking and fine-tuning.

  • To keep from popping and buzzing, say your 'S's like 'Z's and your 'P's like 'B's - speak like you have a bit of a cold.

  • Using a headset lets you keep a consistent distance between your mouth and the microphone. I find it handy to have the microphone just slightly above my mouth - closer to my nose, in fact - to keep the volume more regular, and also cut back on the popping and hissing sounds.

  • If you're like me, the spaces in between your phrases will have lots of breathing and lip-smacking sounds. You can reduce these by staying away from milky coffee while recording - and just drinking lots of water. It's pretty easy to edit these sounds out afterwards in GarageBand - either by dropping the volume in between phrases or just cutting the bits out. This leaves bits of dead space in between your phrases, but that's one of the reasons we have a music track: to cover up the edits!

  • Everyone is different, but I find my best takes are often the first few. If I've worked too long on a vocal, I'll get so wrapped up in little details that I won't be able to do as well.

  • Export your vocal track at the highest quality level.


  • Use the app simulator on your computer - set up a good set of test data that covers everything you might be doing.

  • If you have, say, map data that requires a real device, make sure you have screen shots that look as close to your simulator version as possible. Ideally set up the same data in the simulator and device.

  • For every 'point' in your script, record a separate screencast clip. Keep the starting and ending points as neutral as possible, so that the transitions between clips are invisible.

  • Leave some time at the beginning and end of each clip where nothing is happening. This will help a lot with your editing down the line.

  • ScreenFlow records your whole screen, but you want to shrink down the display window just to fit the simulator.

  • It's really easy to accidentally move the simulator window without thinking, which means you have to perfectly line up the video frame again - a single pixel difference can show in a transition. To make this a bit easier, push the simulator up against the top of your screen and a pixel away from the right edge. That way Fitt's Law means you only have to worry about one axis. Put a graphic file with a grid or a monospaced text file or something like that just behind the simulator window to make it easy to line it up properly again.

  • You'll want a monitor that's big enough to show the iPad simulator at 100% scale. I've had good luck with a Dell 22" 1920x1080 screen pivoted into portrait mode. If you're using a MacBook for this, turn off the laptop's screen - the extra load on the graphics card can lead to choppy animations.

  • I used to be very concerned with consistency, and I had everything set up to look like it was one smooth presentation done in one take. This was extremely difficult to do, since it's quite tricky to get all of the little clips to merge seamlessly. In my latest screencast, I use a lot of fade transitions instead. I think it works almost as well - and it's a lot less work!

  • Consider doing a 'walkthrough' before actually recording your clips. This way you can make sure you have all of your data properly in place before you shoot.

  • Consider having a 'rest state' for your clips to start and finish. Pause a bit before and after performing the action.

Putting It All Together

  • Put your backing music on one track. You can start your music loud, but then fade it into the background once the vocal starts.

  • Bring your vocal track into its own track in Screenflow. You won't really use it as-is. Instead, shrink it down to only the first phrase. Then make a copy of that and adjust it to fit only the second phrase. Leave some space between them. Repeat until you have your entire vocal as individual phrase elements.

  • Add the individual screencast videos to the timeline as well.

  • Now the fun part: arrange the vocal phrases and video clips so they overlap properly and the flow and timing between them 'feels right'. This will take a lot of playing and replaying, and may drive you a little crazy.

  • You'll have black gaps in between the clips - select the 'empty' bits at the beginning and and of each clip and use the "Edit" - "Add Freeze Frame" command to make stills which you can extend to fit the available space as necessary.

  • Some tips for good 'flow':

    • Do a fade transition, wait a beat, *then* start the audio.
    • Try to make actions and transitions fit with the rhythm of the backing track.
    • Have a consistent transition length.

Special Effects

  • ScreenFlow lets you do a lot of things to your clips after they've been recorded. You can set up zooms to highlight certain parts of the screen where important activity is taking place - this is very useful, but I found it a bit tricky to do in Screenflow.

  • For each clip, figure out what kind of pointer/cursor you would like. For iPad apps, you mostly want to hide the mouse pointer, but show it as a circle every so often. Make sure to set the opacity at 50% or so, and use the "Radar" effect on click.

  • Sometimes you'll want to only show the clicks/taps (since the iPad doesn't have a continuous pointer like your computer). For this, switch the pointer opacity to 0%.


  • Save a version on your computer at the highest quality level - that's your master version for all future versions.

  • Many iOS apps look best in portrait orientation, while most web video only shows in 'landscape' dimensions. This can lead to problems. For example, ScreenFlow's handy built-in YouTube upload function will 'helpfully' stretch your portrait-sized video to fit in landscape - making it mostly useless. You can upload your master version directly, and YouTube will helpfully put black bars on either side of your content rather than stretching anything.

Here's the result - it's not perfect, but I think it's pretty good. Let me know what you think!

Other Blog Posts
My Expanded Twitter Thread about BurgerWeek 2021 This Is Nowhere: The Server Side Building a React Native App Without Tears - Part 3 Building a React Native App Without Tears - Part 2 Building a React Native App Without Tears (Mostly) This Is Nowhere: The Memento Edition This Is Nowhere: Aspects of Accessibility Presentations About NowHere This Is Nowhere: Head-First Into React Native This Is Nowhere: Bloomsday Halifax This Is Nowhere: Why an HTML/JavaScript Single-Page App With GPS Is A Bad Idea This Is Nowhere: GPS and Wayfinding and More UX This Is Nowhere: The Single-Button UX This Is Nowhere: Don’t Just Stand There! This Is Nowhere: Finding My Duck Finding Burgers Fast: My DIY Halifax Burger Week Site "This is Nowhere" at PodCamp Halifax 2018 The Diary Diaries: Fixing Remembary's Facebook Connection Special Leap Day Edition of "Some Weird Things About Time" What's Up With Remembary Can't get pg_dump To Work Now That Heroku Has Upgraded Postgresql to 9.4? The Best Thing I Ever Did To Promote My App If You Build It, They WON'T Come #deployaday, My Big Hairy Plan for 2015 Extracting Plain Text from an NSAttributedString My Year of "Hits" Part 2: Remembary Rolling My Year of "Hits" Part 1: Remembary Rises (and Stumbles) Handy Little Test Method to Check for Translations in Rails Apps My Suddenly Slow-Waking MacBook Air Indie App PR: Keeping Control of Your Tone A Quick Note on 'clone' in Rails 3.2 My eBook Apps 2: iOS, JavaScript, and Ruby My eBook Apps 1: Introduction Quick Tip: No Sound on Mountain Lion My Upcoming Talk at PodcampHFX 2012: My Year of "Hits" Building at the Speed of Funny Screencast Tips Remembary's Cool New Picture Support Indie App PR 2: Keeping On Top Of User Feedback Indie App PR 1: How to Handle an App Disaster Giles Bowkett Diary Project 2 Remembary Video Congratulations! Welcome to Your Nightmare! How My iPad App Remembary Took Off Why You Should Have an App in the App Store (Even If You Probably Won't Make Any Money) PodCampHFX Remembary Presentation - Part 3 How I Used MailChimp Autoresponders to Promote Remembary PodCampHFX Remembary Presentation Part 2 PodCampHFX Remembary Presentation Part 1 Why AdWords Ads Don't Work for iPad Apps Remembary is Sponsoring PodcampHFX Why Can't I Resize my Views in Interface Builder? Momento and Remembary Concerning Remembary iPad-Friendly eBooks of Gracian's Art of Worldly Wisdom Project Report: PTOS2 A Quick Note on Encryption We're all LUsers Thoughts on HAML Friday Afternoon Hack - Getting Beyond the Basics Halifax Friday Hack and Back to Basics Quote from Wil Shipley FutureRuby Make Web Not War Busy Week I: Toronto Ruby Job Fair Employment.nil - the Toronto Ruby Job Fair Code Count: Ruby on Rails vs. C#/ASP.NET A Brief Note on Twitter The Hub Halifax and Mobile Tech for Social Change Deep Thoughts on Microsoft From The Accordion Guy The Two Kinds of Defensive Programming Presentation - Fixing Careerious: From C#/.NET to Ruby on Rails Enterprise! Presenting at Ruby on Rails Project Night - May 7th New Name and New Look for Careerious/Clearfit FutureRuby and More From Unspace Health Tips for Programmers This tables meme won't die Careerious - Ruby and Rails vs. C#/.NET Yeah I Use Tables For Layout, So Sue Me The Different Kinds of Done Giles Bowkett's RubyFringe presentation OfficeTime: Great Time-Tracking App for OS X Back With A New Look Non-DRY Feed torontorb Keeping Your Sanity With The Command Design Pattern shindigital Is All Grown Up! (according to the spambots) Startup Stars? I'm so bored! The Magic Words for RMagick Jennifer from Operations You see? Naming is HARD Business Software as Process Documentation Deployment note: 'execve failed' Steve Jobs on Market Research Why Canada Is Better for Entrepreneurs "Program first and blog second" Toronto Tech Collage The MacBook Air Is A Roadster RubyFringe! Quote of the Week: Steve Yegge Starting Up: Cards Great design tool: Starting Up: The Logo Quotes Of The Day: Hedge Fund Interview TSOT Ruby / Rails Presentation Night - Part 1 Moneyworks: Accounting Software for Canadians on OS X Starting Up: The Name Nice logo, but why is your site so bland? Welcome to