TUTORIAL August 8, 2000
Creating 3D for Flash Using Rhinoceros
by Jason Lutes
As a 3D artist who has any interest in developing for the Web, you may have explored, or at least wondered about, the possibility of taking your passion for 3D and animation online.
Depending on your needs, Macromedia's (www.macromedia.com) SWF file format (www.openswf.org) provides a great way to deliver a 3D experience to your Web site visitors. Artwork created or processed in Flash, Macromedia's SWF content authoring software, and delivered as an embedded SWF in your Web page, can give you creative possibilities that enhance, or even supplant, the features of other popular 3D technologies for the Web.
Nowadays you can build a 3D look and feel into your site design and still be considerate of the concerns regarding the limited Internet bandwidth for the masses. Let's take a look at how to accomplish this using Macromedia Flash and Robert McNeel & Assoc. Rhinoceros (www.rhino3d.com), one of the many tools capable of creating 3D for Flash. If you don't have access to a copy of Rhino, there is a trial version available for download.
A Little Background
While SWF (pronounced "swiff") is a multimedia metafile wonder horse, it has its limitations just like everything else. It is not the Web 3D panacea, and not even a true 3D file format, but we can do some pretty cool things with it. I want to encourage you, through this tutorial, to explore the creation possibilities. With what you already know, you should not be intimidated by the process of creating 3D in Flash. It is less complicated than other 3D work you may have done, and can be a lot of fun. I'll share a few techniques, then the rest is up to you and your creativity.
Starting a New Project
Open Rhinoceros to start a new document, or start a new document using the default template. In this tutorial we will manually animate the rotation of a basic logo extrusion.
- Open Rhinoceros.
- Choose File, New.
- Select "4 Viewports.3dm" from the "..\Rhinoceros\Templates" folder.
Importing the Line Art
Let's start by importing some vector line art in Adobe Illustrator (www.adobe.com) format.
When bringing in 2D line art for animation purposes, the initial placement in the 3D World Space is important to consider. Rhino, and other similar applications, will import the artwork with its center at the 3D World Origin (x:0, y:0, z:0) and oriented to the accepted ground plane (parallel to the Top viewport). It won't necessarily assign a default transform center, sometimes called a registration point, to what you import. Instead, the point about which transforms occur can be designated dynamically when applying transforms to an object. Knowing this will save you some time, and can work to your advantage if you take steps to place the intended transform center initially at the World Origin.
The artwork that I am using for this demonstration is symmetrical, and will import predictably. If your artwork is not symmetrical, like the one in the following illustration, make sure to enclose it inside of a symmetrical shape whose center identifies the location of your artwork's registration point.
As a final note about using Illustrator artwork, you will find that a common denominator older version of the file format yields more compatible cross-application results in work like this. All this means is that you should save your Illustrator files as version 3 or 4 to avoid potential headaches. Additionally, you need to save line art intended for this purpose with no shape fills and no compound paths.
- Choose File, Import/Merge.
Locate on your hard drive the Illustrator artwork you wish to import, select its filename, and click OK. I am using an inversion I created of my first name.
In the dialog box you're presented with, check the "Fit to default screen" radio button, if it isn't already checked. Scale is not relevant in this tutorial.
Remove any construction aids you use to ensure registration point position for the imported artwork. For my example, I will delete the bounding rectangle.
I am calling mine "extrudedLogo."
- Choose Edit, Layers, Edit to open Edit Layers dialog box.
- Delete all layers but the one on which you've placed the line art.
- Click on the layer name and rename it something descriptive. I am calling mine "extrudedLogo."
- Click Ok.
- Save your work using File, Save.
Setting the scene up for animation
To facilitate manually rotating this object later, we want to create an animation area definition object. This is a construction aid that encloses your entire animation and helps align individual frames in Flash since you will render them as individual files. Rhinoceros has a single camera that will vary its distance from the World Origin as it maintains a fixed distance from your scene. In other words, if your scene rotates, bringing portions of it closer to the camera, the camera moves negatively along its line of sight, in order to maintain the pre-determined fixed distance from objects in the scene. The area definition object we will create prevents this occurrence from throwing us off when we bring the individually rendered frames together later.
This object can be anything from a mere set of registerable points, to a sphere or cube primitive. I like to use three adjacent sides of a cube with the camera looking in toward the intersecting edges. Placing my scene into this container makes me feel the least restricted, and minimizes messy lines to eliminate later.
I also like to reuse a file with my area definition object in it, to prevent all of this set-up in the future. Though we won't do this right now, if you create what I will call a "registrationContainer" file with the area definition object it contains centered at the World Origin, then you only need to scale it up or down, or possibly invert it, relative to its transform center for future projects.
- Choose Edit, Layers, Edit.
- Create a new layer, and name it "registrationContainer" or something else descriptive.
- Put a check in the leftmost column to activate your new object layer, then click OK.
Create a new layer, and name it "registrationContainer" or something else descriptive.
- Turn on the construction grid snap by clicking on the word "Snap" in the status bar.
- Choose Solid, Box, Corner to Corner, Height.
At the "First corner of box" prompt in the command line, type in "50,50,50" then press Enter. This sets your start location for drawing the box.
In the Top viewport click to define a second point at location -50,-50 (Z will still be 50). This is a piece of cake with the snap on (assuming the default grid spacing).
Read the status bar for coordinate information when positioning the mouse pointer to click. If you need to pan to find the coordinates without deactivating your tool, right-click and drag in the viewport.
- In the Front viewport click to define the box height as 100 (Z will read -50).
- Choose View, Zoom, Extents All to see your new object in all the viewports.
- Select the new cube and then choose Edit, Object Properties.
- Uncheck the box for "Show surface isoparms," give it the name "registrationContainer," and click OK.
This will leave your display slightly less cluttered. It will also prepare you organizationally for the future, regarding this object.
- Separate or detach the cube faces by choosing Edit, Explode while the cube is selected.
- Holding the right mouse button down, drag in the Perspective viewport to rotate the cube so the camera is positioned above and to the left of the cube. If you haven't shifted the viewport previously, it may already be in this position.
- Delete the three cube sides closest to you.
This should be easy, since we've exploded the object. Click on the object to select a side, responding appropriately to any "Choose One Object" prompts for situations where the selection choice isn't clear, and press the Delete key.
- Rejoin or attach the remaining three cube sides by choosing Edit, Join, selecting all of the surfaces (by Shift-clicking if necessary), and pressing the Enter key.
- Scale the "registrationContainer" object either up or down so that it just clears the overall area your animation will require. This may help to minimize rendering inaccuracies.
- Choose View, Zoom, Extents All to see your scene maximized in all the viewports.
Continued on page 2. >>
- Choose Tools, Options.
- Select the "General" tab, and lower the "surface isoparm density" to 0.