Introduction

Rich media advertisement is a buzz word today. Organizations are spending a huge amount to move out from a traditional banner advertisement approach, booklets and television to a more effective tactics where they can reach out to a wider mass through internet. Rich media advertisement forms a basis of wider coverage at less cost together with a wonderful user experience.

Macromedia Flash, already provides a state-of-art solution for it. However, it is mostly tied to its proprietary engine for shock wave and interaction. Flash are further, required to be embedded as a compiled unit. Besides all, it requires you to learn Flash an extra skill.

Something I like about silverlight is that it supports XAML based platform with language support for programming. EXtensible Application Markup Language (XAML) which is pronounced as Zamel, is used to define your canvas and storyboard, which are easy to manipulate at runtime using languages like C# or VB.Net. These are further deployed as a compressed unit rather than a compiled unit. This is no doubt a step further than what Flash has achieved. One drawback, however, is, adoption among wide number of serious users. I don't see it as a big drawback as long as Microsoft is serious about this product.

Silverlight Kickstart

My silverlight development environment includes VS2008 with SP1, Framework 3.5, Silverlight SDK and Microsoft Expression Encoder. I would not get into these details for the scope of this article. You may refer to Getting Started article for Silverlight, to setup your development environment. Further, if you donot want to get into the intrecacies of XAML, then you might also require Microsoft Expression Blend.

WMV for streaming Video with Silverlight

Silverlight supports WMV format for videos. Using Microsoft Expression Encoder these WMV files can be encoded to have markers on their timelines. These markers can be used by siliverlight for interaction. The markers are simply names given to a time in the video's timeline. Silverlight raises MarkerReached event (if registered) when a marker is reached while playing the video. This forms the basis of interaction between silverlight and streaming videos. There is a nice video tutorial explaining, how to add a marker using Microsoft Expression Encoder.

Silverlight UI

XAML in Silverlight allows you to do a lot of stuffs with the UI using its declarative tags. Few, real interesting things you can do, without any extra skill required, includes, drawing a curve, masking, controlling opacity, define animation ... all through XML like declarative tags ... Wow!. In this tutorial, I will be showing you how to create an interactive overlay on a running video. For this, I have a video with three markers defined on it (using Encoder). Now let us first examine the UI.

The UI

Few things, I would like to explain here, before we proceed to next step, since they have been referred ahead. Take a sneak into the code for things, I have marked in bold. Notice that:

  • Movie name is "MainMovieStream" defined as an attribute "x:Name".
  • The "MarkerReached" event is registered for the movie as "MainMovieStream_MarkerReached".
  • Canvas with a name "TopOverlay" which is placed -325 pixels on the left.
  • "TopOverlay" canvas has an inner element "TopText" with an event "MouseLeftButtonDown" handled by "TopText_MouseLeftButtonDown" function
  • A Canvas "BottomOverlay" is defined in a similar faishon except its top is "131".
Silverlight Story Board

Take a sneak into the code for things, I have marked in bold. Notice that:

  • Storyboard "TopOverlayIn" targets the canvas "TopOverlay".
  • The "Storyboard.TargetProperty" tells us that the "Left" property has to be changed.
  • The "SplineDoubleKeyFrame" defines, that after every 1 sec the target property moves near to the "Value=0". Hence, the Canvas.Left moves from -325 to 0
  • The Storyboard "TopOverlayOut" does exactly the opposite of "TopOverlayIn".

MediaControl.xaml

The Storyboards are treated as Canvas resource which would be used when required. Let us see the complete XAML for our tutorial.

C# Code

When you add a XAML file into your solution, visual studio responds with adding an associated code behind file for the XAML. Besides, you would also find a App.xaml and its code behind file with same name. While doing any development on Silverlight, most of the time you would ask "How can I pass values to Silverlight application at runtime" or in another way "How can I make it as a component to be used in other projects?". This is done through parameter passing at the time of initialization.

App.xaml.cs

Let us sneak into App.xaml.cs file where the necessary changes has been made for the same. The only changes required in the App.xaml.cs file are:

  • Declare an "IDictionary" object for paramters as a class variable

    public partial class App : Application {

        privateIDictionary<string, string> initParams;


    ...

  • Initialize it in the "Application_Startup"

    private void Application_Startup(object sender, StartupEventArgs e)

    {

        this.RootVisual = new MediaControl();

        InitParams = e.InitParams;

    }

MediaControl.xaml.cs

Now let us sneak into the MediaControl.xaml.cs file to see how we collect the parameters and how we handle the animation and events.

In the code above we get the reference of the Silverlight application using "Application.Current as App" (marked in bold) in the "Page_Loaded" event. Once we have got the handle of the application we can access its public properties. In this case the parameters. As you can see, I am iterating through each parameters and storing the values into my local variables. The marker parameters here contains the storyboard names that we would see in the next section. Also notice, how I am handling the "MarkerReached" event and the "MouseLeftButtonDown" events. The actions are self explanatory here.

Embedding Silverlight RichMediaAd Control

Once you have done with this code, your control is ready to be used. When you compile a Silverlight application, you would notice that it generates a RichMediaAd.xap file under ClientBin folder of your web application which references the Silverlight application. This .xap file is nothing but a compressed file containing your application manifest and the DLL. You can use a simple un-zip command to view the files inside. In the page

Now let us see the code where we embed this Silverlight control we made.

Once you have embedded the XAP file. It is ready to run. Notice, that I am sending all necessary parameters at runtime, including the media I want to use.

Happy Silverlight Programming !!