Creating XAML overlays for Microsoft Expression Encoder
A XAML overlay is a vector-based graphic that is rendered into the users video like a lower third, a logo bug, etc... XAML is Extensible Application Markup Language and is a declarative XML-based language created by Microsoft which is used to initialize structured values and objects. Below are examples of XAML overlays.
The goal of the this walk through is to allow you to be able to understand how to get your XAML design from Expression Design into Expression Encoder.
To create a XAML overlay start by creating your graphic in Microsoft Expression Design or importing a design into Microsoft Expression Design.
After finishing your design you need to make the XAML overlay you created digestible by Microsoft Expression Blend (if you want to animate it) by completing the following steps using Microsoft Expression Design.
Select All
File>Export
Export as XAML WPF Canvas(Take note of where you save this file)
Silverlight XAML is not supported
At this point you can use the XAML overlay as a static graphic overlay in Microsoft Expression Encoder.
If you wish to animate the overlay follow these instructions.
Open Microsoft Expression Blend
Create a new project a WPF Application (.exe)
In the project panel right click on csproj file and Link to Existing Item…
Navigate to the XAML file you created in Microsoft Expression Design and Double click on the XAML file in the project tab
This will open up the XAML file that you created in Microsoft Expression Design and open it in Microsoft Expression Blend.
At this point you should be able to animate the XAML.
Add a new storyboard then add your animation key frames to create your animation.
Then navigate to the file menu and select save and your animated XAML overlay is ready for Microsoft Expression Encoder.
In Microsoft Expression Encoder add overlay and navigate to original Microsoft Expression Design XAML file from design and add this file as an overlay. After adding the overlay you can customize length visible, fade in, and fade out. On the video window you can scale the graphic and place it in the desired position. Since it is vector-based, the quality of text and graphical elements will be maintained.
