Make: Making Movies!

My goal for this evening was to try and turn a video captured from a camera in to something to be shared via the Internets.

The source material was a dance competition. The material was about 2:30 in length. No real editing since it was basically from start to finish.

Since I’m working with a Mac these days, I tried to use tools that were available to me there.

I chose to use iMovie ’08 since that was the latest version I had available to me.

I’ve never used the tool before, so I was coming at it as a complete newbie.

The use model was pretty simple. All I had to do was import the movie that I’d downloaded from the camera. But I also wanted some Title and End pages. I created those in Photoshop with a simple black background and white font. I dragged those to the project and had to move the Title to the front and the End to, well, the end.

Here is where I found what appears to be a common annoyance with iMovie ’08 and that’s the Ken Burns effect on photos. This is a Zoom effect where the size of the title card (for example) is varied for the duration of the shot.

This appears to be the default for photos in iMovie.

I had to do a bit of searching on the web, but eventually I discovered that if I selected the photo, then the crop tool, it brings up a screen with three options: Fit, Crop and Ken Burns (which is selected by default). Simply choose Fit and Done and life goes back to what we’d expect for a simple Title card. This eliminated that problem for me.

After being satisfied with that part, it was time to Export. My first pass was to export at the video size, which was 640×480. The original movie was 81M, so I had hoped it would get smaller. Nope. It got larger. Like 121M larger. Well, that won’t work. Waaaay to big, even in these days of giant (relatively speaking) pipes.

To avoid this, I then exported in a smaller size and accepted the Mobile option in iMovie and exported at 480×360 for size.

Since I figured most of the viewers would be Windows users, I next used a tool called Visual Hub to convert the movie to .avi, which I thought would be more easily viewed. This made it smaller (like 14M) but not viewable for some reason on Windows boxes.

After a bit more searching on the subject of optimal formats for the best odds of viewing across machines, it appeared the front runner was Flash. So, breaking out Visual Hub again, changed options to Flash and generated a Flash version that was only slightly larger than the previous (non-functional) AVI version.

Once I uploaded this to my server for testing and simply giving it the URL, I was faced with a pixelated version blown up to fill the size of the browser window. I could always change the size of the window, but that’s inelegant.

Even a bit more searching and I was able to discover an embedded version that set the size of the flash window. Something like so:

<head>

<title>Zoe's Dance Competition - 02/23/2008</title>

</head>

<body>

<embed src="http://www.mossor.org/Media/ZoeDance.swf" type="application/x-shockwave-flash" width="480" height="360"></embed>

</body>

</html>

And that did it!

You can see the result at:

http://www.mossor.org/HTML/ZoeDance.html

Thing Learned:

  • iMovie
    • Basic usage
    • Trimming bits
    • Modifying Photos to avoid the Ken Burns effect
    • Adding simple transitions
  • Visual Hub
    • Export to AVI didn’t work as expected
    • Export to Flash worked great
  • Web Stuff
    • How to create a simple page with embedded Flash that controls the size to avoid Flash filling the browser and appearing pixelated

Time Spent: 2 hours

Leave a Comment