Shine Draw

3D Space is back! My first post 3D Text Space received a lot of comments and I decided to apply the logic on images. The effect is much more groovy than the original one!  No 3D Library is needed.

You may now vote for your favorite sample!

Vote for this sample

Comparison

Flash implementation: 1 hour  
Silverlight implementation: 40 minutes 
What’s the difference?

• Scaling: scaleX, scaleY [AS3] vs ScaleTransform [C#]

Source codes

•   3D Image Space [Flash 9, AS3] (407.5 KiB, 2,919 hits)
•   3D Image Space [Silverlight 2, C#] (952.6 KiB, 7,015 hits)

Scaling: scaleX, scaleY [AS3] vs ScaleTransform [C#]

Scaling in both AS3 and C# look similar. However, you can only scale up a object in AS3 from the perspective point (0, 0). That means, the object will only be extended to the bottom right corner. There are many workarounds for solving this, like putting the image in to a Sprite.

// AS3
// Scaling must be based on the perspective 0, 0
image.scaleX = scale;
image.scaleY = scale;

// Using different perspective
var sprite:Sprite = new Sprite();
image.x = -image.width/2;
image.y = -image.width/2;
sprite.addChild(image);
sprite.scaleX = scale;
sprite.scaleY = scale;

In Silverlight, you can scale up the image using different perspective easily. May be we can consider it’s a strength comparing with Flash.

// C#
// Scale up the image using different
ScaleTransform scaleTransform = new ScaleTransform();
scaleTransform.ScaleX = scale;
scaleTransform.ScaleY = scale;
scaleTransform.CenterX = image.Width/2;
scaleTransform.CenterY = image.Height/2;
image.RenderTransform = scaleTransform;

When it comes to Image Manipulation, Flash and Silverlight has much more advantages over Javascript and DHTML. In this example, when you click on the image, it will produce an amazing sponge effect. What’s more? Just to use your imagination!

It included both Flash and Silverlight version with complete source codes.

Comparison

Flash implementation: 45 minutes 
Silverlight implementation: 30 minutes 
Code variation in the source code:

• rotation [AS3] vs RotateTransform [C#]

Source codes

•   Sponge Image [Flash 9, AS3] (42.6 KiB, 759 hits)
•   Sponge Image [Silverlight 2, C#] (128.1 KiB, 877 hits)

rotation [AS3] vs RotateTransform [C#]

When rotating an object in AS3, it’s really straight forward.

// AS3
displayObject.rotation = 180; // the value can be set between 0 and 360

What about in C#? It will take 3 lines. Anyway, it can’t be considered as verbose. But when you look in to the case in XAML, you may find a hard time in modifing the XML manually (Especially for me since I am not yet an Silverlight Expert).

// C#
RotateTransform r = new RotateTransform();
r.Angle = 180;  // the value can be set between 0 and 360
DisplayObject.RenderTransform = r;

// Setting the angle in XAML
// 
//    
//        
//     
//