Personal tools

Evangelism Reps Training Program/How to prepare a screencast

From MozillaWiki

Jump to: navigation, search

Screencasts are amazingly powerful things. There is nothing better than showing how to use a tool or write a certain piece of code. There are several different types of screencasts:

  • Soundless screencasts - these just show how to do something. They can be one-off things for Twitter to show a certain effect. For example showing how something looks for browsers that might not support it: demo canvas cropper. These are also great for presentations. Instead of live using a product and wasting time typing in data you can run the screencast and give the audience a blow-by-blow explanation what is happening
  • Spoken screencasts - instead of just showing you explain what is happening. A demo would be the introduction to the 3D tester
  • Personal screencasts with overlaid video or cutting betweeen video and demonstration - these are the most complex to do as you also need to look good and exciting. This is the most personal screencast type.

Regardless of which you go for, you should prepare and know your tools so here are some tips on how to do screencasts.

Contents

Preparation

  • Get yourself a headset: the main reason is that your voice will be much clearer and you don't have the issue of the mic recording feedback or outside noises like keyboard clicks. I use the Plantronics 655, which is affordable and comfy to wear. Mozilla can provide headsets to employees.
  • Turn off any social media channels and email clients on your computer: you don't want any instant notifications popping up on the screen. When you are recording, that is all that should go on.
  • Have a script ready that you want to follow: this includes what you want to talk about and to have all the things open that you want to show. Loading times of apps and sites you want to show in your screencast is wasted time.
  • Be prepared to record a few times: you will get stuck from time to time. You can stitch together one screencast from various steps.
  • Take breaks: don't try to record everything at once. When you have finished with one section, pause recording, have a sip of coffee or a walk and then come back — you'll sound much fresher.
  • Speak clearly and at a moderate pace: There is nothing more frustrating than a screencast where the presenter mumbles or is too fast to follow.
  • You can record the screencast and then record your audio: in a lot of cases this will have better results.
  • Don't wave the mouse around. It's natural to gesture with the mouse while you talk, but it's very distracting to watch. Only move the mouse when you need to do something with it.
  • Plan your screencast and show only what is needed. Screencasts should follow a few rules:
    • Be short: nobody wants to listen to hours of talk. If you can keep it under 3 minutes — win. You can also cut up longer topics into several screencasts
    • Be indexed: you should offer time stamps for people to jump to when covering a few topics so that more advanced viewers can, for example, skip basics
    • Be easy to watch: remember that not everybody will see the screencast fullscreen, but embedded. Thus use a larger font size in your editor and make examples that don't rely on low contrast or pixel-precision. Especially video conversion will blur a lot
    • Be relevant: show what can be done, not what people need to set up to get there - this could be accompanying text info.

Recording tools

There are a few tools to do screencasts. Many are free, but it makes sense to spend some money as you avoid hosting issues and watermarking or limited features.

Screenr

If you don't want to install anything, you can use screenr to record a screencast on any computer. Screenr is a Java Applet that allows you to define a part of the screen to record and gives you five minutes of screencast time. It can record the audio from your microphone, too. You sign up with Twitter and the videos are hosted on screenr.com for embedding. You can also download the MP4 and directly send it to YouTube.

The downside of Screenr is the five minute limit, that you can not edit the final screencast and that you need to crop a certain part of the screen rather than have a full screen recording that can be cropped and shifted afterwards. You can stop and start the recording though.

iShowU

ishowu is a very minimalistic screen recorder for mac that allows you to define a section of the screen and follow the mouse cursor. For $20 is it pretty cheap and does the trick.

Screenflow (recommended)

Screenflow is very much worth the $99 it costs. As you can see in the demos on how to use it it records the whole screen and you can then crop to what you need. You have several tracks to edit and shift and you can annotate your screencast and have effects to transition in between sections of it. Screenflow exports to YouTube or various local formats. I really got to like screenflow as it also allows you to edit other video and images into your screencasts easily.

External Links:

Linux tools

If you are on Linux, here is a good article introducing various tools you can use.

Typing

Typing can be one of the most difficult parts to get right. You will often need to type code or commands on screen as part of the screencast, but typing quickly and accurately is not a skill everyone possesses, and doing it while talking is harder still.

To make this easier you can:

  1. write scripts that send keystrokes to the application you're demonstrating
  2. bind these scripts to keyboard shortcuts so you can quickly and accurately "type" with a single keypress

The exact tools to do this are platform-specific, but on Mac OS X you can send keystrokes to applications using AppleScript scripts. Here's a script that switches to the TextMate editor and sends it "the string you want to write", followed by a carriage return:

write_string("the string you want to write")
carriage_return(1)

on write_string(the_string)
	tell application "System Events"
		tell application "TextMate" to activate
		repeat with the_character in the_string
			keystroke the_character
			delay 0.1
		end repeat
	end tell
end write_string

on carriage_return(how_many)
	tell application "System Events"
		tell application "TextMate" to activate
		repeat how_many times
			key code 36
			delay 0.1
		end repeat
	end tell
end carriage_return

To assign a keyboard shortcut to the script, so it runs when you press the shortcut, you can use a tool like FastScripts.

You can also automate reading a file and printing it out to the editor. Sublime Text/Textmate is a bit too clever with auto-indenting and closing of curly braces, so I am using Brackets for that. The script is:

 set fileContents to read POSIX file "/your/script/location/script.js" as «class utf8»
 set the text item delimiters to (ASCII character 10)
 set mylines to text items in fileContents
 repeat with currentline in mylines
   write_string(currentline)
 end repeat
 on write_string(the_string)
   tell application "System Events"
     tell application "Brackets Sprint 15" to activate
     repeat with the_character in the_string
       keystroke the_character
       delay 0.05
     end repeat
     key code 36
     key code 123 using command down
   end tell
 end write_string

You can see this in action here: https://www.youtube.com/watch?v=XTkZug-6hPY

Publishing

Once you done recording, it is time to get your video out there. The simplest way is to upload them to YouTube or Vimeo - both are supported as direct uploads from the apps mentioned here. If you have the chance and bandwidth, export and upload high quality video - you can always make it smaller later, but you can't make a bad quality video better quality.

Seeing that we are an open company it seems prudent to avoid closed formats. Nobody wants to download a WMV and then have issues playing it. What I normally do is upload the original video to Amazon's S3 for safekeeping (or use DropBox) and then use vid.ly for conversion. Vid.ly converts any video to 20 formats and redirects the system you watch the video on to the correct format. Notice that free vid.ly accounts are rate limited, so if you want to upload a video, please contact Chris Heilmann as we have a full account with them.