Authoring a Web Page for Flash Linked Downloadable Streaming with Dreamweaver CS4

Posted by Derrick on February 11, 2010 under Video Streaming and Compression | 3 Comments to Read

Authoring a Web Page for Flash Linked Downloadable Streaming with Dreamweaver CS4 is the topic of this tutorial.  The Flash Linked .SWF and .FLV files we’ll be using in this tutorial were creating during encoding with Sorenson Squeeze 6. It will be helpful to first complete the Tutorial – Encoding Flash Linked Downloadable Streaming Videos with Squeeze 6.

So in this tutorial you’ll learn how to author a .FLV video file that has a .SWF player/skin surrounding it.  What’s nice about Squeeze is you can use it to create your .SWF and .FLV files but it also creates an .HTML page with coding that you can use to  Author your Web Page in Dreamweaver.

OK. Enough for the introductory items. Time to get started with the tutorial.

At the start-up screen in Dreamweaver in the center column click the Create New HTML button.  Before you do anything else click the Split screen button at the top of your web page.  This way you can see the Code view and the Design view.

In your new web page you’re going to first create a new table to help manage where your video is on the screen.   First, position your cursor in the Design view.  Then, click the Insert Pull-down Menu and select Table.  This will open a dialog to adjust your Table.  For this table you’re going to create a Table that has 2 Rows and 1 Column.  Type 2 in the Rows Text Box and Type 1 in the Columns Text Box.

Now you need to position the Table in the center of your Web Page.  First select the edge of you Table.  It should appear selected similar to the image above.

Once your Table is selected you can adjust the location.  From the Properties window click the Align Drop-down and choose Center to place your Table in the center of your Web Page.

Let me explain something.  This is example of how the folders are structured for the website for this tutorial.  Let’s look at two important folders, the html folder and the movies folder.  On your desktop create a folder called Tutorial_Website and inside the folder create a folder called html and a folder called movies.  On your website you’ll also create a folder called html and movies.  Essentially the same folder file structure you have on your website should be the same as what you have on your desktop.  Now let’s move on.

Prior to this tutorial we encoded our Flash Linked .SWF and .FLV files using Sorenson Squeeze 6.  To learn how to encode your Flash Linked Downloadable Streaming videos visit the Tutorial -  Encoding Flash Linked Downloadable Streaming Videos with Squeeze 6.

Now, Take your .FLV and .SWF files that were created in Sorenson Squeeze 6 and move them to your movies folder.  Also, once you move them in your movies folder upload the .SWF and .FLV file to your movies folder on your Web Server.  Your files are now where they need to be for the authoring process.

Next, save your .html Web Page by Navigating to the File Pull-down Menu and clicking Save button.

You need to save you .html Web Page in the html folder that you create earlier.  Name your file FlashLinkedTutorial.html and click the Save button.

It’s now time to author your video.  The reason you created the Table that way you did is so that you can place your video in the bottom Cell and add a Title in the Cell above.  Click in the bottom Cell of your Table.  You should see your cursor appear at the the beginning of the bottom Cell.

Next go to the Insert Pull-down Menu, Choose Media then SWF from the Sub-menu.

Navigate to your .SWF file, which should be located in your movies folder.  Notice as I select the .SWF file under the URL Text Box it displays ../movie/Car02_F8_flashlinked.swf.  This displays this way because the html and movies folders are parallel to each other. That is why it is important to first save your .html page before adding you .SWF file and it also why it’s important to put your .SWF and .FLV file in the movies folder first.  With your .SWF selected click the OK button.

The bottom Cell of the Table should display your .SWF file.  In the Top Table Cell type My Video Name.

With the Top Cell still selected, from the Properties window click the Horizontal Drop-down and choose Center.  Now your text will be centered.

Now it’s time to work with your HTML code in the Code View.  Notice that above for the path to the .SWF file it displays ../movies/Cars02_F8_flashlinked.swf.  This is good but we need to add the flashvars info for the path to the .FLV file.  Remember the .FLV is located in the same folder as the .SWF file.  The flashvars information will be added in both references of the Object Tags.

We can use the code in the .html Web Page generated in Squeeze 6 along with the .SWF and .FLV files. Open the .html Web Page in Dreamweaver.  My file is titled Cars02_F8_flashlinked.html.  When the page opens copy the flashvars code similar to above and choose Edit from the Pull-down Menu in Dreamweaver and select Copy.

Now paste the code in both references of the Object Code similar to above.  Once you paste the code make sure you add the proper path to your .FLV file.  Before your file name type ../movies/.    Next, Save your .html Web Page.

Finally upload your FlashLinkedTutorial.html to the html folder on your Web Server.

Now you can pull up the URL to your Flash Linked Downloadable Streaming video in your Web Browser.  The URL should be http://www.yourdomainname/html/FlashLinkedTutorial.html

This is what your Web Page should display when you pull it up.  You now have a Flash .FLV video surrounded by the .SWF Aluminum Player skin from Sorenson Squeeze 6.   The video should automatically play.  Congratulations on authoring your Flash Linked Downloadable Streaming video using Dreamweaver CS4.