Shine Draw

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!

Vote for this sample

Comparison

Flash implementation: 1 hour (Implemented First)

Silverlight implementation: 50 minutes

Source codes

•   Orbiting Text [Flash 9, AS3] (128.9 KiB, 675 hits)
•   Orbiting Text [Silverlight 2, C#] (127.5 KiB, 745 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.

Vote for this sample

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, 636 hits)
•   Matrix Text Effect [Silverlight 2, C#] (14.1 KiB, 596 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, 2,689 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.

Vote for this sample

Comparison

Flash implementation: 80 minutes(Implemented First)

Silverlight implementation: 50 minutes

Source codes

•   Spiral Text [Flash 9, AS3] (35.4 KiB, 1,357 hits)
•   Spiral Text [Silverlight 2, C#] (20.9 KiB, 1,352 hits)

Silverlight

This is the first application request by reader (submitted by Slyi). He saw a very interesting text effect implemented by JavaScript and he would like to migrate this to the Silverlight. I think this sample can be easily adopted by Silverlight.net since I greatly promoted their Product. ^_^

There will be no post tomorrow. It’s because I will spend my time too arrange all of my samples and make a show case gallery.

Vote for this sample

Comparison

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

• flash.text.TextField [AS3] vs System.Windows.Controls.TextBlock [C#]

Source codes

•   Waving Text [Flash 9, AS3] (135.7 KiB, 893 hits)
•   Waving Text [Silverlight 2, C#] (17.8 KiB, 990 hits)

Silverlight

flash.text.TextField [AS3] vs System.Windows.Controls.TextBlock[C#]

Creating a text field in AS3 looks similar to that of C#. However, the TextFormat class makes styling of AS3 text easily. Besides, the text field in Flash supports HTML Text as well. (If I am not wrong, Silverlight doesn’t have any support for HTML Text.)

// AS3
// create text format
var format : TextFormat = new TextFormat();
format.size = FONT_SIZE;
format.font = FONT_FAMILY;
format.color = 0x0000FF;

// create the text block
var textField : TextField = new TextField();
textField.text =  "text";
textField.setTextFormat(format);
textField.selectable = false;
addChild(textField);

// get the actual width and height
var actualWidth:Number = textField.textWidth;
var actualHeight:Number = textField.textHeight;

The source file size of Flash is larger than Silverlight. It’s because I have embed the font in the FLA. You can see that even no font is embed in Silverlight, it still handles the text quite well. Hence, my vote is for Silverlight this time.

Moreover, Slyi found that animating the text will consume a lot of resources. What do you think ?

Note:
Performance Tip: Animating the size of text can potentially use a lot of system resources. This is because when Silverlight renders text, it uses hinting to smooth each text glyph. If you animate the text size (by using a Transform or FontSize), Silverlight will hint the glyphs for each frame, which is costly and could cause frame dropping. If your application requires dynamic scale changes of large text, it may be better to use vector graphics to represent the text.
http://msdn.microsoft.com/en-us/library/cc189010(VS.95).aspx

// C#
// create the text block
TextBlock textBlock = new TextBlock();
textBlock.Text = "text";
textBlock.FontSize = FONT_SIZE;
textBlock.FontFamily = new FontFamily(FONT_FAMILY);
textBlock.Foreground = new SolidColorBrush(Colors.Blue);
textBlock.TextAlignment = TextAlignment.Center;
LayoutRoot.Children.Add(textBlock);

// get the actual width and height
double actualWidth = textBlock.ActualWidth;
double actualHeight = textBlock.ActualHeight;