Turning a video clip into a Flash movie

Video clips on your site can be pretty great.  In the old days you were stuck with either putting up your video in several different formats (QuickTime, Windows Media, Real, etc…) or facing the reality that only a percentage of your site visitors would actually be able to watch it.

Then the clever people behind Flash fixed that by making it relatively easy to play video through the Flash player and some 99% of all web-connected computers can see the same video file.  Hooray!  Now, how do you actually do it?

(Streaming is another topic, I’m going to cover progressive download)

You need to start with your video.  Flash needs the video format to be in either MPEG4 (aka H.264), FLV or F4V.  A quick google search indicates there’s web sites which will do this for you, but I generally use Quicktime Pro to monkey with video formats which will get you to your MPEG4 version.  If you have the Adobe suite you may also have Adobe Media Encoder which will get you to your .flv.

A quick google search indicates there are plentiful options for doing all these video conversions on the web or through other software you can buy.  Since I haven’t tried those, I’m not going to talk about them.  If you’ve found something that works for you, please feel free to talk it up in the comments of this post.

If you have the Adobe Flash authoring tool it’s fairly straightforward to produce your clip for the web.  That said, there’s a couple of stumbling blocks I’ve found.

I’m using CS4 in this example.  So… you start a new Flash project.  Go File -> import -> import video.  Select “load external video with external playback component”.  Click “continue”.  The next window will ask you to select a skin for the video to play in.  This gives you the overlay with the video controls.  The ones with the name “over” in the title will put the controls on top of your video.  “Under” will place them right underneath.

Now you can preview it and see how it plays.  If you play it and you don’t see the controls you selected, that probably means the dimensions of your video are larger than your stage – you’ve pushed them off the screen!  You can either go back to Quicktime Pro and size your movie smaller or make the stage larger by going Modify -> Document.

Here’s a trick the help doesn’t tell you.  If you just select the video from your computer hard drive it will “preview” fine, but won’t play when you upload it to your server and you’ll tear your hair out wondering what’s wrong.  However, if you type in the path to where it’s going to live on your server in the import video window, it will fail to preview on our computer, but play fine when it’s published to your site.  If you know a smarter way around this, let me know!

When it’s the way you want it go File -> Publish and Flash will create the files you need.  You’ll get an HTML file, a .swf and you’ll have your video clip.  All three need to be uploaded to your web server.  You can also paste the HTML into any of your other pages if you want.

Questions?
The online docs from Adobe can be read here.