Design with Silverlight

The ability to perform vertex animation on clipping paths opens up some interesting possibilities effects-wise. I spent some time playing around with animated clipping paths, and came up with an example project to illustrate a technique that mimics an EKG readout.

Start by creating a new project in Blend (December preview). Since an EKG is wide, but not very tall, set the canvas width to 800, and height to 285.

In the sample project, I changed the name of the canvas to "rootCanvas" because I use that as my standard naming convention.

Next, add a rectangle that is the same size as the root canvas, select No Fill on the brushes palette, and add a black 1px stroke to the rectangle. This creates a border for the root canvas.

At this point, my project looked like this:

<Canvas
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Width="800" Height="285"
 x:Name="rootCanvas">
 <Rectangle Width="800" Height="285" Stroke="#FF000000" x:Name="canvasStroke"/>
</Canvas>

For the EKG pattern, you can Google "EKG" and find a suitable image over which you will trace. Once you have one, bring it into Blend on it's own layer, and lock the layer to avoid inadvertantly moving it. Create a path object and trace over the EKG shape in the reference graphic. The path used in this example had no fill, and a 1.5px thick stroke that was colored #FF357414. Once you're done tracing, you can remove the reference image and use the direct select tool to tweak the points in your path if necessary. In the example project, the path is named "heartbeatPath". Your project should look something like this:

To add a clipping mask, add a new canvas to the project named "clip", and make it the same size as the root canvas. Add a rectangle object that is 800x10 to the clip canvas and position it at -10 left. This will position the rectangle just outside of the clipping canvas. The intention here is to make a very small, off-canvas clipping region that will clip the EKG path object once it is animated.

To create the clipping area, click the rectangle, and then while holding the Ctrl key, click the "clip" canvas object. With both selected, right-click the selection on the Objects and Timeline palette and select Path/Make Clipping Path. 

In order for the clipping region to affect the EKG path, the heartbeatPath object needs to be in the clipping canvas. This can be done by dragging and dropping the heartbeatPath object onto the clip object. Once this is done, the heartbeat will disappear because it is being clipped.

The next step is to create the animation to simulate the heartbeat. In Blend, select the New Storyboard button, then click OK on the Create Storyboard dialog that opens (the default values are fine).

The animation for the clipping region is a very simple, linear animation. In the timeline area, move the yellow current frame marker to 2. On the toolbar, click on the direct selection tool, and then click the "clip" object on the objects palette.

Select the leftmost two points on the rectangle, by first clicking the top one, and then Ctrl-clicking the bottom one. Both should be selected. Use either the right arrow key on the keyboard, or the Shift + right arrow combination to move the points to the right until they align with the right edge of the root canvas.

The animation is done, so close the storyboard.

This particular animation, should repeat, so edit the storyboard XAML by adding the "RepeatBehavior" property.

<Storyboard x:Name="Storyboard1"> becomes <Storyboard x:Name="Storyboard1" RepeatBehavior="Forever">

At this point, opening the project results in... nothing.

The storyboard doesn't automatically play when the page is opened. To do this, you can use triggers in the XAML, but I have become accustomed to doing it via JavaScript - if there are a lot of storyboards running, I find it easier to catch problems when I am controlling them from script. If your preference is to use triggers, that's fine too.

Open the default.html file in your favorite editor, and add the following code beneath the other JavaScript references:

 <script type="text/javascript" src="Silverlight.js" mce_src="Silverlight.js"></script>
 <script type="text/javascript" src="Default_html.js" mce_src="Default_html.js"></script>
 <script type="text/javascript" src="Page.xaml.js" mce_src="Page.xaml.js"></script>
 <script type="text/javascript" language="javascript">
 <!--//
  function canvasLoaded(sender) {
   sender.findName("Storyboard1").begin();
  }
 //-->
 </script>

Also, be sure to update the silverlightControlHost height and width style to match the dimensions of the root canvas.

This script locates the storyboard named "Storyboard1", and tells it to begin. The function is called "canvasLoaded", but it has not yet been linked to an event, meaning nothing will call the script and cause it to do its thing. That is the last thing you will need to do to the XAML file, so head back over to Blend and edit the rootCanvas XAML to include the "Loaded" event:

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

Opening the default.html file in a browser at this point should produce something similar to this.

From a high level, there's a lot of flexibility in this example. The path color can easily be changed by changing the color of the stroke. The path can have an image inserted behind it to act as a backdrop, or a fill color can be added to the rectangle to put some color behind the EKG pulse. With some simple modifications to the timeline, it's easy to access the keyframes by script, and by manipulating those values over time, cause the pulse to speed up.

Download the example.

This entry was posted on Thursday, February 7th, 2008 at 1:03 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.