Shine Draw

A simple water drop effect on an image. It demonstrated how to use masking/clipping in Silvelight and Flash.

Vote for this sample

Comparison

Flash implementation: 1 hour 30 minutes 
Silverlight implementation: 1 hour 
What’s the difference?

• Masking: mask [AS3] vs EllipseGeometry + Clip [C#]

Source codes

•   Water Effect [Flash 9, AS3] (204.6 KiB, 2,333 hits)
•   Water Effect [Silverlight 2, C#] (447.6 KiB, 1,985 hits)

Masking: mask [AS3] vs EllipseGeometry + Clip [C#]

This time I am going to show how to use an Ellipse/Circle to mask an image. It also demonstrates how to move the mask.

Remarks: Since the masking approach is different in Flash and Silverlight, the effect produced in the samples above doesn’t look exactly the same.

// AS3
// create the mask
var imageMask : Shape = new Shape();
imageMask.graphics.beginFill(0x000000);
imageMask.graphics.drawCircle(0, 0, radius);

// position the mask to the center of the image
imageMask.x = image.width / 2;
image.Mask.y = image.height / 2;

// mask the image
image.mask = imageMask;

addChild(image);
addChild(imageMask); // you must add the mask into the stage, too

// move the mask
var mask:DisplayObject = image.mask;
if(mask){
	mask.x = newX;
	mask.y = newY;
}

In C#, it’s more less the same. However, if you want to reposition the mask, the approach is slightly different.

// C#
// create the mask
// You may use RectangleGeometry as well
EllipseGeometry ellipseGeometry = new EllipseGeometry();
ellipseGeometry.Center = new Point(0 , 0);
ellipseGeometry.RadiusX = radius;
ellipseGeometry.RadiusY = radius;

// mask the image
image.Clip = ellipseGeometry;
LayoutRoot.Children.Add(image);

// move the mask
EllipseGeometry ellipseGeometry = (EllipseGeometry)image.Clip;
if(ellipsGemoetry != null){
	Point center = ellipseGeometry.Center;
	center.X = newX;
	center.Y = newY;
}