Incorporating 3D Models into Web Banners

In this example, you will learn how to:

Step 1
Create a new document with a transparent background.

Detailed Instructions
Start e-Picture or choose File > New to bring up the New Document creation window. In this window, enter 400 for both the Width and the Height, and select Transparent for the Background. Then press the New button.

Your blank canvas is indicated by a gray and white checkboard pattern (the checkerboard pattern indicates transparency).

Step 2
Add a blue sky background to the image.

Detailed Instructions
Before creating the 3D animation, add a nice blue to white gradient that will provide a blue sky backdrop for your work. To do this, select the Rectangle tool () from the toolbox. In the Rectangle Tool Inspector, set the stroke to transparent and the fill to the gradient. To set the stroke to transparent, select the Stroke tab and click on the transparent button ().

To set the fill as a blue to white gradient, select the Fill tab and click on the gradient button (). Next, expand the Gradient Composer to reveal the gradient composition area. In the Gradient Composer, set the beginning gradient color to blue. To do this, double-click on the first color well which sits just below the gradient at the far left. In the Color picker that comes up as a result of the double-click, set the RGB values to (0,0,255) and the Alpha to 255. The last color well should be white by default. Close the color picker.

Now, draw a rectangle that covers your entire canvas. Using the Pointer tool, select and rotate the gradient. To do this, click on the gradient, and, using your mouse, grab any portion of the bounding box for the gradient rectangle except the resizing handles. Rotate the gradient until the blue end is on top.

 
 

Step 3
Create a new layer.

Detailed Instructions
In order to work more easily with 3D models, it is convenient to work with them in a separate layer. To create a new layer, press the Options button in the Layers panel and choose New. Your new layer, Layer 2, by default sits on top of the existing layer, Layer 1. Since you will be working in Layer 2 for the next couple of steps, make sure that Layer 2 is selected (highlighted) in the Layers panel

Step 4
Add a 3D model to your document.

Detailed Instructions
With e-Picture, you can import NewTek LightWave 3D models and use those to quickly and easily add 3D effects to your web graphics. e-Picture can read LightWave 3D's .lwo file format. Even if you don't own LightWave 3D yourself, numerous web sites have LightWave 3D models available for you to browse through and download. One such web site, and the source for the model used in this example, is 3D Cafe.

In the 3D example folder is a LightWave 3D model for a Boeing 747. Drag and drop this model into your View to import it. Depending on your CPU speed and RAM, this model may take a couple of seconds to import.

Step 5
Familiarize yourself with 3D object manipulation.

Detailed Instructions
In many respects, 3D models behave just like any other object in e-Picture. For instance, you can select 3D models by clicking on them, and resize and rotate them using the bounding box.

In addition, 3D models can be rotated freely using your mouse. To do this, double-click on your 3D model to enter 3D rotation mode. You will know you are in 3D rotation mode when the model is shown without any specific details in white. Then, click on the model and while holding your mouse button down, move your mouse slowly around to get the feel for how the 747 responds to your movements. Free rotation gives you complete freedom to adjust the model along any axis to achieve just the right perspective.

Furthermore, you can restrict movement to only one axis for more precise control and fine adjustments. Use your mouse and the following control keys to restrict movement to a single axis:

  • To restrict rotation to the x-axis, hold down the Control key in combination with the mouse.
  • To restrict rotation to the y-axis, hold down the Alt key in combination with the mouse.
  • To restrict rotation to the z-axis, hold down the Shift key in combination with the mouse.

To exit rotation mode, double-click elsewhere on the canvas. The 3D look of the model is restored, and you are returned to standard editing mode.

 

Step 6
Create your 3D animation.

Detailed Instructions
The first step in creating a 3D animation is to increase the total number of frames. Thirty frames is a good number to start with. To create a 30 frame animation, change the Total frame count value in the Animation panel from 1 to 30 and press Enter.

Now it is time to let your creativity take over. Create your own animation using the 747 model you just imported. You may want to give a little thought as to what you want the jet to do before you start. Once you have something in mind, it is just a matter of implementing the desired effect. You will probably want to iterate through the following steps as you work:

  1. Select a frame in the Animation panel.
  2. Position and manipulate the 747 as you want it to appear in this frame.
  3. Preview your animation up to this point by pressing the Play button in the Animation panel.

Here are a few helpful hints to get you started:

  • Let e-Picture do most of the work! If you want the 747 to move in a straight line, just set the initial and final positions and perspectives. e-Picture will produce a smooth flight path complete with incremental perspective changes in 3D for you.
  • Don't forget to change the size of the 747 to add depth to your animation. The farther away the plane is supposed to be, the smaller it should be and vice versa.
  • Remember that e-Picture keeps track of how the 747 is rotated and creates intervening frames accordingly. So, the outcome of a 90 degree roll and a 270 degree roll may look the same in the final frame, but the animations will be drastically different!

Step 7
Testing and modifying your completed animation.

Detailed Instructions
Once your animation is complete, run it to view the results of your work. If you find that the animation runs too quickly during a certain segment, one option is to add a frame. This will slow things down slightly and make the animation run more smoothly for that segment. To do this, select a frame in the animation and choose Animation > Insert Frames... from the View window. Alternatively, you can change the location of the 747 in any frame. In this case, e-Picture will insert a key () in the current frame and automatically recompute all of the object positions both before and after the altered frame until another key is encountered.

Conversely, if your animation runs too slowly during a certain segment, you can remove frames (but be careful not to remove keys!). This will speed up the animation at the expense of having the 747 move in larger increments. To do this, select a frame in the animation and choose Animation > Delete Frame from the View window. You also have the option of changing the location of the 747 in any frame as described above.

Step8
Save and export your animation and generate the accompanying HTML file.

Detailed Instructions
Save your animation in e-Picture format to preserve all of the object, layer and animation information by selecting File > Save.

Next, export your image as an animated GIF by choosing File > Export > Animated GIF. The resultant Animated GIF export dialog provides you with numerous options which allow you to export a file that meets your particular needs. Check the option for "Generate HTML" and press the Save As... button. You are prompted to enter a name and a directory for your GIF. By checking the Generate HTML check box, a .html file with the same name as your GIF file is also created in this location.