Silverlight’s 3D True power – from 0 to hero in 40 min. November 10, 2010Posted by Jose Luis Latorre Millas in 3D, TechEd.
Tags: 3d, interaction design patterns, Silverlight, teched, ui, ux
Today, Wednesday, I’ll be talking at TechEd Europe 2010 about Silverlight 3D Actual capabilities and how to use them with the session named “Silverlight’s 3D true power – from 0 to 100 in a practical way”, the time is 1:20pm and it will be at Hall 7.1c, Paris 1.
Why 3D? Because it is important for all of us, first we are made to interact with our environment in 3D, our interfaces have 3D tactile capabilities, our vision is 3D and 3D is natural to us (even we have been educated for some years to use 2D interfaces). But.. this is changing, all the industry is switching to 3D, starting by the gaming industry that started with the Wii and now is taking a new step with Kinect as a full body 3D scanner that allows us to interact with our full body with the Xbox interface & games, The Movie industry is also moving to 3D and the display & TV industry is doing so as well… so, it is clear that 3D is important and also the point is that any User interface technology must support this evolution & provide 3D capabilities, for creating 3D interfaces and hopefully in short time, to interact in 3D with them without any device. (So.. when a Kinect for Pc, Microsoft? J – I`m already on the Queue…)
On the session that I am proposing you, we will see the actual status of Silverlight regarding 3D, I’ll show you the basics & ABC of Silverlight 3D capabilities, we will see how do their PlaneProjection properties get along & implement some simple effects and see how we can improve them with Blend so they can shine.
Next, we will get into implementing an intermediate Interaction Design pattern that I love, the Carousel – I’ll show you how to do it from scratch and in full 3D and provide a basic animation so it can spin. Next we will improve its interaction providing it mouse interaction so it spins quicker or slower depending on how far is the mouse cursor from the center. Also we will add some control for when the mouse gets out of the interaction area, so it does not start spinning like crazy (I can bet you have seen more than one of these in production websites…).
Regarding the Carousel, you curious people can read more about it here: http://developer.yahoo.com/ypatterns/selection/carousel.html, here: http://ui-patterns.com/patterns/Carousel and here: http://www.welie.com/patterns/showPattern.php?patternID=carrousel and some more… http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Carousel , http://www.uipattern.com/carousel-design-examples.
Basically allows a user to select one item between a collection of items. This is good because it represents visualy the item (with picture, text & other iconic information) providing accurate understanding of the items to select & also a quick selection of them. This can be done in multiple ways, being one of the most famous the horizontal 2D carousel, the growing one that some OS have for its main function selection, the circular elliptic carousel is also very famous, but who does not know the “CoverFlow”? it is indeed a 3D representation of an horizontal Carousel – by the way, have you checked the Silverlight Booth Demo launcher? It is a nice implementation of this Interaction design Pattern, too! – you can see it at the Silverlight Booth or here: http://www.brainsiders.com//TEE2010/SLShowcase/default.html (note: it is meant to be run in full screen mode). I also implemented there an “auto” mode so I am happy with that, it is simple and efficient. Oh, and the full source code is here: http://showcaselauncher.codeplex.com/
Note that it uses some code from the Bouncing Plane Demo (Henry Han, Tim Heuer, see: http://blogs.msdn.com/b/henryh/archive/2009/03/20/mix09-the-gratuitous-graphics-demo.aspx ) and the for the Horizontal Carousel I’ve used the Flow Layouts Library, see http://slflow.codeplex.com/ from Simon Ferquel, awesome work both of them!!
Oops, almost forgot, For the circular animation I have used the smart technique conceived by John Bruin – http://www.johnbruin.net/index.php/category/silverlight/ – Thanks John!
Also, there’s still more, we will see what do we have apart from the core framework, showcasing two amazing components for providing full 3D, the first being Balder a pretty nice Open Source engine friendly with Blend & XAML based and the second, Silvermotion, a commercial component with awesome power, performance & ease of use.
And yes, all this in 40 minutes.
Sounds good? J
Session Code: WEB202-LNC
Session room: Hall 7.1c Paris 1
When: Today, 1:20pm
Don’t miss it!! If you are interested in 3D, Silverlight and in learning how to implement 3D Interaction design patterns.. we will dedicate a whole 40 minutes to this!!