Working with 3D Graphics
Although Flash has no true 3D art tools, with a little time and effort, you can effectively simulate depth. If you have other 3D applications, you’ll learn how to export optimized EPS or bitmap sequences to use as Movie Clips in a Flash movie. Because interest in 3D Flash artwork is growing, developers are including direct .SWF output capabilities with their applications.Introduction to 3D Modeling
Computer monitors have only two dimensions, width and height, which makes working with three-dimensional objects a bit unnerving for someone who is a novice to 3D-computer modeling. That’s because 3D artwork occurs in what is called 3D space, which is a simulation of real space. Threedimensional space has three axes: X (width), Y (height), and Z (depth). While conceptualizing three dimensions may not be difficult, controlling views of objects and cameras, or rotating objects with a mouse and keyboard can prove to be an arduous task. Likewise, most 3D graphics are displayed on flat computer screens. So, what makes a graphic appear to have depth in a two-dimensional space? for an example see below.
Art history teaches us that several factors can give the illusion of depth on a flat surface. All of these factors are central to the arrangement of subject matter within a frame, also known as the composition. Most artwork achieves the appearance of depth through the use of perspective, wherein the proportion of the composition’s foreground and background spaces lend a perceived depth. With linear perspective, parallel lines are drawn as converging lines, usually to a single vanishing point on a horizon line . The diminution of scale is integral to the concept of linear perspective. Objects closer to the viewer appear larger, while objects farther from the viewer appear smaller. Similarly, atmospheric perspective adds to a composition’s sense of depth by reducing the visibility of objects as they approach the horizon.
The left diagram is a two-dimensional representation of space, whereas the right diagram depicts three-dimensional space.
In most 3D computer applications, you can also choose a viewpoint known as orthographic perspective, in which objects and scenes are shown from a strict mathematical viewpoint without any sense of depth. Technically, because orthographic views do not use perspective, this viewpoint should be referred to as orthographic projection. That’s because an orthographic view renders an object or scene with mathematical accuracy instead of perspective accuracy. Some applications may also have an isometric view. As far as 3D computerdrawing programs are concerned, isometric and orthographic views are the same.
The line drawing illustrates the concept of linear perspective.
The image created in MetaCreations Bryce 3D shows linear and atmospheric perspective. vanishing points. horizon line
Linear perspective of a cube on the left; orthographic projection of a cube on the right
With the advent of photography, depth-of-field effects have also become factors that can be used to contribute to a sense of perceived depth within a two-dimensional plane. Depth of field refers to the range of clear focus in either the foreground or the background of a composition. A low depth of field means that objects appear in focus only within a short distance range from the viewer . For example, if a camera lens is focused on a person with mountains in the distance, then the person is in focus, while the mountains are not. A high depth of field means that objects can be farther apart from one another while maintaining the same focus clarity. Using the same previous example, a high depth of field enables both the near person and the distant mountains to appear in focus.
Most 3D-creation programs not only strive to render scenes with accurate perspective, but also strive for a sense of near-photographic realism. Given the nature of Flash’s vector-based framework, most highly textured 3D artwork won’t mesh well with small vector file sizes. Nevertheless, simpler 3D objects and animations can be imported into Flash while maintaining reasonable file sizes (less than 60KB). The 3D programs use the following processes or enhancements to add realism and depth to artwork:
- Extruding. This is the process of importing a two-dimensional vector graphics file (such as Illustrator EPS) into a 3D modeling program and giving depth to an otherwise flat object usually by extending vertices or edges along the Z axis.
- Lighting. The most important factor in creating the illusion of spatial depth is adding and positioning light sources. A well-lit 3D model emphasizes planar depth; poorly lit 3D objects look flat .
Low depth of field on the left; high depth of field on the right
A flat 2D graphic on the left; an extruded 2D graphic on the right
A well-lit 3D object on the left; a poorly lit object on the right
- Texture Mapping. Textures (images of patterns or surface materials) can be stretched across an object’s surface(s) or faces. Through the use of color contrast, pattern, and opacity, texture mapping gives an object unique, realistic attributes.
- Wireframe. A wireframe is the most basic model structure of a 3D object. It renders objects using lines to represent the edges of polygons and faces .
A texture-mapped object
A PostScript view of an extruded letter R in Adobe Dimensions; a wireframe view of the same model
- Inverse Kinematics. Kinematics is the study of the motion of objects or of a system of objects. Inverse kinematics (IK) refers to how motion in one area of the system effects the movement of other parts in the system. For example, in respect to the human body, movement of the hip necessarily involves repositioning the legs to accommodate that motion. Early 3D programs didn’t incorporate IK very well. Most high-end 3D applications such as 3D Studio MAX have advanced control of IK effects, while most prosumer 3D applications, such as Curious Labs Poser, have some level of IK support. Although IK support doesn’t necessarily affect the three-dimensional feel of an object, it adds automated realism to animated figures and complex objects.
Several cross-platform 3D file formats exist: .3DS (3D Studio), .DXF, and .VRML. However, Flash 5 only recognizes two-dimensional .DXF files, such as those created by CAD programs. Consequently, for most 3D artwork imported into Flash, we recommend that you export either .EPS/.AI files (on the vector side) or .PICT/ .BMP files (on the raster side) from the parent 3D application.
A variety of 3D applications are on the market, and they vary greatly in price and quality. Although a program such as Kinetix 3D Studio Max offers the broadest range of advanced controls, you might not need (or want) to take the time to learn it. Simpler programs, such as Adobe Dimensions or Curious Labs Poser, sacrifice the finer controls but offer the ease of use that Web designers expect from other graphics applications. Without further introduction, let’s get started with some simple yet effective 3D work created in Flash with the help of FreeHand or Illustrator.
Using Adobe Dimensions to Create 3D Objects
Many Flashers create 3D designs and animations for Flash movies with Adobe Dimensions 3.0. That’s because Dimensions offers an intuitive interface for elementary 3D design. If you’ve never used a 3D program before, then Adobe Dimensions is a great place to start. The interface has familiar tools found in other 2D drawing programs. These include Pen, Text, and Object Tools. Although Dimensions’ support of animation isn’t as advanced as that of other applications (such as 3D Studio MAX or even Macromedia Extreme 3D Version 2) you can use it to create great-looking 3D animations to use in Flash while maintaining small file sizes! This section shows you how to turn an existing 2D design into a simple yet effective 3D sequence that can be imported into Flash.
How to extrude vector artwork
In Dimensions 3.0, you can create 3D artwork from scratch using the various drawing tools in the toolbox. You can also use Dimensions to generate dimensional artwork from any vector file, such as .EPS or .AI files. In this section, we describe how to extrude an imported Illustrator file.
- Make sure that you have installed Dimensions 3.0 on your Windows or Macintosh computer. Open the application.
- In the Render Mode drop-down menu of the Untitled-1 document window, choose PostScript.
- Open the Extrude window by choosing Operations➪Extrude or Command➪ Ctrl+E. This command or shortcut can hide the Extrude window as well.
- In the lower-left corner of the Extrude window, click the New Base button.
- With the Extrude base window active, import an .EPS file that you want to turn into animated 3D artwork for Flash. To do this, choose File➪Import (Command+Option+I or Ctrl+Alt+I), and select a vector file. (You can use the crossHairs.eps file in the ch31 folder on the Flash 5 Bible CD-ROM.)
In the Extrude window, enter a value in the Depth text field. By default, all values in Dimensions are in points. After you enter a value, click the Apply button in the lower right-hand corner of the Extrude window . A value of 75 points was used for the crosshairs sample file.
Using the Extrude window, you can convert a two-dimensional vector file to a three-dimensional object.
With the object selected in the document window, open the Camera window (Window➪Show Camera), which controls the view angle of the 3D window. Enter 75 for the Lens value, and 0 for Lon, Lat, and Roll. Open the Move window (Operations➪Transform➪Move). Choose Absolute for the Coordinates property, and enter 0 for X, Y, and Z values. Click Apply. If you’re using the crosshair sample file, your object should resemble below.
After applying a new Camera view and object coordinates, the crosshairs object has a much more dynamic look.
The next step is to generate a series of still images from Dimensions to use in Flash. (The process is similar to using the Auto-Distort command in the Paint window of Macromedia Director.) To do this, we use Dimensions to record the position and scale of the object as it is rotated and moved in the 3D window. A start point and an end point are specified. Then Dimensions creates the in-between keyframes for the sequence. With the 3D object selected and in a starting position, choose Operations➪ Generate Sequence. The alert box shown below appears.
After you select the Generate Sequence command, move, scale, or rotate the 3D object to a new position or size. The Operations menu item remains highlighted to remind you that you are generating a sequence.
Now, move and rotate the object to the final position of the animation. Note that you won’t be able to preview the animated sequence. So, if you want to be precise, use any of the Operations➪Transform windows to specify the end position. To create a rotating crosshair, open the Rotate window (Operations➪Transform➪ Rotate) and enter 180 for the Y axis. Click Apply. Choose Operations➪End Sequence to stop the recording process. The Sequence dialog automatically opens, and you can specify the number of frames (in the sequence), the file type, and the filename prefix.
Specify the image output settings in the Sequence dialog.
To keep the final Flash file size as small as possible (for optimal transmission over the Web), try to limit the number of frames to as few as possible. Depending on the range of motion and scaling, you may be able to use as few as five or six frames. For the 180-degree crosshair rotation, a series of 12 frames was generated by Dimensions in the Adobe Illustrator (.AI) format, which Flash can import.
Most 3D applications have a filename prefix property that enables you to specify the name that precedes the numbers in the sequence. For example, if you use crosshair as the filename prefix, then the first frame’s filename is crosshair0000. You can insert spaces or underscores (for example, “crosshair “ or “crosshair_”) to separate the number from the prefix.
Bringing a sequence into Flash
Animating Figures with MetaCreations Poser
With a Flash movie (.FLA) open, create a new layer and import the Dimensions sequence.
MetaCreations Poser 4.0 is a 3D figure-generation and animation application. With Poser, you can create lifelike human and animal characters to use in illustrations or animations. Poser 4.0 sports a sophisticated user interface with dozens of options for every tool and component. In this section, we walk you through the process of making a running mannequin figure that is then imported into Flash. While you need not be an advanced user of Poser to understand this example, you will benefit from reading the Tutorial section of the Poser 4.0 User Guide (which ships with the Poser software package) before starting this example. However, if you don’t want to concern yourself with advanced functionality, it’s possible to simply read and follow the guidelines in the following paragraphs.
Creating a walking figure in Poser
Here’s how to create walking motion in Poser:
- If you open Poser with its default factory settings, a clothed male figure should appear in the center of a 350 × 350 view window. Using the Translate/Pull tool, position the figure to the upper portion of the 350 × 350 window. The figure’s shadow needs some room to fully display during the walk cycle.
- Next, open the Poser figure and object libraries through the Window➪ Libraries command (Shift+Command+B or Shift+Ctrl+B).
- In this window, select Figures, then Additional Figures, and then Mannequin.
- Access the Mannequin figure for the Additional Figures library.
- Click OK to the following dialog. This alert box appears whenever you change the current figure. Do not check the Keep Current Proportions option.
- Your Poser screen should now resemble below.
The new mannequin figure on the stage
- Open Window➪Walk Designer (Shift+Command+S or Shift+Ctrl+S). In the Walk Designer window, set the Blend Styles Run slider to 52 percent. Click the Walk button to preview the current settings, and then select different angles ( 3⁄4, side, front, top) to see the walk from varying viewpoints. Click Apply. You’ll then be presented with frame settings for the animation. Make sure the End Frame is set to frame 10 and that the Walk in Place option is checked. See Figure below. Click OK, and Poser generates a complete walk cycle with ten frames.
- To preview your figure’s new walk, open the Animation Controls window (Shift+Command+ P or Shift+Ctrl+P) and drag the playback head through each frame. If you press Enter or Return, Poser plays back the entire frame sequence. To stop playback, press Enter or Return.
- Before outputting the animation frames, make a new folder on a local drive to store the files. Do this now, because Poser won’t give you the option to create a new folder during the save process.
- Next, to output the animation, go to the Animation menu, and select Make Movie (Command+J or Ctrl+J). Set an end time of eight frames. Because Poser counts time zero as a frame, we’ll have nine frames. Furthermore, because frame 10 is exactly the same as frame 1, we won’t need it in Flash. For this example, use Display Settings. This means the exported frames look the same as the figure appears in the workspace of Poser. (You can add more detailed texture and bump maps to figures in Poser, but that’s beyond the scope of this tutorial.) Also, if you want smoother-looking edges in the bitmap sequence, make sure the Antialias option is checked. If you’re using the Mac version of Poser, you’ll want to use PICT files as the Sequence Type instead of QuickTime. On the PC version, you’ll want to use BMP or TIF files. Use the TIF format if you need to use an alpha channel. Refer below for the correct settings.
The Walk Designer in Poser 4.0 can create full-motion walks for any Poser figure.
Animation controls Playback Head Current Frame
Export settings for Poser image sequences
- Click OK to proceed to the Save dialog, which prompts you to select a folder and filename for the sequence. Because Poser automatically adds the number extension to your filenames, just type the base filename. For example, typing mannequin generates successive filenames beginning with mannequin.0001 on the Mac or mannequin_0001.tif on the PC. Click Save, and Poser renders this little nine-frame animation. Save your Poser project and exit Poser.
Preparing Poser sequences for Flash
It would be nice if we could just directly import our .PICT or .TIF sequence into Flash, but first a number of small nuisances must be addressed. To begin with, on the Mac, Flash doesn’t seem to like the way Poser creates .PICTs if you’re using a PC, see the following note. This means that if you import a .PICT from Poser directly into Flash, Flash displays the file as a collection of horizontal and vertical lines. Furthermore, Poser creates inverted alpha channels, while Flash expects straight alpha channels, with black indicating hidden areas and white indicating shown areas. So, in order to make the Poser files read correctly in Flash, the alpha channels of the Poser .PICT files must be inverted and the file format saved correctly. To facilitate this transition, we’ve created a Photoshop action (located on the CD-ROM) that properly converts a sequence of Poser files into images that Flash understands.
To load this Photoshop action, first pop the Flash 5 Bible CD-ROM into your computer. Then launch Adobe Photoshop (you need version 4 or greater) and open the Actions palette (Window➪Show Actions). Make sure that the Actions Palette is not set to Button Mode. Then, on the palette’s pop-up menu, choose Load Actions. Browse to the Photoshop folder in the ch18 folder on the Flash 5 Bible CD-ROM, and choose Flash 5 Actions.atn.
Now choose File➪Automate➪Batch. In the Set property, choose Flash 5 Actions, and select Poser Alpha Inversion for the Action property. For the Source, choose the folder that you specified for your Poser sequence files. For the Destination, choose Save and Close. Now click OK, and Photoshop fixes the .PCT or .BMP alpha channels so that Flash recognizes them properly. There’s also a Poser Alpha + Image Inversion action that can be used to invert the RGB channels as well as the alpha channels this is useful for converting Poser’s white silhouettes into black ones.
Depending on your Photoshop color profile setup, you may encounter a dialog that interrupts the automate process. If you are presented with a Missing Profile dialog (as shown in Figure below), choose Don’t Convert. Photoshop continues with the automated processing of your image sequence. Note, however, that, if you receive this message for the first file, you’ll keep getting it for every file in the sequence. Just stay with it and repeatedly press Return (on the Mac) or click Don’t Convert when the Missing Profile dialog box pops up.
Depending on your specific color settings in Photoshop 5 or 6, you may receive a Missing Profile alert when an image without an ICC profile is opened.
If you’re using the PC versions of Poser, Flash, and Photoshop, then you can skip to the next section. The Macintosh version of Flash won’t recognize the 0001, 0002, or 0003 extension as an image sequence. You need to add a .PCT extension to the end of each of your .PICT files. This can be a time-consuming task for large sequences, so let the FileMunger shareware application do all the work for you. FileMunger is a great little tool that is used to batch process file-creator types, filename extensions, and file date names. After you’ve installed the application, run FileMunger, and click the Filename Extensions button on the left . This changes its operating mode to exclusively work with filename extensions.
Use the Filename Extensions mode of FileMunger to automatically add extension suffixes to a group of files.
Close the FileMunger application, and rename the actual FileMunger application file to FileMunger.pct. This causes FileMunger to work in what is called Filename Extensions mode, meaning that it adds the .PCT extension to any file (or group of files) that is dropped on the FileMunger application icon. Now open the folder with the mannequin sequence, select all the files in the window by pressing Command+A, and drag them to the FileMunger application icon. FileMunger adds a .PCT extension to all your files. Thus, mannequin.0001 is now mannequin.0001.pct. Now the Mac version of Flash recognizes the Poser images as a sequence.
FileMunger can perform timesaving operations such as adding extensions to multiple files.
Importing Poser sequences into Flash
Okay, now we can get back to Flash. Open an existing Flash (.FLA) file or create a new one. Make a new symbol (Insert➪New Symbol; Command+F8 or Ctrl+F8), and set it to the Movie Clip type. Give it the name mannequin or something similar.
Automatically, Flash changes the stage to Symbol Editing Mode. Choose File➪Import (Command+R or Ctrl+R), browse to the folder containing the Poser sequence, and double-click the first filename in the sequence (such as mannequin.0001.pct or mannequin_ 0001.bmp). Now click Import. You should receive an alert from Flash 5 that asks if you want to import all of the images in the sequence. Click Yes to this dialog, and Flash imports all the images associated with this sequence. When the import is completed, as indicated by the progress bar, the mannequin symbol has nine frames and each of these frames is a keyframe.
Next, because Flash auto-aligned the top-left corner of the imported bitmaps to the center of the symbol, we need to change the symbol center to match the center of the bitmaps. Click the Edit Multiple Frames button on the timeline, and drag the End Onion Skin marker to frame 9. Select all the bitmaps in the symbol by pressing Command+A or Ctrl+A, or by using the Edit➪Select All command. Press Command+K or Ctrl+K to bring up the Align dialog; set both vertical and horizontal align properties to center, check the Align to Page option, and click OK. Your Movie Clip should resemble below.
The Mannequin Movie Clip Onion Skin Markers Edit Multiple Frames
Now you need to make a critical decision. Is it better to trace the bitmap files imported from Poser? Or are there advantages to leaving them as is? If you want to preserve the detail currently displayed by the imported sequence, then tracing the bitmap makes the Flash .SWF larger. If you want to minimize detail and can accept a loss of detail in your imported sequence, then use the Modify➪Trace Bitmap command on each frame of the mannequin Movie Clip symbol at whatever quality settings you desire. But before you leap to tracing those bitmap files, here’s a surprising comparison: The mannequin example was exported from Flash as is (with default .SWF settings) with a file size of 54.5KB. But the traced bitmap mannequin (using 10 for the Color Threshold, 8 for the Minimum Area and Normal for both Curve Fit and Corners) exported with a file size of 83.6KB!
Note that the traced bitmap version doesn’t even look as good as the regular bitmapped version. Granted, we could have used many other procedures in Poser, Photoshop, FreeHand, or Streamline to optimize the quality of the bitmap or its converted vector counterpart. The point here, however, is that vector equivalents aren’t always better than the original bit-for-bit raster graphics. (Here’s a related example of a situation in which the vector equivalents would have been better: a silhouette figure generated in Poser with one solid color fill. Tracing those bitmaps would have yielded better results because the figure has only one color and a relatively simple outline. Remember, for the most part, vector graphics are ideal for illustrations with solid color fields and lines. Raster or bitmap graphics are ideal for continuous tone or photo-quality images.)
Now you have a running mannequin Movie Clip that can be referenced from your Flash Library and placed anywhere in your Flash movies. Once placed in a scene, this Movie Clip can be scaled, rotated, or tweened to any position or size.
Exporting Animations from Kinetix 3D Studio Max
Discreet 3D Studio Max (3DS MAX) is one of the most popular, powerful, and professional 3D modeling and animation programs. The R3.1 release does not support direct export to Flash .SWF files. It can, however, export to the .EPS vector format. This file format can be imported into Flash, but the file sizes and vector information are usually too weighty for easy Internet transmission. Digimation’s Illustrate! 4 and Ideaworks3D’s Vecta3D-MAX plug-ins are available for 3D Studio MAX, enabling the program to export straight to Flash files. The following expert tutorial shows you how use Swift 3D, a standalone program with similar functions, enabling you to export optimized Flash files from 3D models.