In this example I have used the InkPresenter to capture the mouse and produce vector paths. I also have a basic interface to change the colour and path size. I then use that captured data to duplicate the vector path upon 16 faces each rotating around a common point using the Projection properties.

The Projection properties in this example have been created inside Expression Blend using a storyboard activated by behaviors.

The InkPresenter control is this example has been created inside Expression Blend, but we need to do a bit of work in the code behind file to record the data and convert it into a visual path. You can read more about this process in this MSDN article.

Grab the Source

As always, you can grab the source files to this post here.

You can enhance the 3D effect further by pressing the ‘Spin‘ button, this simply plays a storyboard to spin each circle on an additional axis.

To create this effect I have used the Projection Transform Rotation properties and used Easing on the animations inside Expression Blend 3 to help the inertia look right.

Grab the Source

As usual you can download the source files for this example here.

The video also features a full screen view for the HD video.

The Smooth Streaming allows users to view the video at the highest quality possible based on their internet connection and CPU speed. If the users connection drops to a slower speed during the video, the Smooth Streaming seamlessly adapts to keep the video stream consistent and free of buffering.

The banner also features a Deepzoom component.

This part of the experience allows users to zoom in as close as to see the stubble on the characters face! The Deepzoom functionality lets you zoom into an image serving up only the part of the image you are looking at and thus not having to download megabytes of data.

This banner is running live on MSN right now, and is due to feature on the MSN home page this Saturday.

You can read more in the following posts:

Dean Gifford at Rocket Panda talks about a World first

Damon Serji talks about the first interactive Silverlight banner in the world

Metia official statement by Steve Ellis

Site features

• The site features a randomised layout so that every time you return the tile positioning should look different.
• The tiles make use of the new 3d projection properties in Silverlight 3.
• All the content is pulled through dynamically to allow updates to be made with ease.

Breakdown of effects

To create this effect I use the following transforms:

• Opacity at either end of the animation.
• Projection values to the X and Z axis to make each element loop to the foreground and background.
• Scale transform to enhance the size of each element at it’s nearest and furthest point.
• Easing on the above Scale transform to help the movement look more natural.
• Translate transform to move the elements from the left to right.

• I replaced the circle elements for images.
• I slowed down the storyboards using the SpeedRatio value, this allows you to speed up or slow down a storyboard without having to go through and reposition all the key frames.
• I added an additional projection transform to the Y axis to give the impression the spiral effect is along a curve.

Grab the source

As usual you can download the source files for both the above examples.

Silverlight spiral effect using 3d projection 1

Silverlight spiral effect using 3d projection 2

Break down of effects.

Each element (circle) has it’s own storyboard that uses the projection properties to spin it around in a 360 degree fashion on it’s X axis. By increasing the centre point value of the Z axis we get a larger radius.

On top of that each element is offset by 30 degrees on it’s Y axis, this allows all the elements to form an imaginary sphere. I have also set the storyboard durations to different lengths to allow a chaotic feel to the animation.

Finally I have performed a rotate animation on all of the elements. The was no code needed to create this example, everything was done inside Expression Blend 3.

Grab the source

As usual you can grab the source here:

Projection example 1

Projection example 2

Imagery from Adam Wignall at Digital Diversity.

A total of 52,882 unique visitors visiting a total of 71,978 times and viewing 132,850 pages.

Here’s to 2010 and lots more content to come, happy New Year!

The game is built using Silverlight 3 and features the following:

• Silverlight plug-in detection
• Custom pre-loader animation
• Options for mouse or keyboard controls in game
• Saves your top score using Isolated Storage
• Different AI and traits for each of the 4 bad guys
• Bonus points for collecting prizes faster
• Lots of cool effects like trailing footsteps and 3D score indicators

One way to optimize your Silverlight application is to check that it is not having to render objects that are not being used or seen. If a storyboard is animating an object then that object is redrawn each frame even if it is out of view or behind another object. By stopping these animations or collapsing them until we need them will help keep down the processor requirements.

By using the ‘EnableRedrawRegions‘ property we can see every part of the screen that is being redrawn each frame.

Below is an example of an animation and the ability to move an object on top to hide it.

The ‘how to’ bit

To turn on the EnableRedrawRegions property we need to add the following code in the HTML page hosting the Silverlight:

<param name=“enableRedrawRegions” value=“true” />

Add it after the ‘object‘ tag with the other default ‘param‘ tags created by Visual Studio.