Adding an XAML Overlay
The ability to use a static icon or a video for an overlay is already pretty exciting, but let's see now how to add XAML to the picture—literally! Note that in addition to being used as an overlay, a XAML file like we create here can also be added as a leader or a trailer for a video. This is great to create animated titles or credits, for example. Follow the steps:
1. Start Expression Blend.
2. Select File, New Project from the menu.
3. Select the first option: WPF Application (.exe). We are not really going to create a WPF application here, but we will use Blend to create a XAML animation that we can import into Expression Encoder.
4. Set the location where this (temporary) application must be saved, give it a name and click OK.
5. Add an image to the Grid named LayoutRoot. Remember you can simply drag and drop an image file from Windows Explorer. Typically, you can add your company's logo, for example.
6. Make sure that the Image is selected in the Objects and Timeline category.
7. Set the following properties:
► HorizontalAlignment and VerticalAlignment: Center
► Stretch: Uniform
244 CHAPTER 13 Progressing with Videos
8. Select the Window in the Objects and Timeline category, and reset its Height and Width to Auto. Of course you can also add other XAML elements if you want, such as texts, shapes, etc...
9. Add a storyboard and name it LogoStoryboard.
10. Using what you learned in previous chapters, create an animation with your logo. Use ScaleTransform, RotateTransform, or any other animation.
11. Save all your files. Then, right-click on the Solution and select Edit in Visual Studio.
12. In Studio, select the menu File, New, File and add a new text file to the project.
13. Copy the whole XAML markup from Windowl.xaml to the next text file you just added.
14. Save the text file under the name Animation.xaml. Make sure that the file is saved in the same folder as all the other project files, including the picture you're displaying in your animation.
15. Remove from the markup the properties x:Class, x:Name, and Title.
16. Everywhere in the markup, replace the word Window with Grid. Expression Encoder cannot use a Window as the top-level element. By replacing with a Grid, we allow Encoder to load the XAML markup. Then save all your files.
17. Change to Expression Encoder and create a new job. Import a video.
18. In the Overlay category of the Enhance panel, follow the same procedure as before to add an overlay, but instead of choosing a video overlay, select the XAML file we saved (and edited) before (Animation.xaml).
19. All other parameters can be set just like the video overlay's parameters. The animation runs like a video. You can set it to loop, to fade in and out, and you can specify for how long it should run. In the end, you have an XAML overlay as shown in Figure 13.1.
- In Studio, you can search and replace using Edit, Find and Replace, Quick Replace (Ctrl+H) from the menu.
FIGURE 13.1 Video with XAML overlay. The orange bar indicates the duration of the overlay.
FIGURE 13.1 Video with XAML overlay. The orange bar indicates the duration of the overlay.
WARNING
Unfortunately, at the time of writing, Expression Encoder ignores the value of the AutoReverse attribute for a Storyboard. If you want your animation to reverse to the original state, you must do it manually in Expression Blend. v_/
Letting Your Users Choose the Player 245
Average user rating: 5 stars out of 1 votes
Post a comment