Exploring the code

Based on the settings that you chose for this exercise, Dreamweaver inserts the following code into your web page (the highlighted code is explained next):

<script type="text/javascript">
AC_FL_RunContent(
    'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0',
'width','320','height','240','id','FLVPlayer','src',
'FLVPlayer_Progressive','flashvars',
'&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=../videos/chicken01&autoPlay=true&autoRewind=true',
'quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage',
'/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','FLVPlayer_Progressive'
    ); //end AC code
   </script>
   <noscript>
   <object
    classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
    width="320" height="240" id="FLVPlayer">
   <param name="movie" value="FLVPlayer_Progressive.swf" />
   <param name="salign" value="lt" />
   <param name="quality" value="high" />
   <param name="scale" value="noscale" />
   <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=../videos/chicken01&autoPlay=true&autoRewind=true"
    />
   <embed src="FLVPlayer_Progressive.swf"
    flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=../videos/chicken01&autoPlay=true&autoRewind=true"
    quality="high" scale="noscale" width="320"
    height="240" name="FLVPlayer" salign="LT"
    type="application/x-shockwave-flash"
    pluginspage="/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
    />
</object>
</noscript>

What does this all mean? The parameters you specify in the Insert Flash Video wizard are inserted into this HTML snippet, which pass information to the SWF file using FlashVars (see the note below). The skin, called Clear_Skin_3, is copied to the same folder as the current HTML file, although it omits the file extension (.swf) in the HTML code. The second parameter, streamName, points to the FLV file you defined in the URL text box. It is a relative path and again omits the FLV file extension (.flv).

Note: FlashVars is a mechanism for passing variables to the SWF file through name-value pairs in the HTML. The name-value pairs end up as variables on the root timeline of the SWF file. This is a great way to import assets paths and simple parameters into your SWF file.

The next two parameters are Boolean (true/false) values, which are based on your selections in the wizard. If you want to modify the skin or path to the FLV file, then you can modify these values directly using Code view in Dreamweaver. You might need to edit the width and height parameters manually in both the param and embed tags. These values represent the width and height of the FLV document, respectively. However, if you use certain default or custom skins, you might need to modify these values if your skin contains a border and is larger than the dimensions of the FLV file.

Due to cross-browser issues, you need to define the FlashVars values in both a param tag as well as the embed tag so that the code works with Microsoft Internet Explorer–based and Netscape-based browsers

One last thing to notice is the JavaScript code surrounding the object and embed tags. This is new to displaying Flash SWF files in a browser. Dreamweaver (and Flash) copy a JavaScript file named AC_RunActiveContent.js to a relative path in relation to the HTML page containing the SWF file. The JavaScript file and the additional code seen above allow users to interact with the SWF file on the web page without having to click first to activate it.

You may see a prompt at various points stating that Dreamweaver is creating the dependant JavaScript file.

If you look at the chickens folder, you can see that several files are automatically placed there by Dreamweaver (see Figure 6). The Scripts folder is created dynamically containing the JavaScript  file described above. The Clear_Skin_3.swf and FLVPlayer_Progressive.swf are exported based on your settings in Dreamweaver. You may notice multiple skin files in the folder if you experimented with different skin settings. You can delete the unused skin files in the end.

If you look at the files and folders in Figure 6, you can see that Dreamweaver automatically added the Scripts folder to the farmsite directory and two Flash files in the chickens directory. The Scripts folder contains the JavaScript file just described. The Clear_Skin_3.swf and FLVPlayer_Progressive.swf are exported based on your settings in Dreamweaver. You may notice multiple skin files in the folder if you experimented with different skin settings. You can delete the unused skin files in the end.

Figure 6. chickens folder after adding the video to the page

Note: The actual SWF file you need to drive the Flash video component is a mere 10–12K, depending on whether you select the progressive download or streaming option. Using one of the default skins adds approximately another 4–11K, depending on the skin you choose.

Where to go from here

This tutorial demonstrates how easy it is to add video to existing web pages using Dreamweaver and the Flash video component. With only a few clicks of the mouse, you can embed an FLV file using the default skins.

With a bit of extra work (and Flash CS3) you can also create a custom skin that matches your website. To find out how to customize playback controllers using Flash, check out the Dan Carr's article, Controlling Flash video with FLVPlayback programming.

With a bit of creativity, you can create much better skins and projects using the Flash video component.

• For information on Flash video and Flash, refer to the Flash video learning guide.
• For more information on the FLVPlayer, see the FLVPlayer posts on Peldi's blog.
• For great Flash video templates, refer to the Flash Video Template site.

No animals were harmed in the making of this article.

Page 4 of 4

Previous Page