Lesson 8 - Integrating Flash Video



welcome to Wreamweaver 8

Introducing Flash Video

Flash Video (FLV) is a proprietary file format used to deliver video over the Internet using Adobe Flash Player (formerly known as Macromedia Flash Player) version 6, 7, 8, or 9. Flash Video content may also be embedded within SWF files. Notable users of the Flash Video format include You Tube, Google Video, Reuters.com, Yahoo! Video and MySpace. The BBC have recently begun using .flv based media on their news portal.

Flash Video is viewable on most operating systems, via the widely available Adobe Flash Player and web browser plugin, or one of several third-party programs such as MPlayer, VLC media player, or any player which uses DirectShow filters (such as Media Player Classic, Windows Media Player, and Windows Media Center) when the ffdshow filter is installed.

from Wikipedia definitions http://en.wikipedia.org/wiki/Flash_Video

Flash Video is now an Adobe Product

Adobe's Flash Development Center
http://www.adobe.com/devnet/flash/video.html

Adobe's Flash Video Learning Guide
http://www.adobe.com/devnet/flash/articles/video_guide.html

Flash Video Gallery for testing with the tutorial
http://www.adobe.com/devnet/flash/articles/video_gallery.html

Embed code for inserting Flash Video

  1. <object width="425" height="350">
  2. <param name="movie" value="http://www.youtube.com/player.swf?video_id=dUTZvdgr42U"></param>
  3. <embed src="http://www.youtube.com/player.swf?video_id=dUTZvdgr42U"
  4. type="application/x-shockwave-flash" width="425"
  5. height="350"></embed></object>

Copy and paste this code carefully - and make sure to test your uploaded Flash Video.

Inserting Flash Video from Dreamweaver

Using Dreamweaver to insert Flash video is straightforward. Follow the instructions below to insert Flash video, as well as Shockwave (Director) files. Note carefully that both the <embed> and <object> tags and attributes are very specific for each of the file types, and the slightest of errors can cause your image or movie not to display properly.

Tutorial (insert screen grabs here)

Flash video is a way of showing video on your website. Like other video formats, such as QuickTime, Windows Media, and RealVideo, Flash video can show you full-motion video in context on your web page. One of the big advantages of Flash video is that almost all browsers already have the Flash plug-in installed, so your video is likely to be viewable by almost anyone.

Before you can put Flash video into your web page, you first need to convert your video to to the Flash video format, which has a .flv file extension. Macromedia Studio 8 includes the Flash 8 Video encoder, which can convert QuickTime, DV, MPEG, AVI, and Windows files into Flash video.

To insert a Flash video file:

  1. Click to place the insertion point where you want the Flash video file to appear
  2. Choose Insert > Media > Flash Video
    or
    In the Common category of the Insert Bar, choose Flash Video from the Media pop-up menu.
    The Insert Flash Video dialog appears (insert image 8.39)
  3. From the Video type pop-up menu, choose either the Progressive Download Video, or streaming Video.
    You will most often choose Progressive Download Video, which downloads the Flash video file to the users local hard drive (to a cache file), and then plays it. The Streaming Video choice requires extra server-side software (Macromedia Flash Communication Server which is now an Adobe product.
  4. In the URL field, enter the path to the Flash video file (in some cases this might be a URL if the file is located on another server). You can instead click the Browse button, which brings up the Select File dialog, which allows you to navigate to select the video file.
  5. From the Skin pop-up menu, choose the kind of video controller you want to appear with the video.
  6. Enter the Width and Height (in pixels) that you want to display this video (note carefully the origina dimensions of the vidoe if you have them, and be prepared to do some trial and error. Test carefully!)
    or
    Click the Detect Size button, which attempts to read the Flash video file and figure out what size it is. Depending on your video, this option might not work, but it's always worth trying. Otherwsie it's trial and error - which can be both time consuming and imprecise.
  7. If you want the video to automatically begin playing when the page is loaded, select the Auto play check box.
  8. If you want playback control to automatically return to the starting position after the video finishes playing, select the Auto rewind check box.
  9. Click OK.
    A placeholder for the Flash video file appears on your page (insert image from 8.40). Note that you cannot play the Flash video file inside Dreamweaver. Instead, you must preview the page and the video in a Web browser (insert image from 8.41).
  10. Upload the Flash video and test it. If you are pointing to a remote file that is not under your control, make sure to test that, and make sure that you have permission to frame / inetgrate that video from your website. While YouTube will place embed code for you to link to their videos (which are also Flash Video) you need to be very careful about ensuring that what appears inside your website is royalty free and or open source.

See the test file barsandtone.flv that I have uploaded to barsandtone.htm - it plays a simple tone.

You can also watch a very compelling video on sustainability at newcollege.htm which follows the steps above.

To edit a Flash video file's properties:

  1. Click to select the Flash video file.
  2. In the Property Inspector, make the necessary changes you desire.
  3. Upload and test (don't just test locally) and if possible send the URL to a colleague to test.

This tutorial will be completed on or about November 1st, 2008

Copyright © 2008 - 2009 Robert D. Cormia - September 15, 2008