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.
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.