FOTD 14: Dreamweaver 8 – Flash Video

UPDATE: I’ve seen many referring to this post after 2010 in regards to technical support/usage issues.  Please note that this post was published in August, 2005 in support of Dreamweaver 8, which is currently 4 versions old and not officially supported anymore. Comments are being closed, so as to not confuse this historical post with current, supported versions of Dreamweaver and video functionality within.  Apologies for any confusion.

In an earlier FOTD, we looked at the workflow for importing and converting Flash Video in Flash 8, and today, we’re going to look at how you can use the resulting FLV files in your Dreamweaver 8 sites using the new Insert Flash Video feature. Well, it’s not an entirely new feature, as the Insert Flash Video command/feature was known in the MX 2004 era as part of the Macromedia Video Kit – a separate product/purchase- but it’s now rolled into the product as a full-fledged, official (and also updated) feature of Dreamweaver 8. Time to explore- let’s dive in.

First, to be clear- this Dreamweaver 8 feature is strictly intended for embedding pre-encoded video clips into web pages quickly and easily- not encoding video to the FLV format, which is accomplished via Flash 8 or the Flash 8 standalone video encoder (all part of the Studio 8 suite of tools). To customize the user experience beyond the steps in this FOTD, you’ll need to delve a bit into Flash- but if you’ve read this far you’re either interested or already on board, right? :)

Anyway, so you’ve got an FLV video file on hand that you’d like to place on your Dreamweaver site. Just open the page you’d like to insert it into, place your cursor in the right location, and select ‘Insert > Media > Flash Video…’ and you’ll be presented with the Insert Flash Video interface.  Let’s step through the elements/options you’ll find here.

First up, you can choose between Progressive Download Video (i.e. the FLV file sits on a web server and is progressively downloaded/played by the Flash video object in your page), or ‘Streaming Video’ (i.e. a Flash Communications Server-based FLV file which is streamed directly to the player). If you don’t have access to a Flash Communication Server, then you’ll probably use the first option most commonly.

Next, you’ll enter the URL to your FLV file on the server. Pretty straightforward.

The ‘Skin’ menu will let you choose from the preset Flash Video player skins that ship with Dreamweaver 8. You can also customize these skins and create your own, but that’s a much more involved subject I’ll cover at another time (as well as during my Flash Video session at the MAX 2005 conference, if you’re attending this year).

The ‘Width’ and ‘Height’ parameters are simply the height and width of your FLV file. You can always click the ‘Detect Size’ button to autofill these based on the FLV file you’re embedding, but if you decide to resize the video here, make sure to click the ‘Constrain’ checkbox so when you change one of these values the other will be updated correctly to keep the aspect ratio of your video unaltered. There are many creative reasons to squeeze and/or stretch video, but this isn’t exactly the best way to do it (always recommended to export the FLV at the final size you’ll be using it at, that way the Flash Player isn’t spending processor time and horsepower converting the video’s size at the expense of smooth playback for your site visitors.

Auto Play, when checked, will simply tell the Flash Player to start playing the movie as soon as enough of the FLV file has progressively downloaded to ensure it will complete without pauses or ‘hiccups’ (note that this also can be affected by network speed and other considerations, so it’s never an exact science). Auto Rewind will return the ‘play head’ to the start of the FLV file when it’s finished playing through the entire file.

The final step is an interesting one- you can have the Insert Flash Video process include a small blurb to prompt users to download the Flash Player if they don’t have it installed. A handy addition that will help make the experience smoother in the edge-cases of browsers without the Flash Player pre-installed (do they still exist?)… :)
I should also note that Dreamweaver 8 will also detect the codec (Sorenson or On2) used in the FLV file, and write the object code (and generic player detection code) appropriately- Flash Player 7 for Sorenson and Flash Player 8 for On2 VP6 (the new video codec introduced in Flash Player 8). This really helps optimize the user experience, behind the scenes, without needing to lift a finger- just let DW8 do the heavy-lifting for you.

Once you’ve selected your choices above, just click the ‘OK’ button, and you’re done! You’ll see a grey(ish) box with a Flash Video icon representing the object in your page, however- you’ll need to preview your page in order to see the actual Flash video and player in context. When you upload to your remote server, however- make sure to also upload the two new ‘dependent’ SWF files in the same directory – one ‘player’ SWF (either progressive or streaming, based on your choice), and one ‘skin’ SWF containing the interface elements for the player controls (again, based on what you selected in the Insert Flash Video interface).You won’t need to jump through hoops to change properties of the object if you’d like to change settings, however- the Property Inspector will always give you direct access to the important settings if you’ve got the object selected.

And that’s basically it- you’ve just inserted a Flash Video file into your Dreamweaver page- no fuss, no muss, fun for the whole family. If this has piqued your interest, make sure to check out my prior post on the Flash 8 Video Import Wizard, as it covers the encoding options you have available when creating FLV files in Flash, and helps ’round out’ the workflow in this FOTD. And stay posted- there will be more on Video coming up in these posts, and if you’re going to be at MAX 2005, I’ll be presenting a session on Flash Video and Dreamweaver that will get into much more depth on the subject.

See you again tomorrow for another Flash 8 feature!