Not now Chewie! It's time for 3D Spaceship in Flash
Flash Dev
So this article is sort of a continuation from the Product Box article. The processes are prety much the same so let's just dive into the deep end and see where we wash up. I have decided to create a 3D spaceship for use in Flash. The model will be quite a bit more complex than just a box so using 3d Studio Max really has it's advantages here. You won't go wrong using Maya or Blender either, the steps are pretty much the same. I would recommend Blender as it is free to download and very powerful for 3D design.

One thing to keep in mind though when creating 3D objects for Flash is polygon count. Polygons are essentially the basic shapes need to create a 3D object. A basic rule of thumb for Flash (and all realtime rendered 3D) is the less complex your model is, the faster it will render, which in turn helps provide a more seamless user experience. So with that in mind, let's create our spaceship!

Step 1 : Modelling the ship


Learning basic modelling techniques doesn't take too long and a little effort is definitely rewarded. Learning simple modelling will help keep polygon count down while giving you a solid base to begin experimenting in the world of 3D. I would usually start out with a few hand drawn reference images of my object from different angles but this time I just jumped in and started modelling. Starting with the box primitive, I pushed and pulled around some vertices and this is what I came up with. A very simple, low-poly spaceship.

ship-3d

Step 2 : Creating a texture


Now this step took me quite long, about 4 hours. The secret to making a low-poly model look more realistic is putting a little more effort into creating the texture. In the same way that a model with too many faces (polygons) will impede performance, so too will a texture that is too big (both dimensionally and in terms of bytes). Try and find a nice median between quality and size. Here is the texture for my interstellar fighter ship. When the model is exported from 3DsMax, the texture co-ordinates are stored and each piece is mapped to it's corresponding face on the model.

shipmap

Step 3 : Putting it all together


As in the product box article, the model was brought into flash via actionscript 3 and textured using my image map in the library. For the texture this time though, I used something called the EnviroBitmapMaterial class in away3D. This uses your texture for the ship as normal, but adds another image over that which simulates an environmental reflection. Here is the reflection image I used.

caustic

This adds a nice little effect which really pumps up the realism and also makes the ship look more impressive. Lastly I add a Glow filter to my ship. This is just a standard Flash glow filter which can be applied to any away3D object natively. You can use any of the standard Flash filters so try and experiment, try using blur, drop shadow, glow etc. I chose a light blue glow. After quickly drawing up an animated 2D projector at the bottom, just to add a little effect to the composition, my spaceship was done.




Now you might be thinking "Well, that is all well and good, but what use is a rotating 3D spaceship to anyone?".

Here is the great part of it. Because this ship is an actionscript class and an extension of the Sprite class, you can add any kind of user interaction you would usually use in flash on 2D vector artwork. The possibility of mouse and keyboard interaction means that with a little ingenuity you can allow your user to fly this ship around your own 3D world within their browser. This though is a topic for another experiment :) To infinity and beyond!
 

Comments 

 
#1 2010-04-09 19:19
Your blog keeps getting better and better! Your older articles are not as good as newer ones you have a lot more creativity and originality now. Keep it up!
And according to this article, I totally agree with your opinion, but only this time! :)
Quote
 

Add comment