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), the ability to add rich media has never been easier to work with. Let’s take a look at working with Rich Media on a web page..

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 pre-made CSS stylesheets and DWTs (Dynamic Web Templates compatible with Adobe’s own Dreamweaver Templates) ..

We want to select “Empty Web Site” for this exploration and click “OK”..

After you will see a new panel called the site view with pre-defined 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 for you to let you know that it is the home page of your website. You can re-define which page is the home page and has the nice little icon next to it, but that’s another tutorial.  Either way let’s double click on this and open it…

After opening it we 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..

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 right of the screen toolbox 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 drop down menu as shown below..

Let’s start by adding an Adobe Flash media format document to your web page..

There are two ways to do this just drag and drop from the tool box the “Flash Movie” icon onto your document or select it 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 tag in Expression Blend 3 to match the size of the file and keep it proportionate to original flash movie you created in width and height. you can do this by clicking on the handles of the mouse 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 on change folder 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…Go up to the file menu and select “Preview in Browser” and select a browser installed on your system..

from there we can see what the flash movie will look like..

A note about Display in SuperPreview: while it’s good for checking browser differences for HTML it’s not so good previewing rich media yet and will not show you your rich media running just HTML based layout differences..

If we want to see the flash movie played while in the Expression Web Designer we can just right click on it and select “Play Movie in Flash Format”.. and we can see the results right there in the designer (instead of having to launch a web browser)

We could also have selected in the context pop-up menu “Flash SWF Properties..”

then from the pop up we can set up some parameters about how it plays, it’s size and how it should look..

Or more general settings (like if it should play automatically, show it’s 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 it 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

Let’s compare this to a YouTube Video embed..

   1: <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/yujB0Xx_vPU&rel=0&color1=0xb1b1b1&color2=0xcfcfcf&feature=player_profilepage&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><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"></embed></object>

   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 there are more “Param” tags and an “EMBED” tag in the object tag (to make it compatible with older and different browsers)…

Let’s replace this embed with the obect embed tags that youtube provides.. First we find the YouTube video we want to embed, then click on the bottom embed icon in the player and select the red embed icons as seen below..

The player will shrink exposing the embed code.. right click on it and from the context menu just select “Copy embed html”

It’s easy just to find 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 hit paste

then select “SAVE” from the file menu replacing the old code..

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 just select preview in web browser from the file menu..

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..

DEEP ZOOM or SeaDragon

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

You can create them with either Microsoft Live Lab’s SeaDragon  (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 you simply first make the gallery using the free DEEP ZOOM composer download by Microsoft..

After you have done so you simply go back into expression web and drag the deepzoom 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..

You can have cool galleries on your webpage that looks like this below (thanks to friend Kirupa at Microsoft for this example)..

Adding 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 (e.g. IE 6/7/8, Firefox 2/3, Safari 2/3, PC and Mac) support
• 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 from the toolbox drag the Silverlight icon over to the page..

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

It will then show up as an OBJECT in the design view

and in the code.

Note it looks much like the FLASH/YouTube embed 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 an already pre-made slideshow program in Silverlight called Slide.Show 2.0 from Vertigo software.

To finish out 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 setup the order of the photos/slides and photo galley 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 the Expression Encoder support..

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

As before we select Silverlight Video (using the purple Expression Encoder Icon) and drag it over to the page..

Then a file dialog will pop-up allowing us to select our to be included video..

We can click on the video to select it then click open..

finally another box from Expression Encoder will pop-up..

It will allow us to choose our settings such as the style and type of video player we 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, and 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 on “Encode” and wait while encoding and insertion happens..

Finally your page will look like this below..

Let’s save the page and hit “Preview in Browser..”  and see what we’ve got..

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

Using this last option for encoding video is the most flexible option 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, that is 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 playback with Silverlight (no matter how unlikely that is)..

It works the same as the others however this is using an older legacy ActiveX control to be doing all of the old style playback and doesn’t use Silverlight or Flash at all..

Simply drag it 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 Save from the file menu then from the same file menu select 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 on the control on the page..

To do this in Expression Web 3 we simply right click on the control window..

and select ActiveX Control Properties from the context pop-up 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..

Anyway hope this helps…