web hit counter

mavmed Our contributors' incidental blog of technology, lifestyle, commerce, and design

-- Thursday, April 10, 2008 --

Flash still waiting to save every one of us

or, How to Avoid Youtube And Be Your Own Flash Host, Even If You Know Nothing About Flash

by Marty Barrett

Online video hosting services like Youtube provide a convenient solution for people to get their content in front of as many eyes as possible, as well as take the burden of bandwidth usage from the video creator. Youtube and its peers also convert numerous file formats to low-impact Flash movies viewable by most browsers.

So who wouldn't use Youtube?
  1. People who want to keep traffic to themselves. While Youtube provides ways for content providers to link to their own sites, Youtube keeps the web traffic and ad revenue in-house, even if a Youtube video is embedded on the content provider's own site
  2. People who want higher-quality pictures that require more bandwidth. In general, Youtube's video quality is poor, though it will improve
  3. People who want to customize the look and size of their videos and be free of any branding but their own
Since we are those people, it was up to us to forego Youtube's ease of use for our own solution. This required us to learn a little Flash.

What follows is a bare-bones How-to guide. It will tell you how to import video you've already created and convert it to Flash, then prepare it for deployment on your own web server. It won't give you any real insight into why things work the way they do.

Like many people who use Photoshop, we own Adobe's Creative Suite, in which Flash, formerly a Macromedia product, is also bundled, along with web page editor Dreamweaver.

In order to import content created by another program into Flash (in this case, a .m4a designed as an enhanced podcast using Apple's Garageband), we first opened Flash and created a new Flash file (File>New) using Action Script 3.

We then went to the Import command, also under the File menu, and chose Import Movie. Finding our .m4a was easy, though we had to select the drop-down item "All Files" (rather than the default "All Video Formats") before the file was able to be selected.

We wanted the file to be a progressive download from our web server, so that viewers wouldn't be too bothered with the file loading, so we chose the first option in the resulting window.

In the Custom drop-down of the Profiles tab, we chose to encode the Flash movie for Flash 7 at a high quality (700 kpbs), because the current Flash version is 9 and we wanted to provide a high quality video for people who didn't yet have the latest Flash player that could still be played by those people, too.

In the Audio tab, we chose the highest quality audio output, 256 kbps, because my voice needs to be heard at its most mellifluous.

I then chose a player skin that I liked, out of several skin and color choices . This proved to be the first problem.

Because at this point we did not know the difference between two Flash file formats, particularly .swf and .flv, and did not know why the skin was a Flash file unto itself.

It turns out the .flv is the actual movie but the .swfs, for lack of a better way of putting it, contain the metadate for the .flv. Therefore, not only the .flv (the actual movie), but also the .swf that provides the info on the movie AND the .swf that is the player of the movie must also be uploaded to your web server.

Furthermore, the player skin (in our case it was called SkinUnderAll.swf) must be uploaded to either the same directory as the other .swf and .flv file or the root directory where the index.html file is. Since we found contradictory directions on the web, we just uploaded the file to both places. Couldn't hurt - a skin is a small file.

Then we clicked Finish and chose an appropriate place to store the files, which would include a .fla (the editable working file) and the .swf related to the movie.

After the .fla was processed, we were then presented with the Flash "stage" where we could tweak the .swf. This is another area where things were not intuitive, and proved to be the most mistake-addled step of the process.

After much trial and error, we realized we needed to provide the exact URL of where the Flash movie (.flv) would be hosted, even though the .swf's address was already clear.

To do this, we went to Dreamweaver, using it as an FTP program, and uploaded the file to our server.

Then, in Flash's Properties window, we clicked the Parameters tab, which solved a lot of the smaller problems we'd been having before, including AutoPlay (we were able to set that to False for the first time so the movie wouldn't start playing as soon as someone hit our page).

Sure that we'd done everything we could, we then went back to the File menu and chose Publish Preview and saw how the movie would look in Flash. That looked good, so we chose to Publish.

Back in Dreamweaver, we made sure to upload to our server everything we'd just created.

That left the issue of embedding it.

Since we were embedding this in a blog, as opposed to a strict HTML page, we searched the web and found the following code. Rename the .swf, as well as the sizes. If you are using a skin that plays under the movie rather than on top of it, add 40 pixels to the height requirement.



Note that built into the code are provisions for the viewer who does not yet have Flash, as well as a defined MIME type for his/her browser.

This cinched the deal for us. Our movies displayed on all broswers, though sometimes we encountered cache problems where we'd have to refresh pages several times before the movie would show up.

If this was helpful, please let us know. Also feel free to add your own tips.

Labels: ,

Editor: Marty Barrett