Flash vs Silverlight: Grid Transition Rotator Flash vs Silverlight: 3D Image Space
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

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:  

68 Responses to “Flash vs Silverlight: Water Effect”

  1. Water Effect by Flash | FlexMan Says:

    [...] http://www.shinedraw.com/animation-effect/flash-vs-silverlight-water-effect/ [...]

  2. Silverlight Travel » Blog Archiv » Flash und Silverlight Says:

    [...] http://www.shinedraw.com findet man ein recht interessanten [...]

  3. Ricardo Says:

    Thanks for the article. The links to the source code aren’t working.

  4. admin Says:

    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.

  5. Ross Says:

    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.

  6. admin Says:

    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.

  7. Silverlight vs Flash: Kaleidoscope Says:

    [...] my previous article Water Effect, we have discussed how to clip the object easily using Ellipse or Rectangle. However, if you want [...]

  8. infocyde Says:

    Look almost exactly the same, with maybe the Flash image being slightly crisper.

  9. Pete Says:

    @infocyde funny, I actually thought the flash version was more pixelated :)

  10. Vinney Says:

    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.

  11. Joseph Says:

    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)

  12. From Flash to Silverlight… - Rudi Grobler Says:

    [...] Flash vs Silverlight- Water Effect [...]

  13. Lubbykko Says:

    Good site! Interesting information.. )

  14. solo sexo Says:

    Here is much work done, obviously. Good site

  15. birdwing Says:

    The circle jitters in silverlight its not as smooth as flash.

  16. James Friedman Says:

    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.

  17. erik Says:

    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!

  18. erik Says:

    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.

  19. Silverlight user Says:

    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.

  20. best online classifieds Says:

    Very impressive indeed.
    Good job. Please keep the good stuff coming.
    We love it.

    Warm regards,
    Alexander and colleagues

  21. rfid malaysia Says:

    very impressive. looks real and truly captivating.

    regards,
    kb

  22. You Can Never Be Sad! Says:

    [...] 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. [...]

  23. You Can Never Be Sad! | I want to be entrepreneur Says:

    [...] 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, [...]

  24. Why Stop Flash Using? | Social & Affiliate Marketing Says:

    [...] 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. [...]

  25. Why Stop Flash Using? | CANADABOOM or BUST? Says:

    [...] 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. [...]

  26. Why Stop Flash Using? - The Creative Design Blog Says:

    [...] 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 [...]

  27. Electronic Jargon Says:

    [...] 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. [...]

  28. Ways To Live A Happier Life Says:

    [...] 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. [...]

  29. Ways To Live A Happier Life | All Blogging Says:

    [...] Author: If you are curious about this article, you may find some inspiration on 3d flash as well as flash water. Share and [...]

  30. 7 Drawbacks of Flash | Russian Design Blog Says:

    [...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. Share and [...]

  31. Stop Using Flash From Now On! | Ojith Technology Blog Says:

    [...] 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. [...]

  32. Why Stop Flash Using? | renegade-hosting.com Says:

    [...] 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. [...]

  33. Ways To Live A Happier Life | I want to be entrepreneur Says:

    [...] 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, [...]

  34. Why Stop Flash Using? | My Webdesign Tips Says:

    [...] 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. [...]

  35. Ways To Live A Happier Life | Interviewhelper Articles Says:

    [...] 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. [...]

  36. DevDream Webmaster and Developer Articles » Blog Archive » Stop Using Flash From Now On! Says:

    [...] 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. [...]

  37. Make Money Online » Blog Archive » 7 Drawbacks of Flash Says:

    [...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. No Comments Read [...]

  38. Enthusiastic Myspace Blog » Blog Archive » Stop Using Flash From Now On! Says:

    [...] 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 [...]

  39. Bright Myspace Blog » Blog Archive » 7 Drawbacks of Flash Says:

    [...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. Read [...]

  40. Why Stop Flash Using? » The Digital Infoholic Says:

    [...] 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. [...]

  41. Disturbed Myspace Template » Blog Archive » Why Stop Flash Using? Says:

    [...] 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 [...]

  42. 7 Drawbacks of Flash | veryweblog focus on the internet ,new media. Says:

    [...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. Leave a [...]

  43. Disgusted Myspace Info » Blog Archive » 7 Drawbacks of Flash Says:

    [...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. (0) Comments Read [...]

  44. Stop Using Flash From Now On! Says:

    [...] 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(); [...]

  45. Hissing Myspace Blog » Blog Archive » 7 Drawbacks of Flash Says:

    [...] you can learn more by visiting the website on flash 3d as well as the online community dedicated to flash water. Read [...]

  46. Greasy Myspace Themes » Blog Archive » Why Stop Flash Using? Says:

    [...] 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 [...]

  47. Why Stop Flash Using? | devhideout.com Says:

    [...] sense some-more by upon vacation a website upon flash 3d as good as a online village dedicated to flash water. Share and [...]

  48. Why Stop Flash Using? Says:

    [...] 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. [...]

  49. Megamarketonline.com. Informative blog. Internet marketing. Says:

    [...] 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, [...]

  50. Writing Makes You Think Better | Dipdir Articles Directory Says:

    [...] If you are curious about this article, you may find some inspiration on e cards free as well as flash effects. [...]

  51. Write And Understand Along The Way | Kayak Fishing Stuff Says:

    [...] If you are curious about this article, you may find some inspiration on e cards free as well as flash effects. [...]

  52. Write And Understand Along The Way Says:

    [...] you are curious about this article, you may find some inspiration on e cards free as well as flash effects. Share and [...]

  53. Writing For Better Understanding - Forex Trading Systems Says:

    [...] you are curious about this article, you may find some inspiration on e cards free as well as flash effects. Share and [...]

  54. twitter Articles » Writing For Better Understanding Says:

    [...] If you are curious about this article, you may find some inspiration on e cards free as well as flash effects. [...]

  55. Writing For Better Understanding | Crafty Addicts Says:

    [...] 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 [...]

  56. Stop Using Flash From Now On! « LOOK INTO FUTURE Says:

    [...] 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, [...]

  57. Stop Using Flash From Now On! | Topics Database - Free Articles Says:

    [...] 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 [...]

  58. Writing For Better Understanding | Recent Addition Says:

    [...] If you are curious about this article, you may find some inspiration on e cards free as well as flash effects. [...]

  59. Writing Makes You Think Better | GetMyAuthor.com Says:

    [...] 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. [...]

  60. Write And Understand Along The Way | Brite Star Satellite Tv Says:

    [...] If you are curious about this article, you may find some inspiration on e cards free as well as flash effects. [...]

  61. Writing Makes You Think Better | Child Safety Advice Says:

    [...] If you are curious about this article, you may find some inspiration on e cards free as well as flash effects. [...]

  62. free internet marketing tips Says:

    super sexus b-)

  63. 7 Drawbacks of Flash Says:

    [...] 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, [...]

  64. 7 Drawbacks of Flash Says:

    [...] 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, [...]

  65. Ajay Says:

    Is this water effect??? This is masking effect.

  66. Article blog Write And Understand Along The Way « Article blog Says:

    [...] If you are curious about this article, you may find some inspiration on e cards free as well as flash effects. [...]

  67. downlad free full games Says:

    I would like to say thanks for posting up this website. just got in to this will give me a kickstart.

  68. Tim Says:

    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.

Leave a Reply