Working with Rich Media and Expression Web 3

Author: Don Burnett

Expression Newsletter, subscribe now to get yours.

Expression Web 3 is a huge departure from the previous versions of Expression Web. Besides having a really great fast and new FTP client (that it suffered from not having before), it has never been easier to work with rich media. Let’s take a look at working with rich media on a web page.

Create a Website

First let’s create a new website.

When the dialog opens, you’ll notice three options: Create an Empty Website, Create a One Page Website, and Create a Website from a Template, which includes some premade CSS style sheets and DWTs (Dynamic Web Templates) compatible with Adobe’s own Dreamweaver Templates.

Select “Empty Web Site” for this exploration and click “OK”.

You will see a new panel called the Site View with a predefined HTML page (default.html). Default.html is the default web page if you are using a Microsoft web server. If you are using another brand of web server, it might be defined as index.html; or, if you are using server-side technologies like ASP.NET, it might be default.aspx. Microsoft puts a nice little “home” icon next to it to let you know that it is the home page of your website. You can redefine which page is the home page and has the nice little icon next to it, but that’s another tutorial.  Either way, double click this icon to open the page.

After opening it, you will see a blank page like this:

It looks much like Expression Blend, except the design split and code options for how you view the actual document are now located at the bottom of the page. Below this you are also given some good information about the document that you have created.

Add Media to a Page

Now let’s look at adding some media to the page. For this exploration we are going to concentrate on a few of the options of media created from within Expression Encoder and Expression Blend, but we will also look at inserting an Adobe Flash document into the mix as well.

From the Toolbox in the upper right, we can insert media, Note the available types: Deep Zoom, Flash Movie, Silverlight, Silverlight Video (which has the new Expression Encoder Icon), and the always familiar Windows Media Player icon.

This is also available from the Insert Media menu as shown below:

Insert a Flash Movie on your Web Page

Let’s start by adding an Adobe Flash media format document to your web page. There are two ways to do this:

• Drag and drop the “Flash Movie” icon from the Toolbox onto your document.
• Select your media from the menu.

You are then prompted with a dialog box that will let you find your Flash movie file to insert.

After inserting you should see something that looks like this:

You may have to adjust the width and height of the object in Expression Blend 3 to match the size of the file and keep it proportionate to the original Flash movie you created. You can do this by dragging the handles of the object or adjusting the <object> tag it has just inserted in your HTML. After you have got everything just right, you should save it.

It’s also best to keep all of your assets (like these movies) in the same folder as your website project. Expression Web 3 will also nicely manage this for you if you forgot to put the file in your Site folder (as long as you click Save).

If you click the Change Folder button, you can create a new folder in your website project to save to, or leaving it as such will leave the Flash movie in your main directory.

Now after we have saved everything, let’s preview this in our web browser. Select File > Preview in Browser and select a browser installed on your system.

From there we can see what the Flash movie will look like.

Note: Display in Super Preview is good for checking browser differences for HTML, but it does not play rich media files.

To see the Flash movie played while in Expression Web, right-click it and select “Play Movie in Flash Format.” You can see the results directly in the Designer instead of having to launch a web browser.

Set Flash Playback Properties

To set playback properties for the Flash movie, select Flash SWF Properties in the context menu.

Then, from the dialog you can set parameters about how the movie plays, its size, and how it should look.

You can also control more general settings, like whether the movie should play automatically or show its context menu, and where it should point to update the Flash player plug-in if you need a newer version:

Let’s take a look at the <object> tag Expression Web made for us in HTML:

    1: <object id="flash1" data="MyFlashMovie.swf" style=
       "width: 866px; height: 459px" type=
       "application/x-shockwave-flash">
    2:     <param name="movie" value="MyFlashMovie.swf" />
    3: </object>

It’s a simple embed tag with simple parameters.

Replace the Flash Movie with a YouTube Video

Let’s compare the Flash object embed tag we created in Expression Web to a YouTube Video embed tag: first, our tag (lines 1 —3); and second, the YouTube default embed (lines 4-9).

    1: <object id="flash1" data="MyFlashMovie.swf" style=
       "width: 284px; height: 183px" type=
       "application/x-shockwave-flash">
    2:     <param name="movie" value="MyFlashMovie.swf" />
    3: </object>

    4: <object width="425" height="344">
    5: <param name="movie" value=
       "http://www.youtube.com/v/yujB0Xx_vPU&rel=0&color1=0xb1b1b1
       &color2=0xcfcfcf&feature=player_profilepage&fs=1"></param>
    6: <param name="allowFullScreen" value="true"></param>
       <param name="allowScriptAccess" value="always"></param>
    7: <embed src="http://www.youtube.com/v/yujB0Xx_vPU&rel=0
       &color1=0xb1b1b1&color2=0xcfcfcf&feature=player_profilepage
       &fs=1" type="application/x-shockwave-flash"
       allowfullscreen="true" allowScriptAccess="always"
       width="425" height="344">
    8: </embed>
    9: </object>

Notice that the YouTube embed uses more <param> tags and an <embed> tag in the <object> tag (to make it compatible with older and different browsers).

Let’s replace our own embed with the <object> embed tags that YouTube provides. First find the YouTube video you want to embed, then click the bottom embed icon in the YouTube player and select the red embed icons as seen below.

The player will shrink, exposing the embed code. Right-click it, and from the context menu, select “Copy embed html”.

It’s easy to find just the lines of the old <object> tag from our original embed and cut and paste the new ones from the YouTube video in Expression Web’s Split or Code views, which you can enter from the bottom of the page.

Select the original <object> tag and paste, replacing the old code. Then select File > Save. You may then see something that looks like this below in your design view. IGNORE it and don’t worry.

To verify that it’s playing, select File > Preview in Web Browser.

And we have the new embed all set and ready to go.

And you will see something like this, proving your embed code worked.

Let’s take a look at now some of the other rich media embed options.

Add Deep Zoom or Sea Dragon to a Web Page

Another option is Deep Zoom Composer or Sea Dragon Images. These are usually collages of high definition imagery that you can zoom in on.

You can create them with either Microsoft Live Lab’s Sea Dragon  (which works great on the Apple iPhone, by the way) or using Silverlight’s own Deep Zoom Composer.

If you are curious about people using this technology, the most famous site today is the Hard Rock’s Memorabilia Collection immortalized in Silverlight Deep Zoom.

To use a Deep Zoom Gallery on your web page, first make the gallery using the free Deep Zoom composer download by Microsoft. After you have done so, go back into Expression Web and drag the Deep Zoom icon from the toolbox onto the design surface.

Next, a dialog will appear.

Find your output folder with the images and select either the “dcz_output.xml” file or the manifest.xml associated with the deep zoom project output folder. And you are done: the Deep Zoom gallery is now inserted in your web page and ready to go.

Add Silverlight to a Page

What if you just want to put your own normal slide show into the web page? Or a game you have done in Silverlight or anything in Silverlight for that matter? Let’s add a Silverlight Slide Show component/program as an example to our page.

Slide.Show 2 Features:

• Minimal setup and configuration
• Image and video slideshows
• Resizable for any Web page design
• Full-screen and embedded modes
• 100% configurable via XML, themes, or your own custom provider
• Slideshow data from XML, Flickr, or your own custom provider
• Auto-playback with numerous transitions (e.g., fade, shape, slide, wipe)
• Cross-browser support (e.g., IE 6/7/8, Firefox 2/3, Safari 2/3, PC and Mac)
• Open source (e.g., extensible, configuration and data provider models, templated controls, commented code)

It works very much like everything we have done before: simply drag the Silverlight icon from the toolbox over to the page.

Next, from the pop-up dialog box, choose the file ending in .XAP that Silverlight generated for you when you created the Silverlight application in Expression Blend or Visual studio.

It will then show up as an object in the design view.

And in the code.

Note that it looks much like the Flash/YouTube embed tag we saw earlier:

    1: <div id="silverlightcontainer">
    2:    <object data="data:application/x-silverlight-2,"
           type="application/x-silverlight-2" width="640"
            height="480">
    3:       <param name="source"
                value="silverlight/Vertigo.SlideShow.xap"/>
    4:       <param name="background" value="white" />
    5:       <param name="minRuntimeVersion" value="2.0.31005.0" />
    6:       <param name="autoUpgrade" value="true" />
    7: <a href="http://go.microsoft.com/fwlink/?LinkID=124807"
        style="text-decoration: none;">
    8:          <img src="http://go.microsoft.com/fwlink/
                 ?LinkId=108181" alt="Get Microsoft Silverlight"
                 style="border-style: none;"/>
    9:       </a>
   10:    </object>
   11:    <iframe id="I1" style='visibility:hidden;height:0;width:0;
            border:0px;' name="I1">
   12:    </iframe></div>

In this example I am inserting a premade slideshow program in Silverlight called Slide.Show 2.0 from Vertigo software.

To finish this example I’d need to add photos either from a web service API on a photo sharing site (like Flickr.com) or insert the photos into a folder or main directory of my website, then edit an XML configuration file to set up the order of the photos/slides and photo gallery and add this XML configuration file to the site also. While this is not the entire purpose of this tutorial, you can find more information below on how to set it up.

Quick Links

•   Quick Start Guide
•   Configuration Guide
• Ben Hoffman's SSGenerator tool for image resizing and Slide.Show 2 data file generation

Adding your Own Videos to the Page

What if your video isn’t from another site that is sharing it; what if you want your own video on the page? That’s pretty simple, thanks to support for Expression Encoder.

With Expression Studio at your fingertips, you can add a video using Expression Encoder Technology (with Silverlight support) easily to your page.

As before, select Silverlight Video (using the purple Expression Encoder Icon) and drag it over to the page. Then a file dialog will pop up, allowing you to select your video.

Select the video, then click Open. This brings up the Insert Silverlight Video dialog box from Expression Encoder. It will allow you to choose settings such as the style and type of video player you are using, as well as encoding presets (including Facebook HD, 1080p,VC-1, H.264, and many others, including many for different devices).

You can also chose to encode at the same settings as the source video. (You should chose this option only if you got this video already pre-encoded for the web from someone else.)

Which encoding settings you choose will be based on your audience, bandwidth, etc. If you are storing the video on your website directly and not using a streaming server, I recommend you stick with one of the high-speed broadband or DSL rates.

To finish the process, click Encode and wait while encoding and insertion happens. When the process is complete, your page will look like this:

Save the page and select File > Preview in Browser... to see the results:

Success!! You have just encoded and inserted your new home video on the page with a Silverlight player.

This last option for encoding video is the most flexible, and can support just about every common environment, speed, and Internet scenario, including streaming.

Windows Media Player (ActiveX Control)

There is one last option for rich media: Windows Media Player.

Why would you want to use this as an option? Some legacy streaming scenarios may require this, or you just might not have a browser on some of your supported systems that can play back with Silverlight (no matter how unlikely that is). Using Windows Media Player works the same as the other options for inserting video; however, this is using an older legacy ActiveX control to do all of the old-style playback, and doesn’t use Silverlight or Flash at all.

Simply drag the Windows Media Player icon from the toolbox over onto your page in the design surface. Then, from the file dialog, select the video you want to add.

Click Insert.

Your page will now look something like this.

Select File > Save; then select File > Preview in Browser again.

And based on our results, I’d say we have added a legacy Windows Media Player control with video to the page.

Like other controls, we can also modify properties of the control on the page.

To do this in Expression Web 3, simply right-click the control window and select ActiveX Control Properties from the context menu.

Being a legacy control, it may have other options such as closed captioning and different features still not present in all of the Silverlight controls, so you will need to think about when and whether or not you should still use this control versus any of the Flash or Silverlight options mentioned above.

Here’s a tour of some of the Media Player’s settings and options.