Creating Video Pre-Roll with Expression Design, Blend and Encoder

~ rbonini

The only part of Expression Studio 3 I’ve really had a chance to work with is Expression Encoder 3 for the screencast work. So I thought I’d have some fun with the other parts of Expression Studio, namely Design and Blend.

Now, it took a bit to time to figure out, but its much easier designing your assets in Design than it is in Blend. Blend is for the animation. Its actually pretty easy to use, its well though out and all. So, once I figured that out, things were much easier.

Now, I really didn’t do anything too adventurous. Just making basic shapes on a canvas and animating them. No events, triggers or anything like that.

So I decided to do a pre-roll for the screen casts. Heres what I came up with:

If you want to do your own, its really easy.

  1. Using Expression Design, design the assets on the canvas. Make sure the canvas dimensions are the same as the resolution of the video (800 x 600, 1280 x 720, etc). This is important.
  2. Go to File->Export and chose “XAML WPF Canvas” as the format under Export Properties.
  3. In Blend, create a new WPF Application. Right click on the solution file and select “Link to Existing File”. Navigate to and select the file your exported earlier.
  4. Animate it by creating a new Storyboard. This will turn on recording.
  5. Save your file.

We now have our XAML canvas for our pre-roll. Now, using Expression Encoder, we can add this as a visual overlay to any video of our choice. However, we need video to overlay the XAML on to – as far as I know, you can’t add it any other way.

So go to Windows Live Movie Maker. Add credits to your new project. Delete the text. Choose a clip length – I chose 5 seconds. But This should be the same length as your Animation. Save your video. Make sure its the same resolution as your XAML Canvas.

  1. Go to Expression Encoder, Import the video from Windows Live Movie Maker.
  2. Got to Timeline->Add Visual Overlay. Navigate to the XAML file.
  3. Resize the overlay till it covers the entire screen.
  4. If you want to, add sound by going to Timeline->Add Audio Overlay.
  5. Hit encode.

It should be noted that you can only Import a XAML canvas as a visual overlay on Expression Encoder. And thats why we chose “XAML WPF Canvas” when we exported from Design.

If I have any upload quota left after this weeks Windows Azure Feedreader Screencast, I’ll add a short screencast demonstrating this.

Have fun.

Published by rbonini