Shine Draw

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, 892 hits)
•   Waving Text [Silverlight 2, C#] (17.8 KiB, 989 hits)

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;

Related Post

• Flash vs Silverlight: Orbiting Text around an object (7)
• Silverlight vs Flash: Matrix Text Effect (10)
• Silverlight 2 Upgrade: 3D Text Space (6)
• Flash vs Silverlight: Spiral Text (13)