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, 4,141 hits)
- 3D Text Space [Silverlight 2, C#] (19.5 KiB, 5,126 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.
December 15th, 2008 at 8:22 pm
Hi,
Its really cool… how can i make use of the source in flex… could you please help me… i need to design a gallery similar to this…
December 16th, 2008 at 2:27 pm
if you are new to flex.. the best way to solve it is to directly load the swf from the flex.
December 22nd, 2008 at 11:49 pm
Hi!
Here is one application I did with some of the code from this sample:
http://www.microsoftnatal.com/microsoft/EcardNatal/defaulten.aspx
It mixes Deep Zoom with the 3D Spiral Text
Thanks for sharing your code :)
December 23rd, 2008 at 2:53 am
Tiago Andrade e Silva,
It is a great demo, thx for sharing!!!
February 21st, 2009 at 10:28 pm
Hi,
Beautiful effect! I manage to change the background color and the font but how do I change the color of the font?
Thanks for a great site!
April 2nd, 2009 at 6:53 pm
You must never use a Dispatcher Timer for on Frame event simulation. To create a High sleed Loop user a Storyboard with Storyboard end event as your code zone.
Dont use the Dispatcher timer because its running on the main threat which means it will be delayed by every operation running on the main thread.
April 5th, 2009 at 10:13 pm
Is there a tutorial for this? I’m trying to change text, fonts, and color, and not seeing the variables where I can do that. Thanks!
April 7th, 2009 at 9:25 pm
I’m in the same situation - trying to change the colors… any information would be great. I went through the post mentioned above (about changing color) and I’m not having any luck. Thanks!
April 14th, 2009 at 9:38 am
[...] as3 to as2 Commenta 5th February , 2009 I am trying to convert this file here in as2 http://www.shinedraw.com/text-effect…3d-text-space/ [...]
June 5th, 2009 at 4:28 pm
nice work man, as if as3 was not hard you even tried it with silverlight!?!?!?! “respect!”
July 3rd, 2009 at 5:43 pm
Thanks for share !
September 7th, 2009 at 5:27 am
Hi there,
Nice 3D spacetext you’ve here! I’m trying to use your spacetext on my own Flashbased website, to display some of my blogtags/ movietag. When a blogtag/ movietag is clicked, it will show the user some of my movies and related text. It’s not supposed to be dynamic, just static Flash with timeline-related pages is works for me.
So I started to try things in your .fla. I have worked for ages with AS2, but AS3 truly is far more complicated, can’t get used to it. But I started with making the words clickable and relating the tagnames to different framenumbers. That works. The only thing that’s left to do, is to actually jump to the right framenumber. I thought I could use e.target.parent.gotoAndStop(); but that’s when an error comes in:
“ReferenceError: Error #1069: Property gotoAndStop not found on com.shinedraw.text.TextSpace and there is no default value.
at MethodInfo-8()
at com.shinedraw.text::TextSpace/on_mouse_down()”
Can anyone help me with this problem. Again, I’m an AS3 n00b. ;-)
Thank you very much!
October 19th, 2009 at 8:20 pm
Да… Мне действительно близка обсуждаемая тема! Даже грустно как-то :(
November 18th, 2009 at 11:40 am
Just add TextOptions.TextHintingMode=”Animated” for the TextBlock and animation will be smooth. I checked it in SL3.
December 27th, 2009 at 7:55 am
Мне кажется, не стоит обольщатся по этому поводу. :)
February 13th, 2010 at 2:28 pm
Hi! This is excellent example, especially for someone who are learning AS3. Thank you for sharing this code!!!
I have one question: If I want to stop the word in front of my screen (not to pass behind as in this example) what I need to do? I suppose that there is need to be some if statement in the enter frame method which will check something(but i don’t know what) for every text3D.point3D.z and if is true to set up _zMovement=0;
Thanks for any help!
March 31st, 2010 at 4:43 am
Прикольно! С наладонника немного тяжело читается, но оно того стоит!
April 13th, 2010 at 4:37 am
[...] 第一个效果的下载地址：http://www.shinedraw.com/text-effect/flash-and-silverlight-3d-text-space/ [...]