Explaining Advanced 3D in Flash - Flash Tutorials

Flash Tutorials

3D, Actionscripting, Animation, Special & Text Effects, Dynamic, Games, Basics, Interactivity, Math Physics and Web Design tutorials


Flash & 3D

Flash and 3D. These two topics have raised many thoughts and comments over the last few years. I remember spending far too many hours with Flash 3 tracing over 3D objects to create a spinning cube. Then there was creating a 3D page turn in Flash 4. However with the advent of Swift 3D (by Electronic Rain) the making of these 3D animation's has become a lot easier for us designers.

Swift 3D provides us with a good environment for developing 3D based animation's, however there are some major drawbacks with this great software. The most obvious issue is that Swift 3D does not come with a CUBE tool. The primary reason for Swift 3D was to animate 3D Text, and company logos (which can be imported from Freehand or Illustrator and extracted). I find that I'm very seldom asked to animate simple objects, but more commonly asked for complex animation's, some of which come from television 3D.

I'm not going to write a tutorial on using Swift 3D - the manual does a very good job of that. What I'm going to talk about is developing slightly more complex animation's, esp importing 3DS files, and creating slightly more complex 3D, and I'll have a little comparison of 3D files.

3D Formats

One thing to remember - Flash is NOT a 3D application. Any 3D item in Flash is simply a flat object with shading to create the 3D illusion. Technically a good artist could recreate this using gradient fills in Freehand or other such applications.

When a file is exported from Swift 3D as an SWF the RAViX Processor (or renderer) breaks the object down into triangle based "vectors" and colours each of these panels with either a gradient fill or a flat fill.

The developers of Swift in their wisdom decided that 3DS was a good format for importing as many people use 3D Studio Max for creation of 3D Animation. This is of great benefit for those who are familiar with 3D Studio Max and those who can afford the package ($7 000 for a single user license). However for many designers 3D Studio Max is very difficult to learn, let alone create complex models in. (Note:- There are other applications that will export as 3DS, e.g. Poser.)

For those who are new to 3D there is help out there. There are many databases of 3D models in the 3DS format. This means you can search for just about anything you want and import that into Swift 3D, and export as SwF (Try http://www.3dcafe.com or http://directory.google.com/Top/Computers/Graphics/Software/3D/Models/)

BUT be warned, there is a drawback to this, some of these models are created of high end resolution dependent TV or Movie animation's, and they can have far too many panels for serious use in Flash. This creates SwF files that can be rather large in file size. One hint: When exporting files you have created in 3D Studio Max, apply OPTIMIZE to the objects to drop out uneeded panels.

Complex Wave - I

Here's an example of some complex 3D.

<click for a bigger view (80K unoptomized)

The fern shape was created in Flash 5, exported as adobe illustrator paths, and imported into 3D Studio Max. A few tweaks were made then it was extruded into a 3D shape. The wave animation was created using some of the mesh warping tools available in 3D Studio. While Swift 3D is a simple enough program to use, creating any decent animation is a little hard. One of the great things about 3DS files is that you can script a rather complex animation in 3D Studio Max. This animation data is saved in the 3DS file, along with camera and lighting positions, and used by Swift 3D. However, space warps, mesh warps and other modifiers in 3D Studio Max are NOT available in Swift and WILL NOT transport.

Complex Wave - II

So how do you create a complex Wave using a modifier in 3D Studio Max? You do it the hard way. Take time to set up the animation so you don't have too many frames to create. You'll notice that the fern above goes into the screen then comes back out. Well the animation is 50 frames long, but there are only 25 frames of fern, the second 25 frames are just the first 25 played backwards. (Don't be scared to skip frames out. The original animation was 100 frames, but I only exported every second frame).

Set up your animation in 3D Studio Max using modifiers etc., export the individual frames as FRAME01.3DS (to export individual frames you have to move the animation slider in 3D Studio to the next required frame), open in Swift 3D and export. Yeah it takes a while, but the results can be brilliant. The same file above as a QuickTime movie was around 2.3megs and it wouldn't scale to fit the screen as was required. When 3D Studio Max exports the 3DS file, it exports the current stage of the animation. So, if you have animation's that are created with modifiers, make sure you can see them animating in the 3D Studio Viewport and then you will be able to export those frames as 3DS....(confusing? sorry....) You have to do this as like I said, Swift 3D does not contain modifiers so it can't do it for you.

Spinning & Turning - I

<click for a bigger view (75K unoptomized) <click for a bigger view (152K unoptomized)

These images were created and animated in 3D Studio Max, the colours, and reflections were adjusted all in before exporting as 3DS. They were both exported as Area Shaded and as you can see from the file size the outlines on the right image add a huge amount of data to the file. (Area shading fills the entire area with a gradient fill to emulate 3D)


Spinning & Turning - II

<click for a bigger view (45K Static Image)

The previous two animations images where created off the same 3DS file. The Static Image, as shown above, is so large (45k) due to the high number of panels. The animation is also huge due to the Mesh shading, in which each little triangle panel is filled with a gradient to create 3D. NOTE this animation was created as a demo and the 3DS was NOT Optimized. This was done to keep the curves as nice and crisp as possible. I would normally optimize this, which tends to turn curves slightly more square looking. (Okay I lied, there is no animation on the left....know why? Because it's 2.5megs!!!

Final Comments

Some things to remember:

  • 3D Scenes, Trees, and Flowers tend to be made up of MANY veracities, which makes them not ideal for turning into 3DS.
  • Optimize 3D Objects in 3D Studio Max before exporting as 3DS.
  • Create complex 3D Animation's in 3D Studio Max before exporting as 3DS.
  • Set up lighting, and camera animation's in 3D Studio Max as these WILL be usable in Swift 3D.
  • Use of space warps, mesh effects and other specialized 3D Studio Max items will not work in Swift 3D, however exporting individual frames as 3DS can allow you to cheat these effects.

Go to it download some 3DS files off any of the many resource sites around, and try, try, try. Maybe Flash Kit can start to offer a 3D Model section where users can place 3D Animation's exported from Swift for others to use....much like 3DCafe has 3D models?

Download the files used in this tutorial. Download (317 kb)

0 comments

Post a Comment

Subscribe to: Post Comments (Atom)