Pseudo 3D in Flash

by admin on May 21, 2008

For some time now I’ve been looking for a nice way to render 3D objects in flash so that a viewer can rotate the object and get a real feel for it.

There are a few solutions but none of them really created the high quality look that I was after so the option I have chosen is somewhat of a cheat in that it doesn’t create a true 3D object. It does however give a really nice result and with some tweaking to improve download times might just be a winner (for my needs at least).

A customer of ours provided me with a model of an object which I then imported into Cinema 4D. I created a simple animation of the object rotating around it’s Y axis. I then applied some lighting and so forth before rendering out a video of the animation.

I then took that simple video into Adobe After Effects, tweaked it to get the effect I was after and exported it again as an FLV.

Once I had the FLV, I then created a simple player in Adobe Flash and embedded the FLV (I know it’s not download friendly but this is still a work in progess). I used a slider component and hooked the slider to the embedded FLV timeline so that it controls the FLV and plays it forward or backward accordingly. This creates the illusion that the viewer is actually rotating the 3D model while still preserving the high quality output of the render. Perfect!

One of the things that had me scratching my head for a while was that the FLV movie would play great when the slider was moved forward .. but was very jerky when played backward. The solution lay in the way the FLV was exported from After Effects and was as simple as increasing the number of keyframes for the FLV during the export process .. The only downside being that this did increase the file size somewhat.

The end result is shown below. File size optimisation and pre-loader still to come.

[swfobj src="http://blog.martian.co.nz/wp-content/uploads/2008/05/test42.swf"]

{ 1 comment }

Ryan Southam August 17, 2008 at 9:51 pm

Fantastic idea with the render, excellent.

Comments on this entry are closed.