Category Archives: Silverlight

Silverlight中遮罩及其动画制作(Clip Path)

Silverlight里的遮罩动画不是很好做的,这篇文章有介绍如何制作遮罩及动画,不过还是比不上Flash里的好用,而且个人认为还是有很大的距离呢。

原文网址:http://blogs.msdn.com/b/expression/archive/2008/01/21/clip-path-editing-and-animating-in-blend-2.aspx

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:

seattle

Using a Path Object to Apply a Clipping Path
Let’s take a quick look at how to use clipping paths in Blend:

  1. With the selection tool select the path or shape that you want to turn into a clipping path, hold CTRL, and then select the object that you want to clip. (Make sure that the clipping path object is in front of (in Z order) the object that you intend to clip.)
  2. On the Object menu, point to Path, and click Make Clipping Path. You can also right click on the two selected objects and select Make Clipping Path under the Path options.

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:

clipPathImage

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.

  1. Select the object with the clipping path applied. In this case you select the Image object.
  2. Select the direct selection tool. Note that the clipping path is displayed as the purple outline. The clipping path consists of points and segments just like a regular path.
  3. Click and drag a segment on the clipping path to edit as you would a path object. You will be able to edit the clipping path by using the same artboard gestures and keyboard shortcuts associated with path editing.

The following image shows you how manipulating the path preserves the overall masking efffect that we expect:

editingClippingPath

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:

  1. Select the object that is being clipped.
  2. On the Object menu, point to Path, and then click Release Clipping Path.

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:

  1. Select the object with the clipping path applied. In this case you select the Image object.
  2. Add a storyboard in the Objects and Timeline panel.
  3. Select the direct selection tool. Note that you can single click any point or segment to select or you can double click the clipping path to select all of the points and segments to move them all at once.
  4. You can then use the vertex animation features to create interactive animations with the clipping path.

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”:

animatingClippingPath

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:

texas

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.

blend2DecPreview_CP

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

Silverlight看上去是斗不过Flash的

前一阵子的一个Silverlight项目让我感觉到Silverlight明显的不如Flash,在网页富媒体上,以现在的Silverlight,是没办法斗过Flash的,至少在富媒体广告方面是这样的。

Silverlight中的字体处理实在是没法跟Flash比的,只要随便嵌入字体都会让文件变大很多,在广告对文件大小要求很严格的情况下,这是无法容忍的。

Silverlight的XAP文件本质上是一个ZIP压缩文件,并没有作特别的文件格式优化,这点比Flash可差多了,Flash的文件对于导入的图片等资源都可以优化,Silverlight确只是简单地嵌入。

在动画方面Silverlight也明显是落后于Flash的,甚至作一个遮罩都没有Flash那么方便。

动态语言有时似乎更合适作这方面的工作,而C#似乎有点古板了(虽然C#4里已经加入了动态类型,但是我还没有用过呢)。

如今HTML5似乎也很火的样子,看来Silverlight在网页富媒体上的前途不容乐观啊,虽然很多做.net的程序员蛮喜欢它的,但是市场决定一切,最终用户从来都不管什么技术的。