In this tutorial I will walk you through creating a sample 3D project in Expression. The final output of this project would be a cube, and six buttons(labelled with colors)besides it. You can click on the buttons and the cube would rotate to the face with the color indicated by the content of the button. I am going to assume you already know some basic things about expression, like selecting an element, what are palettes etc.

 

Step 1: You need to have a .obj model its corresponding material file and texture files. The cube that I am importing is very simple and does not have textures in it. Now click on project->add existing item. In the ensuing dialogue 'ctrl' choose all the .obj file, material file and texture files and click open. At the end of this step the project palette should look like this(If you dont see the project palette see if it is minimized some where, if not click view->project and that should put up the project palette for you)

 

Step 2: Now double click on the .obj file in the projects palette. It will put the cube into the artboard. Expression creates a viewport and 2 lights for you(a directional light and ambient light. More about editing a light in another entry!). The viewport3d will also appear on the timeline. The timeline tree on expansion looks like this.(This timeline tree is a little confusing. But this is much improved in the next version of Expression). At the root of the 3D object is the viewport. It has one child called modelvisual3D(More about modelvisual 3D and the content properties could be found in this blog). For our purpose just expand the model visual 3d, then the content until you see the world. If you expand the world it has 2 lights as children and the third child is a group that represents the model we have just imported. The name of the group would usually be 'filename'_obj(in our case cubewithmultiplecolors_obj).

 

Step 3(Moving the center point): The goal is to put animation on the cube! Our first animation would be to rotate the cube 90' on the Y - axis(The axis that is represented by the green adorners.Red is X and blue is Y). The result of this animation is that the cube would be rotated and the cyan face comes to front. To achieve this select the group 'cubewithmultiplecolors_obj' from the timeline. Once I select this, adorners show up as shown in this figure.

 

There are various parts to the adorners. If you click and drag from any of the curved adorners that would rotate the the object(there are 3 adorners one for each axis). If you click and drag from one of the long sticks that would translate the object. If you click and drag from one of the cubes that would scale the object. When you do one of the above transformations to the group we have selected, all the elements with in the group will also be transformed.In our case we want to rotate the entire cube. So selecting 'cubewithmultiplecolors_obj' is a good choice.(Selecting its parent 'world' would also be fine. But in this case the lights would also rotate along with the cube)

 

If you look at the adorners the origin(the point at which all the 3 translation adorners meet) is located at the lower left hand corner of the cube(The position of the origin is determined by the information from the obj file). Rotating the cube now would rotate it around this origin. To rotate around the center of the cube, you would have to move the origin to the center point of the cube. To do this open up the transform palette. The transform palette has many tabs as shown in the figure. The first tab indicated by the 4 cornered rectangle is the translation tab. The second tab indicated by the arc is the rotation tab, the third is scale, fourth is skew, fifth is center point and sixth is flip(You can mouse over the tabs and tool tip shows which type of tab it is).

 

 Now click on the center point tab as shown in this figure. Now I enter (1,1,1) on x,y,z respectively to move the adorners to the center of the cube. For your model you will have to play with different values(in many obj files the origin could already be at the center point of the model). At the end of this the adorners look like this. Compare this image to the previous image.

 

Step 4(Animating the cube - finally!): In the timeline click on the button for creating a new timeline. Seek the play head to the time you desire(I scrubbed to 4 seconds). Now in the transform palette click the rotation tab as shown in this figure. In the current build of expression we have a bug, because of which when you enter a value for rotation in one of the text boxes, sometimes the value in the text boxes would change to a different value from the one you enterred(but the object would be rotated by the right amount though! we have fixed this bug in the future release). To work around this bug click on the 'relative' button in the palette. Now enter 90 in y axis. You can refer to the figure again here. In this mode, when the arrow besides the 'relative' button is clicked, the 90' rotation along 'y' would be applied to whatever rotation we already have on the cube(in our case we dont have any other rotation on the cube). Now click on the arrow. Congratulations, you have created your first 3D animation! Now the cyan face of the cube would be facing forward. You can play the animation from the little 'play' button the timeline palette.

 

Now create another timeline. The purpose of this timeline would be to rotate the cube 180' along y to make the green face come to the front. Seek to time 4 seconds. Now in the rotation tab of the translation palette click the arrow besides the 'relative' button 2 times(that is if you have the value of 90 in the text box. If you have 180 clicking once is sufficient. But if you have 180 in the text box then the text box value would immediately change to something else because of the bug I mentioned. So having 90' and clicking the arrow 2 times might be a good option for you to not become too confused!).

 

Now create 6 such timelines one for each face of the cube.(To get to yellow and violet you will have to do rotation along the x-axis rather than on the y - axis).

 

Step 5(Hooking it all upto the button): Now create 6 buttons. I am not going to cover how to do this! Refer to other tutorials on this topic from the expression blog. Now select the first button(from timeline or artboard) and select the first timeline from the timeline palette. It looks like this. Notice at the right side of the figure the timeline properties palette is open(if you dont have it open, open it from the view menu). Now click on the 'add' button on the timeline properties palette to add a trigger to trigger this timeline. Three combo boxes would be put for you. In the first combo box(the left most one!) would be the trigger element. It should be the element name of the first button. If it is not, then expand the combo box and select the button from the list(make sure you have the button selected from the timeline before you do all this). The second combo box is the trigger event. Open this up and select the event on which you want to trigger the timeline.(I have selected the 'click' event). The last combo box tells what to trigger on the timeline(In our case I have put begin animation).

 

Now hook up all the 6 buttons to their respective timeline.

 

Step 6(Build and run!): Now you are all set. Do a F5 and your project builds and runs. You can click on one of the buttons and the cube would rotate to the face corresponding to the button. This is a screen shot of the app in action.

 

This tutorial does not cover many interesting things about 3D(some of them are manipulating the camera, manipulating the light, manipulating the material etc!) There will be updates to this blog. Keep watching!

 

If you are importing texture be sure to read the work around mentioned here.

Feel free to add comments about this blog. Also mention if you want to know more about a specific topic in 3D and I can explain that in more detail!
 
To download the project click here.

 

My name is Lingesh. I work as a software design engineer in Test in Microsoft. I work for a product called Expression Interactive Designer. I will be posting in this blogs about my work, small tutorials and my thoughts on designer tools. As a first step I will be posting a tutorial on 3D features in Expression! Stay tuned.

- Lingesh