Sep 07
A simple water drop effect on an image. It demonstrated how to use masking/clipping in Silvelight and Flash.
Vote for this sample
Flash is Better! (461 votes)
Silverlight is Better? (401 votes)
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,328 hits)
- Water Effect [Silverlight 2, C#] (447.6 KiB, 1,982 hits)
Flash
Silverlight
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;
}
September 7th, 2008 at 7:53 pm
[...] http://www.shinedraw.com/animation-effect/flash-vs-silverlight-water-effect/ [...]
September 7th, 2008 at 8:09 pm
[...] http://www.shinedraw.com findet man ein recht interessanten [...]
September 8th, 2008 at 2:04 am
Thanks for the article. The links to the source code aren’t working.
September 8th, 2008 at 3:23 am
Ricardo, sorry for that, I just migrated the server and the download path was not set properly. I have fixed the problem and you may download it again. Thanks.
September 8th, 2008 at 9:01 am
You specified the time it took to developed and code repository sizes for both run times. Can you explain how come Flash took 30 mins longer when the code size is half the size of Silverlight? Or just give some thoughts on why there are differences.
September 8th, 2008 at 11:40 am
HI Ross, Thanks for your question.
Actually I started to implement Flash and then copy the logic to Silverlight. That’s why the time used on the Silverlight is lesser. I think I will specific which technology I started first to give reader a better idea the effort behind.
September 15th, 2008 at 10:00 pm
[...] my previous article Water Effect, we have discussed how to clip the object easily using Ellipse or Rectangle. However, if you want [...]
September 17th, 2008 at 3:18 am
Look almost exactly the same, with maybe the Flash image being slightly crisper.
September 18th, 2008 at 4:34 am
@infocyde funny, I actually thought the flash version was more pixelated :)
September 18th, 2008 at 7:11 am
The biggest difference I can see is sort of goo animation effect of the mask. If you notice, the SL trails are more fluid and react quicker and clearer. In order for the flash animation to achieve this level of seamless transitions, you’d just about have to double the frame rate. Sure you could speed the animation up, but look how clean the SL is. Until your cursor is flying across the image, you don’t see multiple circles, it looks like one metamorphicing, organic shape.
September 30th, 2008 at 3:27 pm
Maybe it’s the red border causing the greens to stand out more but the Flash image looks more crisp to me too. (Look up color theory and the War Craft 3 christmas ork effect for possible reasons why.)
Otherwise the effects appear the same visually though there does seem to be a difference in how their movement was implemented. (Note however that I am using Flash 10)
October 15th, 2008 at 2:38 pm
[...] Flash vs Silverlight- Water Effect [...]
October 27th, 2008 at 2:27 pm
Good site! Interesting information.. )
November 15th, 2008 at 6:30 pm
Here is much work done, obviously. Good site
November 19th, 2008 at 9:51 am
The circle jitters in silverlight its not as smooth as flash.
November 22nd, 2008 at 3:04 am
I assume people are thinking silverlight is better because of the quality of the image underneath the effect. In Flash, image smoothing is turned off on Bitmaps by default to save quality, you just have to set the bitmaps smoothing property to true or if you are drawing bitmapdata, pass in true as an argument for smoothing.
February 12th, 2009 at 5:51 pm
the flash demo is terrible.
I don’t have silver light installed and can only imagine it is no better from the remarks, has anyone here ever heard of the bitmapdisplacement “filter” in flash. It has the potential to look like real water, with ripples, and refracted light if you really get complex, try a search on google. I would offer a link, but it’s been around for a long time so I’m positive you can find it. Blows these out of the water!
February 12th, 2009 at 5:54 pm
haha, I even had a demo of it open by accident, your welcome:
http://www.flash-filter.net/rain-drop-water-effect.phtml
I even think the link is a poor example, some one couldn’t restrain themselves with the effect, I hate it when people over use flashy effects, it makes out community look like a bunch of noobs.
April 18th, 2009 at 8:29 pm
Wee, here we go again with the 24 fps and the “i can’t even see the SL example but I still think flash is better” crap.
Learn to compare please.
June 17th, 2009 at 5:04 pm
Very impressive indeed.
Good job. Please keep the good stuff coming.
We love it.
Warm regards,
Alexander and colleagues