3D Spiral Image Rotation for MIX 09 Challenge

Feb 10

3D Spiral Image Rotation for MIX 09 Challenge

3D Illusion, Animation Effect, Image Manipulation Add comments

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!

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, 1,088 hits)
3D Spiral Image Rotation [Silverlight 2, C#] (66.6 KiB, 1,556 hits)

Flash

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
	}
}

Shares and Enjoy~

Did you like this post?

Subscribe here:

10 Responses to “3D Spiral Image Rotation for MIX 09 Challenge”

Eugen Says:
February 10th, 2009 at 6:04 am
For some reason the Silverlight version shows only an empty white rectangle, nothing hapens there.
Flash works ok.
slyi Says:
February 10th, 2009 at 7:14 am
Really nice effect, silverlight is also working for me
I think kit3d has a HitTest system http://www.markdawson.org/kit3d/demos/sl2/hittesting/ for adding links.
Przemek Says:
February 10th, 2009 at 3:49 pm
Flash version seem to be working at least twice faster than the Silverlight one. Is it because the engine is slower of because of some buil in coefficients in the program?
Timothy Says:
February 10th, 2009 at 10:36 pm
Why there is a wave/fisheye effect on the center of images during the rotation?

However, cool work guy, specially using Kit3D.
marco Says:
February 14th, 2009 at 4:18 am
mi interessa il tuo modo di lavoro con using Kit3D.ho trovato la componente aggiuntiva,ma non sono stato capace di eseguire il download delKit3D.Questa esperienza è soddisfacente per me.ringrazio per la collaborazione,Marco
borith Says:
February 17th, 2009 at 9:17 am
all your work are best and i am not good at designing, so could you do such the animation like this link: http://quince.infragistics.com. I like it very much.

thanks and regards,
3D Spiral Rotation | Silverlike - A Free Microsoft Silverlight 3 Directory Says:
December 7th, 2009 at 2:34 am
[...] 3D Sprial Rotation Sample using Kit3D. This is implemented using Silvelight 2. Hopefully, it can be easily using Perspective [...]
Richard Says:
December 8th, 2009 at 1:26 pm
I have played with the source code and got it working on localhost but when i copied the website to an IIS server the images don’t appear. I have changed the url prefix for the websites address but no joy
Kevin Says:
January 8th, 2010 at 5:53 am
Here is a interesting example:
http://demo.dotblogs.com.tw/limingstudio/SL3Demo/Y_Projection_RollCenter.html
Noe Bisaillon Says:
March 6th, 2010 at 11:13 pm
Hey, I came across this blog article while searching for help with fixing Microsoft Silverlight. I have recently changed internet browser from Safari to Microsoft IE 6. Just recently I seem to have a issue with loading websites that have Microsoft Silverlight. Every time I go on a page that needs Microsoft Silverlight, the site does not load and I get a “npctrl.dll” error. I cannot seem to find out how to fix it. Any help getting Microsoft Silverlight to function is greatly appreciated! Thanks

Shine Draw