Shine Draw

Text Effect is a very common feature for many online application. Today, I am going to introduce you a simple, but also beautiful, text effect application. It’s time to decorate your application!

Comparison

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

• String to ASCII Code: charCodeAt [AS3] vs Convert.ToInt16 [C#]

Source codes

•   Simple Text Effect [Flash 9, AS3] (142.4 KiB, 3,251 hits)
•   Simple Text Effect [Silverlight 2, C#] (20.6 KiB, 4,911 hits)

Silverlight

String to ASCII Code: charCodeAt [AS3] vs Convert.ToInt16 [C#]

When you are working with text, you shouldn’t miss out the following following codes which convert a string value and ASCII code.

// AS3
var text:String = "Testing";

// Get the ASCII code for the character "T"
text.charCodeAt(0)

// Get the string value of the ASCII code 80
var char:String = String.fromCharCode(10);

In C#, you can achieve the same result by using the System.Convert Class.

// C#
String text = "Testing";

// Get the ASCII code for the character "T"
Convert.ToInt16(text.ToCharArray()[0]));

// Get the string value of the ASCII code 80
String char = Convert.ToChar(80).ToString();

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~

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.

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

This is one of the most stunning effect I experienced many years ago. The code is very simple, but yet astonishing. Both of the applications are made as identical as possible (even the function name, comments, position are identical) for the ease of comparison.

Comparison

Flash implementation: 2 hours
Silverlight Implementation: 1 hour
Blog Writing: 1.5 hours
Code Variation:

• Enter Frame Event [AS3] vs DispatcherTimer [C#]
• Math.random() [AS3] vs new Random(seed) [C#]

Source Codes:

•   3D Text Space [Flash 9, AS3] (33.8 KiB, 5,442 hits)
•   3D Text Space [Silverlight 2, C#] (19.5 KiB, 6,755 hits)

Flash

Silverlight

Enter Frame Event [AS3] vs DispatcherTimer [C#]

It’s pretty obvious that C# is a verbose language. You could achieve most of the command in AS3 using one line of code while it may take four in C#.

Most of the time, when you are going to create mathematical animation, you probably can’t miss out for this section. If you are experienced in using Flash, you will not be strange in using

// AS3
this.addEventListener(Event.ENTER_FRAME, on_enter_frame);

function on_enter_frame(e:Event):void{
   // do something here
}

To achieve the same functionalities in Silverlight, you can do in the following way

// C#
// in the namespace of System.Windows.Threading
DispatcherTimer _timer = new DispatcherTimer(); 

// fire the event for every 40ms, which is equivalent to 25fps in Flash
_timer.Interval = new TimeSpan(0, 0, 0, 0, 40);

// attach the event handler _timer_Tick
_timer.Tick +=new EventHandler(_timer_Tick);
_timer.Start(); 

Math.random() [AS3] vs new Random(seed) [C#]

To generate a random value in AS3, it’s pretty straight forward.

// AS3
// generate a random value n, where 0 <= n < 1.
var n:Number = Math.random(); 

However, in C#, the Random class may need a seed value (usually based on the DateTime) for increasing the randomness of the generated values. Unfortunately, many people may have encountered the problem that the generated value is not “random” in looping. In such case, you may need to use some tricky method in generating the seed value. Here is an example.

// C#
int seed = (int)DateTime.Now.Ticks;
while(true){
  Random r = new Random(seed);
  double n = r.NextDouble() ;
  // increase the randomness of the seed
  seed += (int)DateTime.Now.Ticks;
}