Shine Draw

By just adding a little more on the Carousel, you can create a brand new Crousel effect. Today, I am presenting you the advanced Carousel Effect which support various layers with additional Drill Down and Drill Up effects.

You can also experience how did I simulate the frame based animation by StoryBoard. A pretty good reference for you to learn Silverlight.

Comparison

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

• Tween [AS3] vs Storyboard [C#]

Source codes

•   Image Advance Carousel [Flash 9, AS3] (235.5 KiB, 3,322 hits)
•   Image Advance Carousel [Silverlight 2, C#] (298.5 KiB, 6,132 hits)

Silverlight

Tween [AS3] vs Storyboard [C#]

In AS3, the Class fl.transitions.Tween is very similar to StoryBoard in C#. Below is a simple demonstration which fade out an object in 3 seconds.

// AS3
import fl.transitions.*;
import fl.transitions.easing.*;

var storyBoard:Tween = new Tween(displayObject,  "alpha", None.easeOut, 1, 0, 3, true);
storyBoard.addEventListener(TweenEvent.MOTION_FINISH, on_motion_finish);

function on_motion_finish(e:TweenEvent):void{
	trace("finish");
}

What about in C#? let’s see how can we create Storyboard purely by code. Please be careful when using Storyboard.SetTargetProperty, you have to use “(LayoutRoot.Opactiy)” as the argument, don’t miss out the blankets!

There has been many chances on the Storyboard since Silverlight 1. You will find a lot of “wrong” information from the Internet which can not work properly in beta 2.

// C#
Storyboard storyboard = new Storyboard();
DoubleAnimation doubleAnimatoin = new DoubleAnimation();
doubleAnimatoin.From = 1;
doubleAnimatoin.To = 0;
doubleAnimatoin.Duration = new Duration(new TimeSpan(0, 0, 3));
Storyboard.SetTarget(doubleAnimatoin, displayObject);
Storyboard.SetTargetProperty(doubleAnimatoin, new PropertyPath("(LayoutRoot.Opacity)"));

storyboard.Children.Add(doubleAnimatoin);
storyboard.Begin();

I have organized all my previous samples and grouped into the Gallery.

You may now access the Gallery via the Tab above or though the link below:

Flash vs Silverlight Gallery

Enjoy it~

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!

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, 5,426 hits)
•   3D Image Space [Silverlight 2, C#] (952.6 KiB, 11,664 hits)

Silverlight

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;

Here is another 3D application without using any 3D Library. You may navigate the application via a mouse click or mouse wheel. A spring effect is also applied. Let’s see how brilliant it is!

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

My Recent Updates

Today, I was asked to convert an application, written by me in Silverlight Beta 1,  to Silverlight Beta 2. I am so amazed that the project created in Beta 1 can’t be opened in Visual Studio (with the latest Silverlight Beta 2 Tool).

OK, that’s fine. I try to create a new project and copy and paste the files one by one. However, things didn’t go smoothly. Most of the Controls I created before can’t be reused again due to some syntax problem, double/int problem and some Initialization problems. Actually, I really want to say some swear words to Silverlight at that time. (Just imagine that you can’t open a Flash 8 FLA by Flash 9.)

But may be I can think in another way. Because Silverlight is such a lovely Software, it makes me the only one that can master it a little bit better than my colleague. HaHa.

If you have the same experience as me, please feel free to  share with me. (Or even tell me if is there any effective way to convert Beta 1 to Beta 2.)

Comparison

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

• Mouse Wheel Event: MouseEvent.MOUSE_WHEEL[AS3] vs Native Method [C#]
• Image Rendering

Source codes

•   3D Image Navigation [Flash 9, AS3] (184.4 KiB, 3,248 hits)
•   3D Image Navigation [Silverlight 2, C#] (448.8 KiB, 3,565 hits)

Silverlight

Mouse Wheel Event: MouseEvent.MOUSE_WHEEL[AS3] vs Native Method [C#]

Actually, there is nothing special to attach a mouse wheel event in AS3.

// AS3
stage.addEventListener(MouseEvent.MOUSE_WHEEL, on_mouse_wheel);

However, you will be amazed that Silverlight doesn’t support Mouse Wheel Event. Well, we can bear in mind that Silverlight is keep improving. Anyway, after referring to the article http://silverlight.net/blogs/msnow/archive/2008/07/29/tip-of-the-day-23-how-to-capture-the-mouse-wheel-event.aspx. I found a work around in solving this problem.

It’s very simple (but not too beautiful), just too ask the browser to capture the mouse event and handle it in our code. Since different browsers may return different parameters, you have to check everything carefully. Well, don’t think too much, just copy and paste will be ok.

// C#
HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheel);
HtmlPage.Window.AttachEvent("onmousewheel", OnMouseWheel);
HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheel);

private void OnMouseWheel(object sender, HtmlEventArgs args){
    double mouseDelta = 0;
    ScriptObject e = args.EventObject;
    // Mozilla and Safari
    if (e.GetProperty("detail") != null)
    {
        mouseDelta = ((double)e.GetProperty("detail"));
    }
    // IE and Opera
    else if (e.GetProperty("wheelDelta") != null)
        mouseDelta = ((double)e.GetProperty("wheelDelta"));   

    mouseDelta = Math.Sign(mouseDelta);
}

Image Rendering

The images used in the example below are resize 2 times to it’s original scale. It’s very clear that Silverlight performs better than Flash in resizing images.

In previous article, it was discussed that there is an "Allow Smoothing" in Flash 9 than can help to produce a better rendering. However, this function cannot be applied to dynamically loaded image, which is quite useless since most of the time we need to load images from Internet.

Note: Thanks for  Sasha Dzeletovic’s suggestion. Actually there is a "smoothing" property for bitmap image which can enhance the smoothness for the dynamically loaded image. (Original Post: Enable Smoothing on Images for scaling in Flex 2)

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

•   3D Image Rotation [Flash 9, AS3] (112.5 KiB, 7,433 hits)
•   3D Image Rotation [Silverlight 2, C#] (249.3 KiB, 25,313 hits)

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)