3d viewer with Flash CS4 and Cinema 4D

Sometimes you want to be able to show an object in 3d on the web. If you are looking for a high quality render then the best way that I know is to use pre-rendered footage and import that into flash. Sure it’s not a true 3d environment but the end result is very convincing. Let me show you how I made the example here.

I chose a local company here in Tauranga that are known for making great sleep systems (that’s ‘beds’ to you and I). They put a lot of work into the design of their products so for this example I have chosen one of their beds. I also chose one to sleep on … but that’s beside the point.

Cinema 4D

To start with I found a couple of source photos on the web and used those as a basis for creating a model in Cinema 4d. I wont go into all the details of creating the model as there are people around that know far more about it than I do. (Check out Pariah Studios for some handy tips when it comes to modeling in Cinema 4d. )

Once I was happy with the model, I added a camera and animated it around the model over 90 frames. I used a technique demonstrated by Robert Leger in the breakdown of his winning entry to the Motionworks unplugged title challenge. A clever technique where you add a spline to your scene, attach a targeted camera to the spline and then keyframe the camera’s position along the spline. Very simple and effective.

I added some object buffers to the various elements in the model so I could isolate them later and then rendered out the animation for After Effects.

After Effects

Once I had the animation I took it into after effects and tweaked some colours (object buffers are very handy for isolating and color correcting specific parts of your scene), added a vignette (which I could have done later in the flash stage come to think of it) and generally got the clip looking how I wanted it to look.

Then it was time to render out an FLV from After Effects for the import to Flash.

TIP. I specified to create a Keyframe at every frame during the export process. It does add considerably to the file size of the FLV .. but for this type of scene, with a lot of sharp lines, I found that anything less caused an unacceptable loss in quality.

Flash CS4

Once you have your FLV rendered out, you can import it into flash using the Import Video command. Import your video into the timeline as a MovieClip .. don’t stream it or import it as a video object. If it’s imported as a MovieClip it becomes very simple to scrub the movie back and forth.

Once your import has completed and you have the MovieClip on the stage, give it an instance name so it can be targeted easily with Actionscript. I called mine:

flvMC

Then, double click on the MovieClip and add a stop action to the very first frame. This will stop the movie from playing automatically once the swf loads. The actionsctip for this is simply:

stop();

Now we need to create something to let people interact with the MovieClip. For this I chose the Slider Component (which I think is only available in ActionScript 3).

Drag a Slider Component out of the components panel and onto a new layer in your timeline then give it an instance name. I called mine:

sliderCOMP

Now we just need to hook the Slider Component to the MovieClip and the job is virtually done. To do this we need a few things.

Component Inspector

Firstly, click on the Slider Component in your timeline and open the Component Inspector window.

1. We need to make sure that ‘liveDragging’ is set to true.

2. Remember back in Cinema 4D I rendered this animation out over 90 frames? Well in the ‘maximum’ setting set this to the same number as the total frames in your animation. So for me this is 90.

Now the last thing that we need to do is tell the slider to talk to the MovieClip. Again we need a tiny bit of Actionscript for this. Here is mine and you can adapt as required.

sliderCOMP.width = 690;

import fl.controls.Slider;
import fl.events.SliderEvent;
import fl.controls.Label;

sliderCOMP.addEventListener(SliderEvent.CHANGE, changeHandler);

function changeHandler(event:SliderEvent):void {
 flvMC.gotoAndStop(event.value);
}

So what’s happening here?  Firstly I’m setting the width of my slider so that it takes up more of the canvas.

Next, we’re importing the classes that deal with the Slider Control.

Then we’re adding an Event Listener to the Slider Control .. this means that we can run another piece of code (a custom function called “changeHandler”) every time something happens with the Slider.

Lastly, we are creating the ‘changeHandler’ function. What this function is doing is simply telling the MovieClip to ‘goto and stop’ on a specific Frame number. It gets that frame number from the sliders position.

Because we set the maximum value of the slider to be the same as the number of frames that are in the MovieClip then all we are really saying is ‘if the slider moves to position 10, move the MovieClip to frame 10 and stop’.

Round up

This process may look fairly complex but in truth it’s actually pretty straight forward. What we are doing is enabling the user to scrub their way back and forth through some movie footage. The movie footage just happens to be a 3d render of an object. Therefore the end result is the effect that the user is rotating the object in a 3d environment.

Have fun.