Hi Guys! I am back. Sorry for disappearing for more than a month. I am busy with one of my personal project Pencake Free Ecard. You may use the application I build using Flash to Create your own Ecard. Take a look, I believe you will be interested on that.
Anyway, today I will bring you a 3D Image Slideshow using the perspective 3d technology in both Flash and Silverlight. Implementing this effect in the past is not that easy. However, thanks for the advancement of the technology, you may now create it on the fly.
Images used inside the applications are all collected from Pencake Ecard Website.
Comparison
Flash implementation: 1 hour
Silverlight implementation: 40 minutes (Implemented First)
What’s the difference:
- DisplayObject.z vs PlaneProjection.LocalOffsetZ / GlobalOffsetZ
Source codes
SlideShowPerspective3D [Flash 10, AS3] (432.8 KiB, 1,449 hits)
- SlideShowPerspective3D [Silverlight 3 Beta, C#] (401.2 KiB, 2,467 hits)
Flash
Silverlight
Flash: DisplayObject.z vs
In Flash, you may use the z property to modify the Z position of an object. However, setting the z property doesn’t mean that the objects will be sorted by the z value. The display order of the UI objects are still governed by the item added order. This is a big issue since you will have no idea which object should be on top after applying rotationX, rotationY or rotationZ.
You will find that I have done some simple hacking in my code to solve out the z-index problem.
Actually, I don’t fully understand the mechanism of perspective 3D in Flash. May be there are some solutions that could help us to solve out the sorting problem.
Silverlight: PlaneProjection.LocalOffsetZ / GlobalOffsetZ
Silverlight seems to have a more powerful perspective 3D capability. Firstly, items applied with perspective 3D will be sorted automatically. We don’t really have to do any calculations. Sorting is done perfectly even we have applied RotationX, RotationY or RotationZ properties.
Secondly, Silverlight provides two properties LocalOffsetZ and GlobalOffsetZ for us to set the z position of an object. This is very useful since it allows us to rotate an object with respect to another origin defined by the GlobalOffsetZ, GlobalOffsetX and GlobalOffsetY. Unlike Flash, it can only rotate with respect to a fixed origin. But of course, we could still solve this problem in Flash by some nested children method.
// C#
// create a new projection
PlaneProjection planeProjection = new PlaneProjection();
// create a new image
Image image = new Image();
image1.Source = new BitmapImage(new Uri("image_path.jpg", UriKind.Relative));
image1.Projection = planeProjection;
// rotate 90 degree with respect to the center of an image
planeProjection.RotationY = 90;
// rotate 90 degree with respect to the origin which has z value of 100 behind the image
planeProjection.RotationY = 90;
planeProjection.GlobalOffsetZ = -100;
planeProjection.LocalOffsetZ = 100;
May 13th, 2009 at 6:22 am
Silverlight going better and better. I love Microsoft beacose of this tecnology. But HATE beacose of Outlook! :)))
May 13th, 2009 at 3:27 pm
Let see. Silver Light version aren’t backward compatible. If you develop a SV application and new version get released. You need to create a new application in new version
May 13th, 2009 at 9:29 pm
Silverlight is backward compatible. But you cannot play newer application in old Silverlight players (and neither can Flash).
May 14th, 2009 at 5:08 am
[...] Flash vs Silverlight: Image Slide Show using Perspective 3D (Suggested by Silverlight News) [...]
May 14th, 2009 at 5:53 am
Actually you can run a SL3 compiled app in SL2. It will work until it hits something not implemented in SL2. Not that it’s advisable, but just in case you needed to know.
May 14th, 2009 at 11:38 am
@Wahab
Silverlight has a VERY high bar for backwards compatibility between versions. Silverlight 3 RTW will run all the same apps Silverlight 2 RTW would run. Not sure where you got your information about backwards compatibility, but it is incorrect.
May 15th, 2009 at 4:06 am
@Pete
He is a Flasher maybee. And it’s a malignant envy :)
May 20th, 2009 at 6:12 pm
[...] Prespectiva 3D entre Silverlight e Flash - não querendo alimentar comparativos, um exemplo de comparação directa entre as duas tecnologias. [...]
May 31st, 2009 at 2:29 pm
Hi, you are really great at what you are doing—programming. However, I really wished the site could be be more relevant, Come on, do you think people with flash player even download Silverligt just to compare? Of course not. In reality people won’t install something that does the same thing. People vote for Silverlight or Flash because of vested interests. Not because one is better. So the primary purpose of this site is practically useless. Such a talent wasted.
Besides, when Flash releases its new version , it would top Silverlight and when Silvelight launches a new version, it would probably be better than FLASH. So some of the comparisons would be obsolete eventually.Besides who cares about subtle differences? Why not make this site a tutorial site—with FL and SL sections–explain every line. Then this site would be more useful and would have a purpose.
June 4th, 2009 at 2:52 pm
[...] origin. But of course, we could still solve this problem in Flash by some nested children method. view plaincopy to [...]
August 11th, 2009 at 12:18 am
[...] Original Post [...]
August 30th, 2009 at 8:28 am
Silverlight going better and better. I agree. Brilliant Microsoft technology but i really mad of IE brows.
Thanks Gusy for that article.
August 30th, 2009 at 1:06 pm
Hi guys.I have receive ur email. Thanks. what u did here is a good well tutorial for me and those who
as a web designer.
August 30th, 2009 at 10:39 pm
hasfa, thanks for your appreciation. I hope you can find good resources in this site.
September 8th, 2009 at 7:15 am
Hi. I’am a little new with this stuff and i wan’t to know how i can change the photos on the player…
September 8th, 2009 at 1:54 pm
Thanks for the email. actually..I also heard that flash is not suitable for googlebot and make the web going slow appear. Is it true?
September 17th, 2009 at 2:10 pm
This is pretty cool!. Thanks for sharing.
Can the images be hyperlinked in silverlight? Also, can the slideshow time be set? to increase or decrease?
September 27th, 2009 at 2:56 am
[...] Terence Tsang is proud to present you a 3D Image Slideshow using perspective 3d. You are able to add more images into the controls. [...]
February 7th, 2010 at 5:02 am
I am loving yout dating adventures.
February 17th, 2010 at 1:16 am
Nice! Awesome!
March 13th, 2010 at 11:31 am
This is a real good resource that you’re providing and you also give it away free of charge. I like to see sites that recognize the value of offering a outstanding resource for free. I really loved reading through your article. Cheers!
March 14th, 2010 at 3:11 am
Flash click > CPU % 2 or %1
Silverlight Click > CPU &16 or %23
hehheee :)