Animating Video

In this example I’ll show you how animations can be performed using a VideoBrush. This is one of the examples that attracts the users attention by completing the animation at the right time. The video will be clipped and rotated during the animation.

Open Microsoft Expression Blend. Select the Silverlight 2.0 application template from the New Project dialog box. Name the project SilverlightVideoAnimation.

Figure 1: Setting up the project

Select the Grid in the Properties panel. Under the Brushes tab select Background and set the Background to LinearGradientBrush. Choose the Color key of both sides of the gradient as you prefer. I've experimented here with a Blue Color for the gradient. Create two Rectangles by selecting the Rectangle tool from the ToolBox. Set the Width of the Rectangle to 180 and Height to 200; name the Rectangle as rectangle. Set the same Width and Height for the second Rectangle too. Name the first Rectangle rectangle and second as rectangle1.

Add a MediaElement and name it whatever you like. I chose the name mElement. Set the Width and Height to 100. Set the opacity of MediaElement to 0 and the Source property to a media file that is located in your hard drive, such as a .wmv or .avi file or whatever you like. Now Fix the Fill property of the first Rectangle. Choose VideoBrush to Fill the Rectangle. Set the Source name to the name of your MediaElement. In this case, it is mElement. Add five buttons to control the media element and the storyboard.

If you read the articles of this series carefully, you should have become familiar with the RenderTransform property of the UIElement. Here I am setting the TranslateTransform object x co-ordinate to 80, which means half of both our Rectangle elements. Set the Width and Hight of the second Rectangle to be the same as the first one. In the <VideoBrush.RenderTransform> Section set the TranslateTransform object X co-ordinate to -80 to see playing half of the video in each Rectangle when in animated mode. In the Storyboard, under the <UserControl.Resources>, I've named the Storyboard as Storyboard1 and set its RepeatBehaviour to 4x. That means both the rectangles will animate four times before finishing the animation. One thing to note about the iteration place holder, which in this case is 4x, is that it specifies the number of times an animation will repeat. The number of iterations is always followed by the lower-case character x. It represents a sort of multiplication character, where 3x means 3 times, 4x means 4 times, 2x means 2 times etc. The resulting XAML generated by the Expression Blend should look like the following:

Now add some logic to see this animation in Full Screen mode. To get this job done we need to add some procedural code. Right click over Page.xaml and select Edit in Visual Studio. This is shown in the following screenshot.

Figure 2: Setting up the animation to run in full screen mode

Add a reference to System.Windows.Interop in the namespace section of the Page.xaml.cs codebehind file. This will help us in using the SilverlightHost class. The purpose of this class is to provide information on Silverlight-based application's instantiation settings and exposing some of the HTML DOM values for the hosted plug-in instance. First I’ve created a new instance of SilverlightHost object. In this case it is declared as slHost.

To specify the size I’ve created a method named SizeUI, like the following:

Here I’ve fixed the width and height of the rectangles and media element for the final output. Next I’ve defined an event handler called LayoutRoot_FullScreenChanged and called my SizeUI method to add some functionality.

To start the storyboard I’ve created a LoadAnimation method and called the storyboard’s Begin method and also the Play method of the media element to control video by clicking the play button.

To stop the animation I’ve defined a Storyboard_Stop event.

I’ve also defined two events for the resume and pause functionalities; and called the storyboard’s Resume and Pause method.

At last I’ve defined an event for full screen support which has been wired to btnFullScreen, which is a button in this case. The logic for this event is quite simple. I’ve checked the condition using an if block, by determining whether the Silverlight plug-in is running in full screen mode or not.

By clicking this button we can see the animated video in full screen.

Figure 3: Video Animation in Action

Summary

You can surely make this application more effective as we've only touched on the basics of video animation with Silverlight. I hope you’ve enjoyed this trip into animation with Silverlight 2.0 beta and that you are ready to get your feet wet.

Thanks very much and happy coding.

About Faisal Khan

I am currently working in Bangladesh as a Freelance UX designer and developer. My passions revolve around creating the next generation desktop application and Rich Internet applications and I am a diehard fan of WPF and Silverlight. My goals are to create applications which will serve the user in... View complete profile