Integrating 3D into Expression Blend with ZAM 3D

Author: Nick Petterssen, Director of Product Design, Electric Rain
Website: www.erain.com

Expression Newsletter, subscribe now to get yours.

So you want to start tapping into the 3D capabilities of WPF and don’t know where to start? Or maybe you’ve already messed around with the Make Image 3D feature in Expression Blend, but would like to take your project to a bit higher level of coolness? Well, just because you can’t actually do any 3D modeling in Blend, that doesn’t mean you’re out in the cold. Electric Rain has released a handy tool called ZAM 3D to get that process kick-started without needing to invest tons of time and money into a high-end 3D application.

ZAM 3D’s roots were planted in early 2000, when there was a similar need for an easy-to-use 3D tool for Flash designers who were trying to do more with 3D animation as Flash began growing in popularity. Electric Rain initially released a product called Swift 3D for those eager Flash designers, and now their nine years of experience serving that market comes to WPF designers in the form of ZAM 3D, which is essentially Swift 3D, but with XAML export instead of Flash.

Probably the most effective way to demonstrate what ZAM 3D can do for you is to walk through a basic demo that highlights the tools and workflow involved in building, integrating, and animating a 3D scene into a Blend project. And the great thing is that ZAM 3D is now available as a 15-day fully functional trial version, so you can grab the app and follow right along as we go through the demo. You’ll find the trial located at http://www.erain.com/products/ZAM3D/DefaultPDC.asp?erain=expnews.

Tutorial

Let’s start our journey in Expression Blend with a bit of existing content. I’ve quickly thrown together a basic UI to start with, and our scenario here is that we want to use a little 3D animation to spice up the experience when users interact with our interface. In this case it’s just a dialog providing a choice for a movie distribution service asking whether the user would like their movie in a DVD or a download format. Obviously, there are much more involved implementations of 3D-enhanced UI out there, but for purposes of simplicity we’ll start here.

You can see we have two buttons for DVD or Download, and our goal is to use real 3D models as the corresponding graphics we use for each selection showing up within the gray rectangle below. Furthermore, we’d like to have each model do a quick animation when the corresponding button gets a mouseover event. So how does this happen? Well, let’s launch ZAM 3D and see.

To start with, I’ve chosen to use a model of an LCD TV that comes with the application, and this was added to the scene with a simple drag-and-drop from the Model Gallery in the lower-right corner of the interface. This shows that even without any 3D modeling, I can be off and running quite quickly. ZAM 3D also allows you to import .3DS and .DXF files, along with creating extrusions from .AI and .EPS files.

Once I’ve added it to the scene, I’m going to apply a glossy black material to the casing of the TV model, which again is done with a drag-and-drop, this time from the Material Gallery, onto the surface of choice. These materials can be customized to provide high levels of specularity, reflection and other common properties of 3D materials.

At this point, moving the model from ZAM 3D to Expression Blend is just a matter of copying and pasting the XAML from one app to the other. ZAM can also export the scene as a self-contained .XAML file, which can be helpful if you are looking to include the 3D model as a separate resource in your project.

With the XAML on our clipboard, we can go to the XAML view of the existing interface within Blend and paste the markup into the file just after the grey rectangle so that our model will be visible above the rectangle (WPF renders Z order with items that are first in the XAML being on the bottom—a bit counterintuitive for those of us used to working with layers, where the top layers are rendered above the lower ones).

Now, when we head back to the Design view, we see our model residing within our interface, contained with a Viewbox for easier control while we do layout.

To gain access to the model of the TV itself within the larger scene, I need to dig into the Viewport3D structure until I get to the actual objects. Within the ZAM3DViewport3D container you will see the standard camera that provides your view into the scene, as well as any lights that existed within ZAM 3D.

Although you do have some control over each of these scene objects within Blend, the ease of interacting with these elements is not great, since Blend is not built to provide a full-fledged 3D environment, which is another reason why ZAM 3D can help speed up any 3D production needs you may have. With the group of objects representing my TV selected, I can access the transform properties of the model and apply a 45-degree Y rotation to the model as my base state—the way I want the TV to look before the user interacts with any UI controls.

Next, we’ll head back to ZAM 3D to work with our second model.

This model of a PC is a bit more complex, so we’ll take a moment to deconstruct what you’re seeing here. First off, we have a monitor and keyboard base, which I brought in as 3DS files that were left over from an old project. Although ZAM provides a robust 3D creation environment, sometimes it’s easiest to find free or inexpensive content on the Web to speed up your project timeline.

The keyboard from my .3DS file was missing a texture map image, so the keys you see here were actually drawn in Adobe Illustrator and imported into ZAM as an .AI file, which automatically converts the 2D path information into a 3D extrusion. Post-import, I tweaked the depth of the keys and applied some bevels and materials within ZAM.

The CPU case was all modeled within ZAM 3D. Here we’re looking at the top view of the case within the Extrusion Editor.

The Extrusion Editor allows you to draw paths within a 2D environment using a Bezier pen tool and then control the depth of that object back within the 3D interface. I took this simple outline and gave it a lot of depth, then stood it up on end to create the main part of my CPU tower.

By copying-and-pasting, scaling, and changing depth of this same extrusion, I was able to create the darker top, middle and base objects that give the CPU some character. The grill in the front was also built using shapes drawn in the Extrusion Editor and then replicated and stacked in a vertical array.

Because it’s more of an organic shape (smooth and irregular), the mouse was built in the Advanced Modeler interface, where you can get down to the polygon level of an object, giving you full control over the smallest of details.

Since the mouse is pretty simple it started its life as a sphere primitive that got pushed, pulled and flattened as needed. The tools provided within the Advanced Modeler match those found in much more expensive (and harder to learn) 3D applications, so although ZAM 3D is very approachable, it will grow in power as your experience level increases.

Lastly, because ZAM provides a full-blown 3D authoring environment, objects like lights and cameras can be added, customized and controlled with ease to get your 3D scene looking its best. By enabling physical control of these essential items within ZAM 3D, we’ve made it a lot easier to tweak your scene to perfection than by adjusting numbers in a properties panel as you would in Blend.

Animation of your 3D scene can also be performed within the ZAM 3D environment using a full-featured keyframe timeline, but for the sake of this project we’re going to animate these models within Blend so that we can use the exact context of the final UI as a reference.

To bring the PC Model over into Blend, we will use the same Copy XAML feature in ZAM 3D, and we’ll paste the second round of 3D XAML markup into the XAML editor just after our first model.

NOTE: When pasting a second model into a Blend project from ZAM 3D, you will need to rename three items in the second model within the XAML markup. After pasting, try a build and the errors will come up in the Results tab. By going into Split View, you can double-click on each error and it will take you to the line of XAML that needs editing. By adding a “1” at the end of the original names, you can create unique names for each item, which Blend will need to show your model successfully in Design View and to compile the project.

Now that we have our models in place within Blend, let’s create a few Storyboards (animations) that provide the user some visual feedback on the choice they are about to make. After creating a new Storyboard called Emphasize_TV, we’ll use the transform properties to apply a rotation animation that brings the TV to face forward, and then also scale its Viewbox up and fade the PC model down so that it looks like this:

And here is the resulting timeline (part of it, anyway).

You’ll see that we have purposefully not added start keyframes to these individual property animations. This allows for a process of “animation handoff” to happen when animations are interrupted or overridden by another animation. By setting up our Storyboard this way, we can create smooth transitions to and from different states based on the random mouse activity of the user.

Once we’ve applied some smooth easing settings to our keyframes, we can make a copy of the Storyboard, rename it DeEmphasize_TV, and reverse the animation. Next, we’ll do the same with the PC model using these exact steps. Then it’s time to throw some events into our scene, which is really easy to do. First, we’ll select the “DVD” button and then choose the Events view from the Properties Panel.

This exposes all of the possible events that might take place with our DVD button, and the two we are interested in are MouseEnter and MouseLeave. By typing Play_Emphasize_TV (any descriptive name will do) into the MouseEnter field and clicking Enter, you will automatically launch Visual Studio so that you can enter the required C# code to make something happen. Blend even adds the appropriate event handlers in the code for you during this step.

The code we’ll use to fire the animations is pretty straightforward, and here you can see I’ve also added the events we want fired for MouseEnter and MouseLeave for the Download button as well.

With that code in place we can either build the project from VS or save our .CS file and head back to Blend for a build. The resulting dialog now has the desired interactivity with the 3D models reinforcing the choice the user is about to make for their movie distribution.

With a bit more work we could have an image show up on either screen describing the choice, or even play a video on each screen that really brings the UI to life, but I think we’ll save that for another day.

Conclusion

I hope this tutorial provides you with some insight on the workflow between ZAM 3D and Expression Blend and demonstrates how well the two apps can work together to produce a rich experience for your users. I encourage you to download the trial version of ZAM 3D and take it for a spin. We’ve been focusing on workflow in this tutorial, but there are tons of educational resources to learn about what’s possible with ZAM on the Electric Rain website.

• Get the ZAM 3D Trial version or purchase ZAM 3D

You are also welcome to grab the source code for this tutorial, which includes the ZAM 3D source files for the two models.

• Download the source files for this tutorial