MouseOver3D – a 3D Silverlight Interaction Design Pattern

 MouseOver3D

A Design Interaction Pattern for 3D Interaction – In this case the effect provided is a 3D Mouse MouseOver that will make the object with the behavior attached to increase or decrease its Z axis if the mouse is over or outside it.

When the mouse is over, it will raise.

When the mouse goes out, it will lower down…

The configuration is easy:

The usual on a TargetedTriggerAction behavior, a general hover offset which indicates how much it will adjust over the Z axis to provide the hover effect and then two configurable animations, for when it goes up and when it goes down.

For having a funny test, I’ve added some logos of my user group inside a WrapPanel and – of course – an attached FluidMoveBehavior just because I love this new functionality and going to what matters here, one MouseOver3D behavior to each logo. i have toyed a bit with each one, so when you execute you can see the effect there, various Z offsets, 80, 120 and more.. and also I’ve applied some easings as Cubic, Bounce, Elastic… also, some of the logos have its axis a bit changed so you can see it respects their rotation and moves accordingly.

you can test it here: http://www.brainsiders.com/playground/mouseover3d/default.html

And you can get the code here: http://gallery.expression.microsoft.com/en-us/MouseOver3D

Hope you like it and, in short will publish more 3D Behaviors, based on Interaction Design Patterns I have thought for 3D.

If you want to see some of them applied together, please go see http://www.bcndev.net   and – I’d love to get your feedback… To note that I plan to release all of the behaviors implemented there and even some more that I still haven’t showed up there or even implemented… also I’m pretty open to hear your suggestions on new interactions you might think of :).

Ah, for the curious ones, the site http://www.bcndev.net is the Barcelona’s user group and now it is showing off an event for next month.. so if you want to come, this event will be for updating the developers firmware for the .net Framework 4.0, visual studio 2010, EF4.0, Silverlight 4.0 and ASP.NET 4.0… the only thing is it will be in Barcelona and in Spanish :P.

Happy coding :)!