Shine Draw

After working for one whole day, I have created another 4 image rotators. We have all together 6 image rotators now!

There are namely :

• Expand Rotator
• Explode Rotator
• Flip Rotator
• Random Moving Rotator
• Spin Rotator
• Transition Rotator

All image rotators are redesigned such that they can be reused easily using XAML. The XAML coding will look like something below:

<shinedraw:SpinRotator x:Name=”Rotator” NumberColumn=”5″ NumberRow=”5″ Width=”550″ Height=”400″ Pause=”4″  >
    <Image Source=”./images/image1.jpg”/>
    <Image Source=”./images/image2.jpg”/>
    <Image Source=”./images/image3.jpg”/>
</shinedraw:SpinRotator>

I will try to release the assembly in these few days. Be patient~

You may now view all the samples via my Silverlight Control Explorer. (Please note that you need Silverlight 3 beta plugin to run the Explorer.)

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.

Vote for this sample

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, 605 hits)
•   SlideShowPerspective3D [Silverlight 3 Beta, C#] (401.2 KiB, 751 hits)

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;

Silverlight 3 Beta was officially launched in MIX09 last week. It has a lot of amazing features such as Perspective 3D, Deep Linking, Out of Browser, etc.. I am amazed how fast Silverlight can evolve within half year. Therefore, I will try to focus on discussing the Silverlight 3 features in the coming days.

Besides, I have installed Flash 10 in my computer. I believe I can continue to create a lot of good samples by using these latest RIA technology.

Nevertheless, the first comparison on Flash 10 and Silverlight 3 Beta is on the capabilities of 3D rendering. There are all together 4 comparisons:

1. Perspective 3D on an image with drop shadow effect.
2. Perspective 3D on various kind of controls.
3. Perspective 3D on video.
4. Perspective 3D stress test by rendering 100 images at the same time.
   (Beware, may be it will crash your browser.)

Please remind to upgrade your Silverlight plugin in order to view the sample below. Read this article Silverlight 3 Beta install experience for users if you have any difficulties.

Comparison

Source codes

•   Perspective 3D [Flash 10, AS3] (2.8 MiB, 1,118 hits)
•   Perspective 3D [Silverlight 3 Beta, C#] (2.7 MiB, 1,424 hits)

Silverlight

I found that there isn’t too much 3d globe resources. Therefore, I am here to release a new one.

Again, this is a comparison between Papever Vision 3D and Kit 3D. This post is actually a minor modification of my previous article Image Rotating Cube. I suppose the Flash and Silverlight versions will look like more or less the same as in the last one. However, out of my expectation, Kit3D engine seems not generating a textured mapped sphere very well.

As you can see in Silverlight version, I applied a very low segment value to the globe in order to boost the running speed. And you can see the globe is not spinning very smoothly.

The performance problem may be caused by the mesh generating algorithm. If anyone has a better solution to make the globe rotates smoothly, please feel free to share with me.

For you reference, the image map used inside the sample is downloaded from MacDaddy-World.

Vote for this sample

Comparison

Flash implementation: 30 minutes (Implemented First)

Silverlight implementation: 30 minutes

Source codes

•   Spinning Globe [Flash 9, AS3] (3.7 MiB, 1,763 hits)
•   Spinning Globe [Silverlight 2, C#] (3.3 MiB, 1,257 hits)

Silverlight

I didn’t create any entry for Mix 09 Challenge, the main reason is that I was officially invited to be the judge of MIX 09 Challenge.

Acting as judge is not easily. There are all together 105 entries and most of them are creative and interesting. It’s really a headache for me to pick up the winner.

Anyway, today I have created a 3D spiral image rotation application for all of you to navigate the entries easily. For the Flash version, you may click on the image and you will be redirected to the Entry Detail Page. This is not working for Silverlight since I have no idea how to add mouse interaction on the Kit3D Object.

Enjoy it and vote your favorite entry now!

Vote for this sample

Comparison

Flash implementation: 1 hour (Implemented First)
Silverlight implementation: 2 hours
What’s the difference?

• Loading Image [AS3] vs [C#]

Source codes

•   3D Spiral Image Rotation [Flash 9, AS3] (183.2 KiB, 576 hits)
•   3D Spiral Image Rotation [Silverlight 2, C#] (66.6 KiB, 660 hits)

Silverlight

Loading Image [AS3] vs [C#]

Loading image in Flash is simple and easy. Below is an example.

// AS3

var request : URLRequest = new URLRequest( imageURL);
var imageLoader : Loader = new Loader();
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_complete);
imageLoader.load(request);

private function on_complete(e : Event):void{
	// File downloaded successfully
	var loader : LoaderInfo = e.target as LoaderInfo;

	// convert it to bitmap
	var bitmapData : BitmapData = new BitmapData(loader.content.width, loader.content.height);
	bitmapData.draw(loader.content);
}

For Silverlight, please note that your Image must be added to the stage to trigger the download progress. Let’s see how we can achieve this.

// C#

BitmapImage bitmapImage = new BitmapImage(new Uri(imagePath, UriKind.Absolute));
bitmapImage.DownloadProgress += new EventHandler(image_DownloadProgress);
Image image = new Image(){ Source = bitmapImage } ;

// don’t forget to add the Image Control to the stage
LayoutRoot.Children.Add(image);

void image_DownloadProgress(object sender, DownloadProgressEventArgs e)
{
	if (e.Progress == 100)
	{
		// File downloaded successfully
	}
}