Skip to main content

Integrating 3D into Expression Blend with ZAM 3D

Author: Nick Petterssen, Director of Product Design, Electric Rain
Web Site: http://www.erain.com

Electric Rain ZAM 3D Trial Version:
http://www.erain.com/Downloads/Trials/InfoRequest.asp?d=21

Expression Newsletter, subscribe now to get yours.

Expression Blend and WPF offer interface designers some newfound user experience strategies by opening up the world of 3D. Unfortunately, many of us 2D designers have limited experience working with 3D modeling and animation, and we often don’t have access to some of the higher-end authoring applications required to generate the 3D content for incorporation into our interface design. ZAM 3D, made by Electric Rain, is an application that can help you bridge the gap between traditional 2D interface design and some of these fresh new ways of thinking about application interfaces.

For this tutorial we are going to start with an existing project that Electric Rain developed to demonstrate how 3D can be used to enhance a user experience. The original application we will start with allows you to interact with a 3D globe using your mouse, choose various cities on that globe, and see the current time at that chosen location. For our purposes here, we will be adding a 3D element that we build from scratch in ZAM 3D, and show you how to integrate and animate that element within Expression Blend.

So this is our interface starting point…

If you are interested in learning how we got to this point, you can download an .EXE of the project and all related source code here: http://www.erain.com/products/ZAM3D/examples/worldclock/worldclock.asp .

Although this project has a lot going on to begin with, we’re going to keep things simple in this tutorial by adding an emphasis animation of a pushpin dropping onto the city name each time the user chooses a location on the globe.

So first we need to build the pushpin model, which can be done quite easily in ZAM 3D. The ZAM interface will opens into a new project when launched.

We will first jump into the Lathe Editor interface, which is a tool that allows you to draw a 2D profile around an axis of rotation and have ZAM generate a 3D model based on that profile shape.

Using the Add Point Tool, which allows you to draw using a Bezier pen tool, you can draw a 2D path that resembles the cross-section of the plastic portion of the pushpin. Within the Lathe Editor, you only need to draw half of the cross-section, keeping it aligned against the vertical green line which will serve as the rotation axis used to create the 3D object. So the shape you see here...

Becomes this 3D object when you move back into the Scene Editor tab of ZAM 3D.

Next, we can add some color to the pushpin by accessing the Material Gallery and dropping a suitable material onto the object.

Now we need to create the metal part of the pushpin, which can be built using the Cone primitive.

Once the default cone is inserted into the scene, we just need to scale it using the Scaling Mode button in the Main Toolbar.

We can then rotate it 180 degrees using the Rotation Trackball. You can see here that we’ve locked the rotation axis to vertical and set the increment to 90 degrees to ensure that the cone stays in alignment with the plastic portion.

Finally, we can adjust the Bottom Radius and Length properties to get the pointy shape we need to have this thing start looking like a real pushpin.

   

Now that we have our model all set to go, we’ll need to move over into Expression Blend to take the next step of integration. The easiest way to accomplish the transfer is to use the Copy XAML command found in the Edit Menu.

This places the XAML markup onto the clipboard for us, so all we have to do is head over to our existing clock project and paste it into the XAML editor within Blend.


(click image to zoom)

Once the code is inserted at the top of the Z-order (NOTE: Since XAML is parsed from top to bottom, the objects that occur last in the markup will be rendered on the top Z-order level) it will be accessible to us on the design surface in Blend.

From here we can dig into the Storyboards within the project and find the FadeUp storyboard to which we are going to attach our pushpin animation.

At the beginning of the animation, when the text of the city is starting to fade in, we will place the 3D model in the upper right corner of the interface, and set its opacity to about 30%.

And after 1 second of fade-in of the city name, we want the pin to fly into place to the right of the text, so we can set the Translate and Scale properties of the 3D pushpin Viewport to make that happen, while also bringing the opacity back up to 100%.

This leaves us with a well-placed 3D pin with the final FadeUp Storyboard looking like this:

After adding an opacity animation on the pushpin to the FadeDown storyboard so that we have a smooth transition from city to city, we’re all set to test out our emphasizing 3D effect. Now, when we select a city on the 3D globe, we have a pushpin flying in from the top right corner and sticking itself to the city name and country of the new location.

Conclusion

Hopefully this gives you an idea or two about how you might begin utilizing 3D effects into your own interface design. There are some other great 3D effects included within this Global Clock example, so we invite you to check out the .EXE file and dig deeper into the source code provided here:

http://www.erain.com/products/ZAM3D/examples/worldclock/worldclock.asp

In the source code you’ll find the original ZAM 3D files used to generate the pushpin models, as well as the globe and flags, and you’ll be able to deconstruct the basic animations applied to create this fly-in effect. You’ll also see the entire application interface within Blend and have access to the C# code used to bring this basic application to life. To learn more about ZAM 3D and see some other example of the product in use, you can visit http://www.erain.com/products/ZAM3D.