Shine Draw

Today, I installed and uninstalled the Silverlight Tool many times. It was because I couldn’t open Silverlight Project after updating all the patches. The Visual Studio always show this message “The project type is not supported by this installation?”.  But finally, I found that I can actually use the Visual Web Developer 2008 to create Silverlight Application.

Does it mean that I can’t use Visual Studio anymore? I am not sure. Since I can continue my Silverlight development, I don’t care anymore.

By the way, the sample below is my first Silverlight 2 application. The logic is a little bit advanced, hope you will like it.

Lastly, I got a good news for all of you. I am going to update all the sample in my blog. Hopefully, all the samples should be ready be the end of this month.

Comparison

Flash implementation: 35 minutes
Silverlight implementation: 80 minutes (Implemented First)
What’s the difference?

• HSL to RGB [AS3] vs [C#]

Source codes

•   Color Picker [Flash 9, AS3] (11.1 KiB, 1,522 hits)
•   Color Picker [Silverlight 2, C#] (20.6 KiB, 2,896 hits)

Silverlight

HSL to RGB [AS3] vs [C#]

If you are going to implement drawing application, then you would probably need to handle HSL and RGB value. Below is a function that convert HSL to RGB. If you want to convert RGB to HSL, download and read the sample code above.

// AS3
// Convert HSL to RGB
public function hslToRgb(H : Number, S : Number, L : Number) : Array {
	var p1:Number;
	var p2 : Number;
	var rgb : Array = new Array(3);

	if (L<=0.5) p2 = L*(1+S);
	else p2 = L+S-(L*S);

	p1 = 2*L-p2;

	if (S == 0) {
		rgb[0] = L;
		rgb[1] = L;
		rgb[2] = L;
	} else {
		rgb[0] = toRgb(p1, p2, H+120);
		rgb[1] = toRgb(p1, p2, H);
		rgb[2] = toRgb(p1, p2, H-120);
	}
	rgb[0] *= 255;
	rgb[1] *= 255;
	rgb[2] *= 255;
	return rgb;
}

// Calculate the RGB Value
public function toRgb(q1 : Number, q2 : Number, hue : Number) : Number {
	if (hue>360) hue = hue-360;
	if (hue<0) hue = hue+360;
	if (hue<60) return (q1+(q2-q1)*hue/60);
	else if (hue<180) return (q2);
	else if (hue<240) return (q1+(q2-q1)*(240-hue)/60);

	return (q1);
}

Mathematical Syntax in C# is very similar to AS3. Most of the code can be reused by directly copy and paste.

// C#
// Convert HSL to RGB
private double [] hslToRgb(double H, double S, double L) {
	double [] rgb = new double [3];
	double p1 = 0;
	double p2 = 0;

	if (L<=0.5) p2 = L*(1+S);
	else p2 = L+S-(L*S);

	p1 = 2*L-p2;

	if (S == 0) {
		rgb[0] = L;
		rgb[1] = L;
		rgb[2] = L;
	} else {
		rgb[0] = toRgb(p1, p2, H+120);
		rgb[1] = toRgb(p1, p2, H);
		rgb[2] = toRgb(p1, p2, H - 120);
	}
	rgb[0] *= 255;
	rgb[1] *= 255;
	rgb[2] *= 255;
	return rgb;
}

// Calculate the RGB Value
private double toRgb(double q1, double q2, double hue) {
	if (hue>360) hue = hue-360;
	if (hue<0) hue = hue+360;
	if (hue<60) return (q1+(q2-q1)*hue/60);
	else if (hue<180) return (q2);
	else if (hue<240) return (q1+(q2-q1)*(240-hue)/60);

	return (q1);
}

Recursion is a very common technique for creating various type of graphics in Flash. Is the recursion technique also possible in Silverlight? Surely it can be. Let’s have a look on the sample below.

Comparison

Flash implementation: 30minutes

Silverlight implementation: 45minutes (Implemented First)

Source codes

•   Recursion Tree [Flash 9, AS3] (11.4 KiB, 1,648 hits)
•   Recursion Tree [Silverlight 2, C#] (18.9 KiB, 2,325 hits)

Silverlight

The application is implemented based on 3D Text Space. You will notice that the number of characters displayed in the Silverlight version is much less than that in Flash. It’s because Text Rendering in Silverlight is CPU intensive and too many TextBlock objects will make the application crash.

I think there are some other ways to increase the performance of using TextBlock in Silverlight. However, I didn’t have any idea yet. If you have have any suggestions, please feel free to share with me.

Comparison

Flash implementation: 80 minutes(Implemented First)

Silverlight implementation: 50 minutes

Source codes

•   Spiral Text [Flash 9, AS3] (35.4 KiB, 3,303 hits)
•   Spiral Text [Silverlight 2, C#] (20.9 KiB, 3,457 hits)

Silverlight

I think most of the people are concerned how well each technology can perform. Obviously, it’s a difficult question for the fact that “well” is quite subjective. Nevertheless, I still try to create some identical samples and let the user to decide which one is better.

In the sample below, I introduced a new control: FPS Meter, which will display the FPS (frame per second) of the application. To start with the stress test, just click on the application continually and compare their differences.

Comparison

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

• Stress Test Result [AS3] vs [C#]

Source codes

•   FPS Meter [Flash 9, AS3] (129.9 KiB, 7,445 hits)
•   FPS Meter [Silverlight 2, C#] (139.6 KiB, 7,036 hits)

Silverlight

Stress Test Result [AS3] vs [C#]

These are my findings when running the applications in my Intel Core 2 Quad CPU (Q6600) @ 2.4GHz Computer.

Flash:

• Initial FPS: 64
• FPS after 50 clicks: 32
• FPS after 100 clicks: 16
• CPU usage after 100 clicks: 45%

Silverlight

• Initial FPS: 62
• FPS after 50 clicks: 60
• FPS after 100 clicks: 36
• CPU usage after 100 clicks: 60%

It seems that Silverlight has a better performance in handling images.

I think your testing result will be different from mine. Feel free to share your findings as well~

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();