My Custom Video Setup

For a couple years now, I’ve wanted to do an online version of the SMACSS Workshop—one that people can buy and download any time they want. I’ve hosted a couple online workshops (thanks e4h!) but I wasn’t happy with the videos that resulted from it. I streamed from home which resulted in poor audio and a crappy backdrop. (Which was all my fault, not e4h!)

More recently, I partnered up with Frontend Masters to produce said workshop for the site. They know what they’re doing.

I decided that I wanted personal intros and outros for each section of the workshop. I have no idea what I’m doing but figured that iMovie and a little time would be all I need to figure things out.

Here are a few things that I learned along the way:

Pick a format

In iMovie, you have 4:3 or 16:9. The videos were in 16:9 so I wanted everything else to match. My slides were in 4:3, however, and when I went to import them as a resource in iMovie, they got cropped. That’s bad.

It’s best if you can keep all your assets in the same format. In Keynote, I resized the presentation to 16:9, re-exported, and then imported. No more cropping. I recommend doing the same for pretty much any images that you might use.

Editing in iMovie is pretty much non-existent so best to do everything you need before importing. Same goes with audio.

Exporting from Keynote

99.9% of the time I export from Keynote, I’m exporting to PDF. I’m trying to bundle up everything into a nice package for delivery to attendees and organizers.

For iMovie, though, there are two options to consider depending on what you care about. If you care about the animations then export as Quicktime. If you don’t, then export as images.

Exporting as Quicktime requires fiddling with timelines in iMovie, which is a hassle if you need to break it down into a dozen or more parts.

The Recording Setup

The iPhone.

To do the interstitial videos, I decided to use my iPhone. The quality of the camera these days is great (or at least, good enough). I put it in a little tripod on some boxes. I set up a handful of lamps in the room to provide enough light without a lot of shadows.

Teleprompter

While I could’ve ad libbed, it was a little beyond me. I decided to write a script and then pasted it into a free teleprompter app on the iPad. I positioned the teleprompter on some boxes so that it would sit as close to the camera as possible. I wanted it to look like I was looking at the camera even though I was looking at something else.

If you know that you’re going to be breaking up the video/audio afterwards then add pauses to the script with a bunch of carriage returns. These gave me a chance to breath and stretch before diving into the next part of the script.

Rode Podcaster

As great as the iPhone is, the mic picks up everything. I didn’t want the sound of my kids in the background. I hooked up my Rode Podcaster mic and plugged it into my laptop.

That means that I would have separate audio and video tracks and would need to figure out how to merge them back together afterwards.

Recording

I hit record on the iPhone, hit record on the laptop, then hit play on the teleprompter.

Showtime!

First thing you should do is clap. Yes, clap. They use clapboards in the movies for a reason. You’ll want the clap since it creates a spike in the audio. This spike will help you align the audio with the video track in post-production.

Having done some videos for Adobe, I learned that if you stumble, don’t worry about. Just start over wherever you think you need to splice the video. For me, I had 15 interstitials that I was doing. If I flubbed my lines, I restarted that interstitial by backing up the teleprompter and going again. I kept the audio and video recording the whole time.

I did a bunch of takes, rewriting some of the script whenever I thought it felt awkward while saying it.

Post-production

Post production was done in iMovie. I dragged all the assets in and then went to work.

Audio

I mentioned that you’ll need to align the audio. Getting the beginning to line up is easy enough but I discovered that time is relative. By the end of the video, the audio had become completely out of sync.

To fix this, right-click on the audio track and select Show Speed Editor (or hit Cmd-R). You’ll get a circle handle in the top right. Drag that to stretch the audio out or in until the audio matches when you play the end of the video.

I find (on my slow machine, at least) that the audio and video previews won’t get updated and therefore aren’t an accurate reflection of whether you’ve resized things accurately. Play the video and listen.

You’ll also want to mute the audio from the original video. At first, it’s handy to see if audio is out of sync because you’ll get an echo. But once your higher quality audio is working then you’ll want to mute the video audio. With the video selected, click on the speaker icon in the preview pane. Then click on the speaker icon next to the Auto button to mute the audio.

Cutting it up

Once I had the audio synced, I needed to cut everything up. Cmd-B will cut wherever the white line is which is usually wherever your mouse is hovered. You can use markers but for the most part I found them useless.

Select both the video and audio tracks when you go to cut them. The audio track is attached to the video and therefore you need to make sure that they’re cut in tandem. Now you can move or delete the video segments and the audio should go along with it.

Wrapping it up

My 2011 MacBook Air is severely underpowered for this kind of work. The six hours of video took nine hours to export. (That’s what it says, anyways. It’s still exporting as I write this.)

After that’s done, I need to cut up the video into 8 parts. (Ain’t nobody got time for one 6-hour video!) I’ll be using Quicktime Player to do that. I wish there were an easier way to do this automatically from iMovie. Markers would’ve actually been a great use for this kind of thing!

This has been a fun exercise to go through. Like everything else I’ve done with SMACSS to date, I’ve really enjoyed exploring new processes on my own. From writing the book, to self-publishing it in 3 formats, to building the site, to printing the book, and now to video editing.

I’ve become such a fanboy of self-publishing!

(Oh, and yes, the SMACSS Workshop will be available in the future on Frontend Masters and on SMACSS.com.)