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, 789 hits)
- 3D Text Space [Silverlight 2, C#] (19.5 KiB, 945 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;
}
August 28th, 2008 at 6:49 am
I don’t think C# is any more verbose than AS3. Though SL 2 Beta 2 does not have WPF’s CompositionTarget.Rendering event, but is planed for the final.
So instead of creating a DispatcherTimer, you simply do this:
CompositionTarget.Rendering += OnFrameEnter;
August 28th, 2008 at 7:32 am
[...] http://www.shinedraw.com/text-effect/flash-and-silverlight-3d-text-space/ [...]
August 28th, 2008 at 1:46 pm
Yup, I try to use the Rendering Event in WPF before and it’s much simplier. However, the event is not very stable (the event is not firing stabily if the mouse if keep moving).
Anyway, I am looking forward to the new Event as well.
August 28th, 2008 at 2:06 pm
짹의 생각…
3D Texture 플래시와 실버라잇 버전 비교. 웃긴건 실버라잇 2.0 설치 했지만 사파리에서는 안된다는 거. 니들이 그렇지 뭐……
August 28th, 2008 at 6:54 pm
You could use IronPython, JScript or IronRuby for Silverlight and your code will be 1 linears as you said with Flash with AS. AS3 maybe is not for everyone, The great of Sivlerlight is I can use my language of choice, Javascript,Python, Ruby, C# so on.
August 28th, 2008 at 7:11 pm
cool.
August 28th, 2008 at 7:56 pm
The Flash version is cool.
Don’t know about the Silverlight example, as it doesn’t work in my wonderful Firefox browser. Hopefully, growing marketshare will make this kind of faux-pas a thing of the past one day…
See http://blogs.msdn.com/ronang/archive/2008/07/10/firefox-3-and-silverlight.aspx
August 28th, 2008 at 8:31 pm
Where’s JavaFX?
August 28th, 2008 at 9:32 pm
betadog, I’m running Firefox 3 and saw the Silverlight version just fine.
August 28th, 2008 at 9:47 pm
Your C# Random class has a bug. You’re adding the down-casted result of DateTime.Now.Ticks to an int that already has a previous value. By doing so, you will very quickly run into an overflow condition. True, the constructor for the Random class will automatically use the absolute value, but I do not think this was your intent.
Additionally, you are creating an instance of a new Random object each iteration of the while loop.
Lastly, there is absolutely no need to pass a seed to the Random() classes constructor if you’re already using a time-dependent default value. Just use the default constructor.
The Random class should be rewritten as follows:
Random r = new Random();
double n;
while(true)
{
n = r.NextDouble() ;
}
Much cleaner and more efficient than your original approach.
August 29th, 2008 at 1:31 am
thanks senfo suggestion. I didnt’ play the random quite well and actually it solved some problem that during a looping, the random class can’t really generate a random values in each iteraction. I will have more deeper analysis later on.
August 30th, 2008 at 10:09 pm
[...] Following is the Demo: The Original Text is: http://www.shinedraw.com/text-effect/flash-and-silverlight-3d-text-space/ [...]
August 31st, 2008 at 2:50 am
the look identical except the text looks nicer in AS3. Are both fonts embedded?
August 31st, 2008 at 7:10 pm
Ben, you are right, the text look nicer in AS3 since I embed the font in the FLA file while no embed font is used in Silverlight.
May be I will talk about embed font later on.
September 1st, 2008 at 11:05 am
Hi, talking about font, we all know there is a huge problem with silverlight’s font. it always looks blurry, while you concluded the flash version is nicer.
the sl team said it won’t be fixed until the sp1 of sl2, so let’s wait…
September 1st, 2008 at 7:14 pm
Yes, to me, the font maniuplation in Flash is much simplier (At least I can simply embed it in the Fla file or Flex Application).
unruledboy, I think the Silverlight Team has too many things to fix and they don’t have time on fixing the font yet. Haha.
September 2nd, 2008 at 12:52 am
Hey,
I found many things in your source that could be modified.
For one, it’s better to use a storyboard than a dispatcher. You also do not need all the canvasses in the 3dtext usercontrol.
So, I do not agree with the examples of verbosity that you show.
But, it is not lack of speed that makes the SL example look a bit ugly. I have modified your source to just use rectangles, and the animation is supersmooth.
It kind of looks as if SnapsToDevicePixels is implemented on the TextBlock, however, as far as I know, snapsToDevicePixels is not implemented for Silverlight. The slowly animated textblocks just look as if they prefer to jump one pixel!!! Something worth looking into, I think.
September 2nd, 2008 at 1:00 am
Hi, Ruurd Boeke. Thanks for you suggestion. Actually, I know the story board can produce nicer effect but I am not good in using storyboard. Do you have any idea that how to reproduce those mathematical calculation using Storyboard?
Besides, the Canvas is used for receiving the Click event since this cannot be received by the text box. But you are right, Rectangle should be able to make it faster. Thanks.
September 2nd, 2008 at 5:07 am
Actually, the storyboard turns out to be a better ‘tick’ provider than the dispatcher. So use it as a substitution for the dispatcher.
Furthermore, the usercontrol (from 3dtext) itself can receive the click events just fine.
Anyway, the issue here is not speed. A rectangle is not faster than the text, just smoother. I would sure like to now why though!
September 2nd, 2008 at 5:21 am
‘now’ in last sentence should be ‘know’ ;-)
September 2nd, 2008 at 9:45 pm
Silverlight works on FF3 although I had some errors at install time. Comparing the two examples the Silverlight movement of a word is jerky instead on the Flash version it is smooth. It seems that Silverlight needs to work on anti-aliasing and zooming/resizing. Nice article!
September 2nd, 2008 at 10:18 pm
Rurrd Boeki, thanks for you suggestion. I think in later post, I will try to use the StoryBoard ticker. (Actually, I used that before. But may be it’s similiar to the Timer in AS3 and I just switch it to DispatcherTimer because of similarity)
webdev.andrei, yup, Flash is smoother. However, it’s not fair to said Silverlight out perform Flash since I didn’t embed the font for Silverligth in this example.
September 4th, 2008 at 3:29 am
Wow thats cool!
Tell me please how can I change color?
September 4th, 2008 at 4:16 am
Hi, Kun.
You may refer to the post (Mystery Magic Background) http://www.shinedraw.com/animation-effect/flash-and-silverlight-mystery-magic-background/ for some more information about changing color.
If you really need more assistance. Please let me know. ^_^
September 4th, 2008 at 9:50 pm
[...] Read more [...]
September 4th, 2008 at 10:19 pm
Eh its hard for me еo understand this =\ In colege we just started to study Flash,so im a newbie in flash,especially in AS3 =)
I would be very grateful if you help me with this =)
September 4th, 2008 at 11:54 pm
Kun, I have send an email to your e-mail address your provided. See if you can receive it.
September 5th, 2008 at 8:08 pm
[...] not interested in Silverlight Games, give this a listen… and subscribe to Erik’s feed, too! Flash and Silverlight: 3D Text Space Terence Tsang didn’t just say, hey… I can do this like they do in flash… he did them BOTH!… [...]
September 8th, 2008 at 5:01 am
[...] Space is back! My first post 3D Text Space received a lot of comments and I decided to apply the logic on images. The effect is much more [...]
September 10th, 2008 at 2:03 am
[...] http://www.shinedraw.com/text-effect/flash-and-silverlight-3d-text-space/ [...]
October 6th, 2008 at 2:36 am
[...] application is implemented based on 3D Text Space. You will notice that the number of characters displayed in the Silverlight version is much less [...]
October 13th, 2008 at 4:58 am
Flash is working, Silverlight is not working. That’s not so cool.