The team blog of the Expression Blend and Design
Due to popular demand we have added the clip path editing/animating feature to Blend 2. Clip path editing works for both WPF and Silverlight 1.0 projects. You can download the December Preview to test out the new features! In this post, I will go through some of the interesting things you can do with this feature!
What is a Clipping Path? A clipping path is a path or shape that is applied to another object, hiding the portions of the masked object that fall outside of the clipping path. For example, the following image shows you a separate individual image and text object on the left, but thanks to clipping paths, on the right you have just the image object with everything outside of the Seattle text hidden:
Using a Path Object to Apply a Clipping Path Let's take a quick look at how to use clipping paths in Blend:
The left image below shows the path overlaid on our image, and on the right, you see the image visible through the region created by our path:
Editing a Clipping Path You just saw how to apply a clipping path, so let's next look at how you would edit a clipping path. In Blend 2 you now have all path editing capabilities used to edit regular paths applicable to editing clipping paths as well.
The following image shows you how manipulating the path preserves the overall masking efffect that we expect:
Releasing a Clipping Path You saw how to create a clipping path, and you also saw how to edit a clipping path. Let's look at how to actually release a clipping path. It's pretty straightforward:
Note: In Blend 1 you only had the option of removing the clipping path, and that would remove the original clipping object from the artboard. This behavior has been improved in Blend 2 by allowing you to release the clipping path without removing the clipping object!
Animating a Clipping Path In Blend 2, along with being able to edit clipping paths you can also use the full animation capabilities used to animate regular paths to animate clipping paths as well. You can also take advantage of the structure changes supported by vertex animation.
Let's look at that in greater detail:
As seen in the following image, you can apply vertex animations to clipping paths. This can be used to easily create interactivity such as the “spotlight effect”:
Interop with Design You currently have the ability to import files into Blend created with Expression Design with clipping paths or copy/pasting objects with clipping paths applied from Design->Blend.
In Blend 2 we also support editing/animating of these clipping paths. Below is an example of me creating a clipping path in Expression Design:
To import an object with a clipping path from Expression Design to Blend 2 you can simply copy the element from Design and paste it into a Blend project. Below is an example of an image object from Design pasted into a Blend 2 Silverlight 1.0 project.
Conclusion As you can see you can create a variety of visual and interactive effects by creating, editing, and animating clipping paths in Blend 2. Give the features a try and let us know if you have any feedback!
Happy Blending! Janete Perez
Due to popular demand we have added the clip path editing/animating feature to Blend 2. Clip path editing
Tim Sneath discusses the Update capability just released for SL 1.0, Shawn Wildermuth gives us a *very
I am totally new to Expression Design and Expression Blend - I would like to quickly learn two things.
What's the Resource Panel for in Expression Blend? How to use it effectively?
I am more comfortable using Expression Design because the tools are more familiar and user friendly than Expression Blend. What I would like to achieve is designing vector graphics in Expression Design and then using them in Blend - sort of like a library of images. How do I achieve this?
I hope you can help me or if you have written about this already - point me the URLs.
I would like to know if it is possible to animate the image behind the Clipping Path, many times one just need to move it while the mask stay there.
The current workflow is to move the image a known amount then compensate for that by moving the path back to its original position.
how can we give blurred effect in silverlight2project in blend
hi can I do this programatically in Visual Studio
Really interesting blog, keep up the good work!
Simple trick, but you have described better.
Nice Sharing. It will help people in easy understanding about Clipping Path
This is not working for Universal Apps.