Shine Draw

Here is a Flash vs Silverlight comparison on the fantastic iPhone Dragging Effect.

it is a Text Dragger like the well-known dragging effect from iPhone or iPod touch. Simply drag the text up and down by holding down the mouse button.

Let’s enjoy it and leave comments!!

Comparison

Flash implementation: 35 minutes

Silverlight implementation: 1 hour 40 minutes (Implemented First)

Source codes

•   IPhoneScroll [Flash 9, AS3] (101.3 KiB, 2,778 hits)
•   IPhoneScroll [Silverlight 3, C#] (54.8 KiB, 3,702 hits)

Silverlight

This is another 3D text effect without using any 3d library. The texts will orbit around an object in a 3d manner. I have also applied a tricky technique in which the texts will actually move behind the object. It works with all kind of transparent object.

Just a minor notice. I have updated the license of all the sources codes. All samples source codes will under the GNU General Public License, Version 3. If you have any questions regarding to the license, please feel free to contact me. Thanks!

Comparison

Flash implementation: 1 hour (Implemented First)

Silverlight implementation: 50 minutes

Source codes

•   Orbiting Text [Flash 9, AS3] (128.9 KiB, 1,471 hits)
•   Orbiting Text [Silverlight 2, C#] (127.5 KiB, 1,739 hits)

Silverlight

It has been a long time that I didn’t implement text effect comparison. Text Rendering is a very interest topic when comparing Flash and Silverlight. It’s because they have different rendering system which result in a dramatic differences on performance and readability.

If you are going to make animations using text, I am sure Flash is much more better. Take a look on my previous sample “Text Tunnel“.

Nevertheless, I didn’t stress on performance for this entry. Instead, you could see how I handle Color Animation differently.

Comparison

Flash implementation: 1 hour 20 minutes (Implemented First)

Silverlight implementation: 1 hour

What’s the difference:

• Color Animation: Timeline method (Flash) vs ColorAnimation (Silverlight)

Source codes

•   Matrix Text Effect [Flash 9, AS3] (34.5 KiB, 1,622 hits)
•   Matrix Text Effect [Silverlight 2, C#] (14.1 KiB, 1,419 hits)

Silverlight

Color Animation: Timeline method (Flash)

Tween Class in AS3 is not able to modify the color of an object. Of course, you may still modify the color integer value directly. However, the value is calculated in a linear way and it will not be what you are looking for.

Let’s back into basic, we are still able to tween the color of an object using the timeline approach. I won’t go into too much details here since it’s a bit hard to describe. You may download the source code and study it on your own.

ColorAnimation and StoryBoard (Silverlight)

For Silverlight, we may tween the color of an UI object using the following code:

// C#
// create a text block
TextBlock textAnimation = new TextBlock();
textAnimation.Text = "Text";
textAnimation.Foreground = new SolidColorBrush(Colors.Black);
LayoutRoot.Children.Add(textAnimation);

// add a new story board to fade out the text color
Storyboard moveStoryboard = new Storyboard();

ColorAnimation colorAnimation = new ColorAnimation();
colorAnimation.To = Colors.White;
colorAnimation.Duration = new Duration(new TimeSpan(0, 0, 0, 0, FADE_DURATION));

Storyboard.SetTarget(colorAnimation, textAnimation);
Storyboard.SetTargetProperty(colorAnimation, new PropertyPath("(TextBlock.Foreground).(SolidColorBrush.Color)"));
moveStoryboard.Children.Add(colorAnimation);
moveStoryboard.Begin();

Today, I try to upgrade my first sample in this blog to Silverlight 2. Out of my expectation, the code work perfectly and actually I can run the application directly after copy and paste the files.

Anyway, there are some interesting findings when updating the code. I will try to list them all during the upgrade.

Comparison

What’s the difference?

• DispatcherTimer vs CompositionTarget.Rendering

Source codes

•   3D Text Space [Silverlight 2, C#] (19.5 KiB, 5,126 hits)

Silverlight

DispatcherTimer vs CompositionTarget.Rendering

In Silverlight 2, it’s much simpler to simulate the  enter frame event by using CompositionTarget.Rednering. It enables you to modify the frame rate easily as well.

// C#
// New Method
Application.Current.Host.Settings.MaxFrameRate = fps;
CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);

void CompositionTarget_Rendering(object sender, EventArgs e)
{
	// do your stuff here
}

// Old Method
DispatcherTimer timer = new DispatcherTimer();
timer.Interval = new TimeSpan(0, 0, 0, 0, 1000/fps);
timer.Tick +=new EventHandler(_timer_Tick);
timer.Start();

void  timer_Tick(object sender, EventArgs e)
{
	// do your stuff here
}

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, 2,455 hits)
•   Spiral Text [Silverlight 2, C#] (20.9 KiB, 2,516 hits)

Silverlight