jump to navigation

Quick WPF/Silverlight tips to make great videos of your apps 8/2/11

 

Hello there!

Have you ever developed a great WPF or Silverlight app with lots of smooth animations, but when you tried to capture it in video (using software like Camtasia and Expression Encoder) the animations are jumpy and slow?  Have you tried to zoom in to some part of your app only to see that your beautiful UI gets pixelated?

Well this tip is for you! In this post I’ll give some tips from my experience recording the video for Skedle, our newest WPF app. Take a look at the Skedle video below:

YouTube Preview Image

You can see that the animations are smooth and the resolution is crisp, even when the video zooms in the application. Also, did you know that the opening “Skedle” animation was actually captured directly from the WPF app?

So let’s jump on to the tips!

1. Slow down animations and then speed up the video

No matter what PC you have and how optimized your app is, you’ll almost never be able to capture animations with the same smoothness and fluidity as the real app. To overcome that, the solution is to slow down all your animations by a factor of 10 or 20 (using the SpeedRatio property), and then speed up the video accordingly in those specific parts.

“But”, you might say, “does that mean I’ll have to change the SpeedRatio of each Storyboard?”. The answer: No for WPF, unfortunately yes for Silverlight! WPF allows you to override properties like SpeedRatio by using Dependency Object metadata overrides (unavailable on Silverlight as of v4 and WP7). Here’s an example  that slows down all the animations by a factor of 10 (you can use it on your App.xaml, for instance):

static App() {
    Timeline.SpeedRatioProperty.OverrideMetadata(typeof(Storyboard),
               new FrameworkPropertyMetadata { DefaultValue = 0.1 });
}

Of course, this tip won’t work if you specifically set the SpeedRatio of any of your animations.

One last point: don’t use this to cheat or lie about the fluidity of your app! If your app is slow and you make it look smooth, users will notice that the first time they try it, and it won’t look good for you.

2. Use Viewbox or RenderTransform to zoom in without losing quality

The next thing you’ll want to do is to record your screencast in a huge resolution in order to enable crisp zoom-in effects on your video. The easiest way to achieve that is to wrap your main layout panel on your window or page in a Viewbox (available on WPF and Silverlight 4)  and set its Width and Height to a fixed size, or simply use a ScaleTransform as your panel’s RenderTransform to scale everything up to a fixed factor.

For example, if your app looks good on a 800×600px window but you have a 1920×1200px monitor, you can record your video at double size (1600×1200px), which will allow for zoom effects in a hi-res (720p) video. In WPF or Silverlight, this could look like the following:

<Window>
    <!-- ... -->
    <Grid>
        <Grid.RenderTransform>
            <ScaleTransform ScaleX="2" ScaleY="2" />
        </Grid.RenderTransform>

        <!-- old content goes here, with fixed size -->
        <Grid Width="800" Height="600" x:Name="LayoutRoot">
            <!--more stuff-->
        </Grid>

    </Grid>
</Window>

This tip won’t work if you have images on your UI, but you would lose resolution on those anyway when zooming. At least you’re getting the best of the vector-based parts of your interface.

When recording videos for WP7 apps this tip doesn’t apply too well because you’re constrained by the size of the emulator. My recommendation is to record on the maximum size of the emulator (click the magnifier icon, select 100%), which will give you a 800×480px screen – usually more than enough for YouTube videos.

Bonus tip: If you use this to zoom in, try setting the Windows cursors to “Windows Aero (extra large)”, which will give you a mouse pointer that is proportional to your huge interface!

You can also use this tip to record title screens and other animations for your video (for example, the Skedle title animation was zoomed in by a factor of 5). In fact, by combining the two tips, you could create the video entirely in Expression Blend!

So that’s all for today. If you create a cool video using these tips, please post it as a comment!

See you next time!
Roberto

This post is also available on .

Categories: .net, Dicas, Silverlight, WPF, Windows Phone  

Comments»

1. Roberto Sonnino - 9/2/11

New blog post: Quick WPF/SL tips to make great videos of your apps – http://bit.ly/wpfslvid

2. Roberto Sonnino - 9/2/11

@Pete_Brown Here's the blog post with the WPF video tips! http://bit.ly/wpfslvid

3. Michael Crump - 9/2/11

RT @robertos_br: New blog post: Quick WPF/SL tips to make great videos of your apps – http://bit.ly/wpfslvid

4. Pete Brown - 9/2/11

Cool post with tips on recording WPF and Silverlight apps using screen cap programs. http://bit.ly/egFQRO (must read)

5. Jordy Alexandro - 9/2/11

Cool post with tips on recording WPF and Silverlight apps using screen cap programs. http://bit.ly/egFQRO (must read)

6. Roberto Sonnino - 9/2/11

If you missed it: Quick WPF/SL tips to make great videos of your apps – http://bit.ly/wpfslvid

7. Silverlight News - 10/2/11

Quick WPF/Silverlight tips to make great videos of your apps – http://slnews.me/gqCTux

8. Quick WPF/Silverlight tips to make great videos of your apps | www.nalli.net - 10/2/11

[...] Virtual Dreams Have you ever developed a great WPF or Silverlight app with lots of smooth animations, but when you [...]

9. Binary Red WP7 Mobile Development - 13/5/11

do you have a code sample of this?

many thanks

10. Fort lauderdale plumbers eemax sp3512 Water heater - 22/8/14

Fort lauderdale plumbers eemax sp3512 Water heater…

Virtual Dreams » Search Results » blend…

11. http://www.biofeed.pl/buy/Ciprolon.php - 11/9/14

Very nice post. I simply stumbled upon your blog and wished to say
that I have really enjoyed surfing around your blog posts.
In any case I’ll be subscribing in your feed and I’m hoping you write again very soon!