Sneak peek: Mozilla Evangelism Reps program – how to create a screencast

This is a small preview of a new thing we are working on in Mozilla. The Evangelism Reps program involves Mozillians getting help, mentoring and training to become public speakers, start blogging and running local events. All of this will be open and available on the Wiki. So here is a sneak peek.

How to create screencasts

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.

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
• Turn off any social media channels and email clients on your computer – you don’t want any instant notifications popping up on the screen. You record now, this 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 as 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 are ready with one section, pause recording, have a sip of coffee or a walk and then come back – you’ll sound much fresher.
• Speak clear 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
• 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.

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 it might be a good plan to use them for conversion, but host the videos yourself – or get a full account.