Design with Silverlight

Hi Dave. =)

Expanding a bit upon my previous entry on animated clipping paths, here is an example that may have a more practical application - using an animated clipping path to create glowing edge effects. Mind you, it's not the prettiest example in the world, but it illustrates my point.

For this project, I used two images. One is the outline of the state of Oregon, and the second is the same outline with a different color and a 10px outer glow filter applied in Photoshop (it's a little hard to see the glow on the second image here on a white background).

As you might expect, the base layer is brought into Blend as an image object, as is the glow layer. Both were set to the same dimensions (590x481), and the same position so that they overlay. I then created a canvas object the same size as the images named "clip".

For the glow effect, I want it to go from the bottom left of the image to the top right, so I added a rectangle that was 10px wide, rotated it around 45 degrees or so, and made sure it was tall enough to span the entire outline of Oregon at the widest point. With the rectangle positioned at the lower left of my outline image and selected on the Objects palette, I Ctrl+clicked the "clip" canvas, right-clicked, and selected Path/Make Clipping Path.

The result is shown in the image below. The glow layer is placed inside the clipping canvas, and will look like it has disappeared since it falls outside of the clipping area.

Like the prior example, animation on the clipping path is used to finish the effect. I created a new timeline called "glow", moved the timeline marker to 2, then used the direct selection tool to pick all four control points that make up the rectangle. I then used the arrow keys (+ Shift) to move the rectangle to the top right of the outline.

The last thing to do for this example was to play the timeline, so I added an event handler to the root canvas:

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="600"
x:Name="rootCanvas" Background="#FF9B9B9B"
Loaded="canvasLoaded">

And then added the following function to one of the JavaScript files in the project:

function canvasLoaded(sender){
sender.findName("glow").Begin();
}

You can view the example project, or download a zip.

This entry was posted on Monday, February 11th, 2008 at 7:53 pm and is filed under Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.