Sep 07
A simple water drop effect on an image. It demonstrated how to use masking/clipping in Silvelight and Flash.
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, 17,417 hits)
- Water Effect [Silverlight 2, C#] (447.6 KiB, 3,787 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;
}
Shares and Enjoy~
Did you like this post?
Subscribe here:
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
July 30th, 2009 at 8:19 pm
very impressive. looks real and truly captivating.
regards,
kb
October 1st, 2009 at 8:53 am
[...] Life is definitely not easy and we face different challenges every day. Try to be positive and avoid looking back. Whatever happened is happened. Learn from your mistakes and look forward. You will then find your life much happier and healthier. About the Author: If you are curious about this article, you may find some inspiration on 3d flash as well as flash water. [...]
October 2nd, 2009 at 2:44 pm
[...] Author: If you are curious about this article, you may find some inspiration on 3d flash as well as flash water. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, [...]
October 7th, 2009 at 11:14 am
[...] Flash does help in many situations, but it is of importance to know its limitation when you want to utilize it to build your websites or when you are selecting a web developer. About the Author: If you wanna get more information on this Application, you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. [...]
October 9th, 2009 at 4:38 pm
[...] It is undeniable that Flash is useful in some aspects. However there are different kinds of restrictions of utilizing this technology, when you need to build websites or select a developer for your site. About the Author: If you wanna get more information on this Application, you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. [...]
October 9th, 2009 at 5:45 pm
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. :Adobe Flash, computer, Silverlight, Silverlight 3, technology, web 2.0, Web building, web [...]
October 10th, 2009 at 3:57 am
[...] The utility of Flash technology is undeniable. However, to make the right choice when developing and creating websites, one must pay close attention to the constraints present. About the Author: If you wanna get more information on this Application, you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. [...]
October 10th, 2009 at 6:36 am
[...] It cannot be denied that life is difficult and we have to overcome many hurdles everyday. However, you can live a happier life by having an optimistic mind and avoiding bad things in your life. About the Author: If you are curious about this article, you may find some inspiration on 3d flash as well as flash water. [...]
October 11th, 2009 at 11:00 am
[...] Author: If you are curious about this article, you may find some inspiration on 3d flash as well as flash water. Share and [...]
October 11th, 2009 at 11:48 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. Share and [...]
October 12th, 2009 at 6:02 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. Link to this page Link to this page Copy the code below to your web site. [...]
October 12th, 2009 at 6:03 am
[...] It is undeniable that Flash is useful in some aspects. However there are different kinds of restrictions of utilizing this technology, when you need to build websites or select a developer for your site. About the Author: If you wanna get more information on this Application, you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. [...]
October 14th, 2009 at 3:41 am
[...] Author: If you are curious about this article, you may find some inspiration on 3d flash as well as flash water. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, [...]
October 14th, 2009 at 11:56 am
[...] Flash does help in many situations, but it is of importance to know its limitation when you want to utilize it to build your websites or when you are selecting a web developer. About the Author: If you wanna get more information on this Application, you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. [...]
October 14th, 2009 at 4:54 pm
[...] It cannot be denied that life is difficult and we have to overcome many hurdles everyday. However, you can live a happier life by having an optimistic mind and avoiding bad things in your life. About the Author: If you are curious about this article, you may find some inspiration on 3d flash as well as flash water. [...]
October 15th, 2009 at 4:11 pm
[...] If you wanna get more information on this Application, you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. [...]
October 16th, 2009 at 6:07 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. No Comments Read [...]
October 16th, 2009 at 6:20 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. Read More Post a [...]
October 16th, 2009 at 6:50 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. Read [...]
October 16th, 2009 at 2:18 pm
[...] If you wanna get more information on this Application, you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. [...]
October 17th, 2009 at 6:59 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. 0 Comments | Posted by : David Lam Read [...]
October 17th, 2009 at 7:01 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. Leave a [...]
October 17th, 2009 at 7:07 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. (0) Comments Read [...]
October 18th, 2009 at 6:19 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. var $j = jQuery.noConflict(); $j(function() { $j(”#get-article-code”).css({opacity: 0}).hide(); [...]
October 18th, 2009 at 6:20 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. Read [...]
October 18th, 2009 at 6:23 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. Read More Post a [...]
October 20th, 2009 at 9:23 am
[...] sense some-more by upon vacation a website upon flash 3d as good as a online village dedicated to flash water. Share and [...]
October 22nd, 2009 at 8:55 am
[...] If you wanna get more information on this Application, you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. [...]
October 22nd, 2009 at 9:04 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, [...]
October 28th, 2009 at 2:19 pm
[...] If you are curious about this article, you may find some inspiration on e cards free as well as flash effects. [...]
October 29th, 2009 at 5:15 pm
[...] If you are curious about this article, you may find some inspiration on e cards free as well as flash effects. [...]
October 30th, 2009 at 3:19 am
[...] you are curious about this article, you may find some inspiration on e cards free as well as flash effects. Share and [...]
October 30th, 2009 at 3:20 am
[...] you are curious about this article, you may find some inspiration on e cards free as well as flash effects. Share and [...]
October 30th, 2009 at 3:21 am
[...] If you are curious about this article, you may find some inspiration on e cards free as well as flash effects. [...]
October 31st, 2009 at 3:17 am
[...] you are curious about this article, you may find some inspiration on e cards free as well as flash effects. No items matching your keywords were found. Share and [...]
October 31st, 2009 at 3:30 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. October 16th, 2009 | Tags: Adobe Flash, Computer, Silverlight, Silverlight 3, Technology, [...]
October 31st, 2009 at 3:31 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. Related Articles:Microsoft Silverlight versus Adobe FlashWhat’s All The Fuzz About Flash [...]
November 2nd, 2009 at 9:43 pm
[...] If you are curious about this article, you may find some inspiration on e cards free as well as flash effects. [...]
November 3rd, 2009 at 7:54 am
[...] You can always write. For example, you can write a letter to your friends about something you are learning. You can also write an explanation of the problem you need to tackle. Writing is such a useful tool for better learning. So start writing now! About the Author: If you are curious about this article, you may find some inspiration on e cards free as well as flash effects. [...]
November 3rd, 2009 at 7:58 am
[...] If you are curious about this article, you may find some inspiration on e cards free as well as flash effects. [...]
November 5th, 2009 at 11:10 pm
[...] If you are curious about this article, you may find some inspiration on e cards free as well as flash effects. [...]
December 22nd, 2009 at 6:45 pm
super sexus b-)
December 23rd, 2009 at 8:48 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. Categories : Web Design Tags : Adobe Flash, computer, silverlight, Silverlight 3, technology, [...]
December 23rd, 2009 at 8:48 am
[...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. Categories : Web Design Tags : Adobe Flash, computer, silverlight, Silverlight 3, technology, [...]
January 19th, 2010 at 8:03 am
Is this water effect??? This is masking effect.
February 8th, 2010 at 1:52 am
[...] If you are curious about this article, you may find some inspiration on e cards free as well as flash effects. [...]
June 17th, 2010 at 7:22 am
I would like to say thanks for posting up this website. just got in to this will give me a kickstart.
July 19th, 2010 at 3:10 am
the image in Flash looks much crisper; and
again, as Flash is frame based, transitions in Silverlight always look smoother although it obviously will require more CPU power.
when I read someone says Flash has bitmap displacement filter, the new version of Silverlight supports pixel shader, you can make the water more realistic.