3D 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 groovy than the original one! No 3D Library is needed.
You may now vote for your favorite sample!
Vote for this sample
Comparison
Flash implementation: 1 hour
Silverlight implementation: 40 minutes
What’s the difference?
- Scaling: scaleX, scaleY [AS3] vs ScaleTransform [C#]
Source codes
3D Image Space [Flash 9, AS3] (407.5 KiB, 2,917 hits)
- 3D Image Space [Silverlight 2, C#] (952.6 KiB, 7,007 hits)
Flash
Silverlight
Scaling: scaleX, scaleY [AS3] vs ScaleTransform [C#]
Scaling in both AS3 and C# look similar. However, you can only scale up a object in AS3 from the perspective point (0, 0). That means, the object will only be extended to the bottom right corner. There are many workarounds for solving this, like putting the image in to a Sprite.
// AS3 // Scaling must be based on the perspective 0, 0 image.scaleX = scale; image.scaleY = scale; // Using different perspective var sprite:Sprite = new Sprite(); image.x = -image.width/2; image.y = -image.width/2; sprite.addChild(image); sprite.scaleX = scale; sprite.scaleY = scale;
In Silverlight, you can scale up the image using different perspective easily. May be we can consider it’s a strength comparing with Flash.
// C# // Scale up the image using different ScaleTransform scaleTransform = new ScaleTransform(); scaleTransform.ScaleX = scale; scaleTransform.ScaleY = scale; scaleTransform.CenterX = image.Width/2; scaleTransform.CenterY = image.Height/2; image.RenderTransform = scaleTransform;
September 8th, 2008 at 6:06 am
You could simplify the C# code a bit by using a C# 3.0 language feature called object initializers:
var scaleTransform = new ScaleTransform() {
ScaleX = scale,
ScaleY = scale,
CenterX = image.Width,
CenterY = image.Height
};
image.RenderTransform = scaleTransform;
or just:
image.RenderTransform = new ScaleTransform() {
ScaleX = scale,
ScaleY = scale,
CenterX = image.Width,
CenterY = image.Height
};
September 8th, 2008 at 12:59 pm
Thanks Justin, it’s a very helpful feature!
September 8th, 2008 at 3:16 pm
hello, very charming effect. but the cpu is 100%, sl is still not good at animation.
I was impressed by a flash 3d engine, I hope sl will accomplish it someday.
http://temp.roxik.com/datas/max2007/index.html
September 8th, 2008 at 4:07 pm
unruledboy, the demo is really amazing. Thanks for your sharing. Yes, I think to implememnt 3D space, Flash has more readily available libaray and things can be done easier.
September 8th, 2008 at 11:06 pm
Interesting how there’s quite a bit more flicker on the edges of the images in Silverlight compared to Flash. Is it a weakness of how Silverlight scales images? Or its subpixel rendering?
Keep up the great work! You’re really on to something with this series.
September 8th, 2008 at 11:20 pm
I’m runnign this and am not getting any cpu utilization worth acknowledging…
Here is a great site for comparision between DHTML, JS, Flex and SL.
IMHO, I get the best CPU utilization with SL 2b2 vs. Flex (peaked at 97% cpu utlization) only reaching 63% cup utilization.
Great work, keep the posts coming. As soon as I figure a way to implement these types of features in a business level application I’m all over it.
September 9th, 2008 at 12:53 am
Hi Tom, like what Big Dubb said, Silverlight actual has a higher CPU utilization which showed that Silverlight is performing better. (May be it is due to the reason that I have set the smoothing property of AS3 Image to true which greatly increased the CPU time)
DigDubb, thanks for your complimentary, I will keep working!
September 9th, 2008 at 6:53 am
For those that comment on CPU performance could you maybe also include your browser and OS. It makes a big difference!
Im getting better CPU thruput from SL but again it’s higher than I’d want from an application like this.
btw. great site and keep up the great demo’s!
September 9th, 2008 at 3:09 pm
[...] Flash vs Silverlight- 3D Image Space [...]
September 12th, 2008 at 6:15 am
pijtkfbz qiylmzp mxlsgua gvzcdqli xispayb hekst aepkqrnjy
September 25th, 2008 at 2:05 pm
[...] the category of “Sleep … the 8 best hours of the week” … good stuff on bookmarks, Mike, thanks! Flash vs Silverlight: 3D Image Space Now I know that alert readers will notice I’m early today… and because I am, I can pull up an oler [...]
October 20th, 2008 at 1:04 am
[...] site care merita vizitat este si http://www.shinedraw.com. aici am gasit un exemplu care m-a ajutat sa fac posibila aceasta [...]
October 31st, 2008 at 9:27 pm
I have completed this exercise and replaced the images with my own. I was wondering, if there a way to convert this into a movie that plays for 5-10 seconds without having mouse interaction. I just wanted to use this as a portion of a movie I am doing. Any suggestions?
November 20th, 2008 at 5:04 am
[...] 3D Image Space [...]
December 4th, 2008 at 3:09 am
Hi!
Thanks for sharing your code :)
I changed the solution so that it shows Text on the 3D world and not images.
Here it is http://www.fullsix.pt/tas/TextSpace3D.zip
December 4th, 2008 at 3:29 am
Tiago, thx a lot.
I also got an similar post at http://www.shinedraw.com/text-effect/silverlight-2-upgrade-3d-text-space/
You may go to have a look~
December 17th, 2008 at 4:23 pm
When I make font size smaller (CTRL+Mouse Scroll in FireFox) flash animation adjusted according to smaller size but silverlight it is not.
And They both have same image quality.
January 15th, 2009 at 4:01 am
I really like this forum it’s pretty cool so cudos! What I am trying to do is make a main movie clip which is already built in as2 along with all the other pages… I know as3 is a lot easier to work with but do not have a choice on this build.
Anyways, as you probably already know I am having trouble calling this gallery into my main movie clip because it breaks since it’s built using as3 I am not the greatest at flash but can usually figure things out… anyway, is there an as2 version or any hacks that I could use?
January 15th, 2009 at 4:33 pm
Hi fairymgc0328,
Glad to know that you love my sample. However, there is no as2 version and I don’t have plan to make it as well.
AS3 is more systematic and structured than as2, you may consider to take this chance to explore about as3 as well.
January 20th, 2009 at 4:33 am
Guys is there anyway to add hyperlinks to the example so once you click on an image it will take you to another web page/site maybe using a Parent within the addImages function but without losing animation?
By the way, congratulations for the site and the examples, very impressive!
February 2nd, 2009 at 6:33 am
Marvelous example.
I would like to ask for a recommendation/help. I would like to implement the following functionality:
After I click on an image. the camera to navigate to it. But as soon as the image occupies, let’s say, 1/4(might vary) of the screen to pause the camera. This would be useful if someone wants to spend a little more time watching at the picture. Do you guys have any suggestions on this ?
Best Regards,
Kiril
April 28th, 2009 at 5:32 am
I was trying to port this project to WPF, but am failing miserably. Can any pointers for doing so be provided?
May 20th, 2009 at 1:36 am
[...] Flash vs Silverlight: 3D Image Space [...]
June 27th, 2009 at 12:38 am
good idea