Converting fom Screenflow .mov to Flash video .flv for our web site.

Over the weekend I did my first screencast demo for our YiqYaq web-radio site, using Screenflow on Mac OS X. The result was a big .mov file that had a couple of problems 1) it was too darn big, and 2) I could find lots of browser clients that would not play that .mov format. Quick research showed that close to 100% of my audience could play flash videos.

So my problem became, how to turn the Screenflow .mov file to a .flv playing on our web site.

The first approach was to upload it to YouTube. YouTube accepted the video, and converted it smoothly, but the final results was squashed down 360 pixels tall, which is too small to effectively show our demo. (See the too-small youtube version here).

After lots of trial and error, I did finally get to an acceptable embedded flash video .flv file, that I can embed on our web site. Maybe there's a better approach, but these are the steps I took:

How I turned Screenflow into embedded Flash vide on our own web site (as seen here):

1) Record and edit with Screenflow

I recorded the interraction of my browser along with audio. The browser window happened to be set at 778x950 (widthxheight). Editted the result, and did all the other demo stuff.

2) Screenflow Export

Selecting Screenflow Export I chose these settings:

• web high best quality
• scale 74% to 576x702 (because 702 is short enough to fit on most computers yet tall enough to represent my screencast well, and also because 576 is divisible by 16--which turns out later to be important--and 702 is even; if these requirements had not been met I would have used a tiny bit of letterboxing to make sure they were matched)
• enabled motion blur
• change frame rate to 30 fps
• change vide settings to optimize for streaming
• change audio settings for best quality

3) Compress and prepare with Stomp

Stomp is software to compress video. It costs a few dollars ($29). For my purposes I didn't actually use it to compress so much as to reorder the audio/video so that the next phase (ffmpegX) doesn't have the jerky problems it gets from the way the Screenflow outputs audio in .mov files.

For Stomp I used these settings always chooseing best quality versus lowest compression (which actually resulted in a larger file that what I started with, but I think that is taken care of later):

• Make my own preset
• 30 fps
• multipass
• best compressor quality
• audio best

4) Convert to .flv with ffmpegX

ffmpegX is a minimal wrapper around a lot of open-source video software. It's $15 shareware. You can build all those video convert tools from the open source, but for me ffmpegX was worth it because, even though it was an effort to install, it was a whole lot less effort than installing all tools it's made from.

From ffmpegX open the Stomped file and output to FLV format. I used these options:

• From options selected "High Quality" and "Two-pass encoding"
• video size 576x702
• framerate 15 (which is half the framerate 30 used in steps up to this point)
• play around with the video bitrate field until you get a value that ffmpegX shows up as green--sometimes it is slow to show this so you need to switch on different tabs to force it to update--in my case I ended up with video bitrate 1400

5) AddFLV metadata with FLV MetaData Injector

The file that results from ffmpegX does not have the metadata (especially for height and width) that the next step (JW Player) is going to need to display the video correctly (without the right metadata it will try to change the video to fit standard sizes). To perform this step I downloaded the free windows tool "FLV MetaData Injector" and run the executable ("flvmdi.exe") from a parallels session. There are other FLV metadata injector source tools you can use and build, but this was the quickest way there that I found.

The result of this step is a .FLV file suitable for any flash player.

6) Create web page and embed on web page with JW FLV Media Player

Many users can play the FLV files directly, but they won't look very elegant. It's also not very difficult to find a lot of FLV players, or even to roll your own. But I was in a hurry and JW FLV Media Player did everything I wanted (at a cost--open source and free for non commercial but €39 for a commercial license on one web domain)

Longtail provides very clear instructions for how to use their tool. Remember to set the width and height to the video size of the .FLV file you've been making, and to add at least 20 pixels to the height if you're going to use their control bar (which is the default).


That's it. Like I said, it may not be the best approach but it's the one I stumbled into and it worked for me (as seen here).