Aug 29

Flash and Silverlight: 3D Image Rotation

3D Illusion, Animation Effect 22 Comments »

This is not a very impressive effect since there are dozen of free source codes for making the image rotation. However, it’s good to have a brief comparison on the differences of AS3 and C#. The samples created below are all re-organized for the ease of configuration and testing.

Comparison

Flash implementation: 1 hour
Silverlight Implementation: 1 hour
Blog Writing: 1 hours
Code Variation:

  • Children Sorting: setChildrenIndex [AS3] vs ZIndex Property [C#]
  • Loading images from library [AS3] vs Loading images from folder [C#]

Source Codes

Flash

Silverlight

Get Microsoft Silverlight

Children Sorting: setChildrenIndex [AS3] vs ZIndex Property [C#]

Since AS3, children sorting is not as easy as just using swapDepths() [Due to the reason of speed enhancement]. It needs a little bit difficult approach for dealing this. Here is an example for sorting all the children in a specific container. 

// AS3
// sort all the children according to their y position
sortChildren(container, "y");

// Sort the objects according to the image width
private function sortChildren(container : DisplayObjectContainer, cirteria:String) : void {

	var numChildren:int = container.numChildren;
	//no need to sort (zero or one child)
	if( numChildren < 2 ) return ;

	//create an Array to sort children
	var children:Array = new Array( numChildren );
	var i:int = -1;
	while( ++i < numChildren )
	{
		children[ i ] = container.getChildAt( i );
	}

	//sort by children by the criteria
	children.sortOn( cirteria, Array.NUMERIC );

	var child : DisplayObject;
	i = -1;
	while( ++i < numChildren )
	{
		child = DisplayObject( children[ i ] );
		//only set new depth if necessary
		if( i != container.getChildIndex( child ) )
		{
			//set their new position
			container.setChildIndex( child, i );
		}

	}
}

However, in C#, it’s pretty straight forward now (Similar to the case in AS2).

// C#
// sort the children according to their y position
image.SetValue(Canvas.ZIndexProperty, (int) ((double) image.GetValue(Canvas.TopProperty)));

Loading images from library [AS3] vs Loading images from folder [C#]

In Flash 9, you can store all you images in FLA file and call them dynamically using AS3.

// AS3
// load the images from the FLA library
var imageClass : Class = ApplicationDomain.currentDomain.getDefinition("className") as Class;

// BitmapData needs 2 parameters, you may just set it to zero
// since it won't create any effect on it
var bitmapData : BitmapData = new imageClass(0,0);
var image : Bitmap = new Bitmap(bitmapData);
addChild(image);

While in C#, you may embed the image resources during compile time or load it dynamically from HTTP access. Just a reminder, if you want to get the width/height of the images, you have to get from the FrameworkElement property. (I have spent sometime searching this via the Internet)

// C#
// load the images from the Internet or from it's own resources
string url = "imageURL";
Image image = new Image();
image.Source = new BitmapImage(new Uri(url, UriKind.Relative));

// Get the image width after the image is successfully loaded
image.GetValue(FrameworkElement.ActualWidthProperty)