Main Menu
| New and improved 3D Product Box of the future! |
| Flash Dev |
For my first post in the 3D section of the Work Shop, I thought I would start off simply. I will be using away3D (see intro to away3D) to create a product box in flash for use on the web. Now I am sure you have all seen these "product boxes" being used on websites all over the net. Software companies and Internet providers love them. They help lend a tangible feel to a purely digital product. Here is an example of what I am talking about For instance, say you need to purchase antivirus software for your grandmother's new laptop, what you will do is load up your browser and perform a search for your preferred antivirus. Said antivirus company's website will load up and their latest offering will be detailed alongside a nice picture of the programs packaging. You will then enter you credit card details and download the software. There is no actual packaging as their is no physical product. But these "virtual" product boxes are the most natural way to present something that doesn't exist to any of our 5 senses. As you can see by the example, although the boxes look acceptable as a product's face, they are now so widely used that they have little or no benefit in separating one company's offering from the next. So how do we take an old idea inject some new life into it? No, not Botox... realtime 3D! To acheive the results I am looking for, I will be using a few different software packages. 3D Studio Max for the modelling and/or animation, Adobe Photoshop for the texturing and of course, Flash for the rendering and output (trial versions of all of these packages can be downloaded from their respective websites for free). Before I start I just need to highlight that this is not a tutorial, but rather a process of steps taken to acheive a certain result. These are experiments so I only really know what the end result will look like once I am done. The final Flash files, textures and models will all be included at the end of the article. For the sake of continuity, all models should be copied into the primitives folder of your away3d directory. Step 1 : Making the boxIf you read the Introduction to Away3D article, then you will know that away3D has it's own classes for basic 3D primitives (spheres, cubes, cylinders etc). I will however be creating my own box model in 3D Studio Max and exporting it as an actionscript 3 class for use in Flash. This is just a simple box primitive as seen below.  Step 2 : Making the skinBefore exporting the model of the box using the AS3 geometry exporter script for 3Dsmax, I ran an UnwrapUVW on the box which allows me to create a "skin" for my box using a single image. I took the resulting UVW template into Photoshop where I created the artwork for all 6 sides of the box.  Step 3 : Bringing it all together in FlashI wont get too much into the coding side of things, but if you are interested you can check out my final FLA file (which is included in the zip file) for all of the code used. Also note that for the files to run on your local machine, you will need to download the latest version of away3D. Everything you see in the SWF below was done using Actionscript and the timeline was not used at all. The model was loaded from an external file and the texture was applied from the library. After that a dynamic light was added to the scene and the model rotated a small amount on the Y-axis on every EnterFrame event. The Result is as follows, an animated real time rendered 3D product box with dynamic lighting in your browser. Which do you prefer? I know which one I think looks better :) So that is it for this one. you can download the files for this experiment here. In the next article in this section I will be looking at creating a bit more of a complex model while also playing around with some of the standard Flash filters. |
Comments
Aw, this is a really qualitative post. In theory I'd like to write like this too - taking time and real effort to make a good article... but what can I say... I loiter alot and never seem to get something done.
Thanks for all your help.
PD: This time I did click on the "notify me of follow-up comments" checkbox, and it didnt notify me
It allows you to drag and drop your models into the program and edit and export directly to flash, no programming knowledge needed. It can handle your lighting texturing and modeling which it sounds like will be exactly what you need.
BTW. Where are you linking your files? if it's not too much trouble I'd like to have a look at them so I can learn about the code to import the exported files to 3dSMax.
Thank you for all your help.
If you have a copy of 3dsmax installed, have a look at this plugin which you can install and use from within Max to export directly to an AS3 class without having to code anything up : seraf.mediabox.fr/.../...
If you do not have 3DSMax installed but only have the 3DS files, Away3D can load import these natively. go to the away3D website (www.away3d.com) and have a look at the away3d.loaders.Max3DS class in their reference documentation for a better idea of how to use it.
If you still have trouble getting your models loaded into your movie, head over to groups.google.com/.../... where a very experienced and friendly community will help you out with anything you need.
Kevin