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
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;
XMLImageGallery [Flash 9, AS3] (346 KiB, 1,887 hits) 