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
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;
September 12th, 2008 at 4:19 pm
it seems that the fl is faster then sl, am I wrong?
September 12th, 2008 at 9:18 pm
This is wonderful and great perfermance even better perf than the orginal JS http://www.dhteumeuleu.com/run/txtSIN/
September 12th, 2008 at 9:46 pm
in feb this year i started this http://www.wscoop.com and it was posted about…
But I need your help….
I need links to web design and development, site , articles links…… anything you think of….
Please are you able to help me make this into a great resource for developers and designers.
September 12th, 2008 at 10:48 pm
unruledboy, yes, Flash one is faster. The one in Flash is using EnterFrame Event while the one in Silverlight is DispatcherTimer. Althgout I don’t understand why now, I think it’s related to the implementation method.
I think I will try to use Timer to compare with DispacherTimer later.
Paul, no problem, I will try to submit that.
September 13th, 2008 at 1:32 am
You should probably always set the frame rate in SL animation apps.
September 13th, 2008 at 11:19 pm
Slyi, I think the original JS version is a bit different from the AS version. I translated the AS version back to the equivalent JS. The performance is about the same.
http://killustar.blogspot.com/2008/09/shinedraw-in-javascript-waving-text.html
September 14th, 2008 at 2:05 am
Shane, thanks for the sample.
May be can make some stress tests and test over their performance.
September 18th, 2008 at 1:49 am
[...] Silverlight vs Flash: Waving Text [...]
November 5th, 2008 at 2:25 am
Hello admin, nice site you have!,
December 21st, 2008 at 10:48 pm
Silverlight is rendering the actual TTF/OTF fonts in real-time, rather than simply some arbitrary vector shapes that happen to resemble fonts as Flash does.