A Design Interaction Pattern for 3D Interaction – In this case the effect provided is a “companion effect” for the Project 3D to Mouse, this, enables us to slide horizontally and vertically a FrameworkElement regarding the calculated X & Y Angle variation based in a determined X & Y axis amplitude. Simply said moves a UIElement accordingly to how is it turning towards the mouse using the other effect.

 
Also you can use it to dynamically adjust the position of an element regarding another object angle, so please if you happen to think of another effect this behavior can be applied, let me know..
It has been designed to be used together with Project3DToMouse, behavior that can be located here: http://gallery.expression.microsoft.com/en-us/Project3DToMouse
The configuration is easy, and very similar to Project3DToMouse:

 
The only thing we add here is the amplitude  for the X & Y, named AmplitudeSlideX and AmplitudeSlideY
 This is good for faking reflections and flares, which you can look how it does look like at http://www.brainsiders.com/playground/slide3dtomouse/default.html.
You can also check how this and other effects look used together here: http://www.bcndev.net
And you can get this behavior here:  http://gallery.expression.microsoft.com/en-us/Slide3DToMouse

As for credits, the original idea of adjusting the position regarding the object’s angle to emulate a light effect is from my friend Edu Couchez, which by the way is a pretty good designer – hopefully he will get a blog soon – do you hear me, Edu? 😉 – and hopefully (again) you will see some work from him in short…

Hope you like  this one and, in short will publish some more 3D Behaviors, based on Interaction Design Patterns I have thought for 3D. By now you have seen three of them :).
To mention that I am pretty open to hear your suggestions on new interactions you might think of :).

Happy coding :)!

 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 :)!

Behaviors were a great addition for Silverlight 3 and just have become better for Silverlight 4. One of my playgrounds at home have been Projection animation experiments for providing  advanced – or crazy – interactions and effects… The main thing is this is not simple to implement and it’s hard to let it be “fine tuned” by a designer or even by yourself, as who wants to recode everything if you can get a great interface for personalizing your effects without much effort?

Thus I’ve made the 3D projection to mouse behavior.

You can try it out here:

http://www.brainsiders.com/playground/Project3DToMouse/default.html

What does it do?

• It animates a the projection of a FrameworkElement on the X and Y axis in the proportion of the position of the mouse regarding another FrameworkElement, normally the main Canvas, LayoutRoot.
• It calculates the projection and applies it with certain amplitude degrees for the X and Y axis. Why not only one amplitude? because you might want your content not to turn the same degrees horizontally as it does vertically, screens aren’t squared and maybe you want a concrete effect  (only horizontal, or only vertical).
• Also, it does this as an animation on a configurable time and on a configurable EasingFunction, which is good for a designer, so you can make it move smoothly or in a funny elastic way :).
• I have set up a flag to decide if you want to make the orientation of the projection towards the mouse, facing it or against it.
• It also has a nice animation to go back to the starting position if the mouse gets out of the application.

Going to the code, everything is categorized and with descriptions to help it being used, adapts well to FrameworkElements that have a fixed or dynamic height and width and the storyboard is generated on the go in memory so it is not possible to step over other animation, this meaning that this behavior can be applied to more than one element in the same UserControl.

The wiring up is done on the OnAttached and OnDetaching events, the Invoke does nothing so it could be deleted.. I have used the TargetedTriggerAction because I need the pick up the behavior from a control that takes the whole screen and apply the projection effect to another control, preferably smaller to appreciate the effect. It would be good if we could deactivate the “invoke” so that designers would not get confused.. just my 5 cents.. 😉

On how to use it, this is easy, copy the Project2Mouse.cs file to your project and that’s it. At least it is easy for a developer, for a designer it would be cool if we could configure a behaviors folder and leave there all the behaviors encapsulated as “dll”, so Blend would load and show up the behaviors blend has, the ones on the project and the ones at the folder… then it would add references as needed at the project.

Other thing I am finding difficult is that the current Behaviors interface is good for having 10 to 20 Behaviors, it turns difficult to locate quickly a behavior. It would be good if they could be categorized or tagged (author, description, category and tags (1 .. n would be great).

To get it, it is published at the Microsoft Expression Behaviors Gallery, here: http://gallery.expression.microsoft.com/en-us/Project3DToMouse

I am thinking on publishing  some other interaction behaviors – after cleaning a bit the mess that happens when playing with different behaviors until you get the desired effect, that is..

If you happen to have an idea of an interesting behavior I’d be happy to hear it and try to implement it :).