Thursday, April 24, 2008

Controlling video with dragging

To control video with dragging might sound a bit strange and useless but keep on reading and you'll see the the possibilities this creates.

For a project I'm working on, I wanted to create a rotating 3D image which the user van control with his mouse using dragging.
This kind of displaying is often used for displaying objects like cars:
or purses?
or other products:

Getting started

First I created a UserControl and added 2 properties:

  1. "AutoPlay" which plays the video once when loaded

  2. "MovieSource" which contains the Uri of the videofile

  3. "StretchMovie" which contains the Uri of the videofile

To be on the safe side I created a public method "Release" to stop the dragmode. If by some reason the mouse stays in dragmode it can be stopped by calling the Release method:

Custom MouseCursor

For a better drag experience a "custom" mousecursor is added when hovering over the control and when dragging.

To achieve this, add an image ("_cursor" in the code snippet below) to the page which you can position when the mousemove event is triggered. With this.Cursor = Cursors.None you can make sure the default cursor is no longer visible.

Controlling the video

In the eventhandler of the mousemove event, first check if the user is dragging:

If so, set the movieposition to the correct value:

The call to the UpdateVideoPlayer method makes sure the movie gets rendered on the right frame:

Click here to view the demo

Click here to download the source

One issue I experience (could be my laptop) is that it's a shocky. It's not rotating fluently. In Mediaplayer Classic it works fine, so I think it's a rendering issue with SL2. If someone has any ideas about this, please let me know!

That's it for now. I'm leaving to Spain tomorrow for a two week holiday, so no more for at least two weeks! :)

Thursday, April 3, 2008

Panoramic view using texture mapping in Silverlight 2

My colleague Martijn Croezen created an awesome panoramic view with Silverlight 2 beta 1. Because he's a Flash developer with little .NET experience, I tried to help him out a bit with C# syntax and Silverlight objects, etc.

He used texture mapping to create the effect of a panoramic view using the inside of a cube to project the photo's on.
After trying to create this in Silverlight 1.1 alpha he found out there was a bug in the implementation of the matrix, so we were stuck.
With the release of Silverlight 2 beta 1 we decided to give it another go and the problem with the matrix seemed to be resolved.

One issue we still have is that Silverlight uses anti-aliasing which cannot be disabled. Therefore the edges of the images are "blurred" and the triangles used for the texture mapping are still visible (white lines).

Visit the weblog of Martijn Croezen for an in-depth description

View the demo here

Download the (non-optimized/version 1) sourcecode here

Tuesday, April 1, 2008

Motion Blur in Silverlight 2

Gilbok Lee posted an example of motion blur in Silverlight 2 on the Silverlight Forum ( which turned out to be an April Fools joke.

Very funny ;)... But thanks to one of the flash developers I work with (thanks Martijn Croezen) I was able to create a motion blur effect.
You can use the sliders for adjusting the amount of blur and the opacity.

Click here for the demo

Click here for the source