back

An easy way to bring 3D content into your Adobe Flash projects

by Dave Klein

For more than a decade, the idea of creating 3D animations with Adobe Flash software has intrigued designers and developers. In early 2000, Swift 3D and Vecta 3D started a frenzy with prerendered 3D vector graphics for Flash. Not so long ago, we started getting our first glimpses of real-time 3D rendering engines running in Adobe Flash Player. Since that time, we have witnessed some amazing 3D projects, websites, and games. However, developing these 3D experiences for Flash has typically been the domain of only the most advanced ActionScript developers.

FreeSpin3D is a tightly integrated 3D extension for Adobe Flash software. FreeSpin3D provides a visual workflow that's easy enough for even novice Flash designers to understand, while offering an ActionScript API that enables advanced developers to build complex 3D projects. In this tutorial, we create a 3D project with interactive mouse and keyboard behaviors without writing a line of code. Then we look at how to animate 3D models with the Animation timeline in Flash, using motion and rotation tween functionality.

What you need

To follow along, you need Adobe Flash CS4 Professional (download the trial) and the FreeSpin3D extension for Flash CS4. You will find a 15-day trial version of FreeSpin3D, along with the model and source files in the freespin_tutorial.zip file (3.5 MB).

To install the FreeSpin3D extension:

  1. Unzip the files you downloaded.
  2. Open Adobe Extension Manager CS4.
  3. Choose File > Install Extension and navigate to the file you downloaded. Click Open, and the extension installs in a few seconds.

You can access the FreeSpin3D control panel from Flash CS4 Professional by choosing Window > Other Panels > FreeSpin3D (see Figure 1).

access the FreeSpin3D control panel

Figure 1. Accessing the FreeSpin3D control panel from Flash.

Import your 3D model

To import the 3D model, open the FreeSpin3D control panel in Flash, click the Import button and navigate to the Eggship FL3D model that is included in the tutorial files you downloaded. You will see the items that make up the model appear on the Stage. The nice thing about FreeSpin3D models is that once they are imported, they become movie clips and they behave the same way other movie clips do.

If you open the Library, you will see the folder of assets that make up the FL3D model (see Figure 2). You are probably not familiar with the FL3D format, but FL3D is to 3D models what the FLV format is to video. It is a format that is specifically used for Flash and is created using a conversion process on other model types. The movie clip with the distorted-looking bitmap is actually the data file for the 3D model. The other bitmap is the texture that is applied to the model. This can be edited at any time and will automatically be updated on the model. You can even animate textures using video, motion tweens, or interactivity (which I cover in the second installment of this article, which will appear in the next issue of the Edge).

assets that make up the FL3D model

Figure 2. Assets that make up the FL3D model.

At this point, you should see your 3D model live on the Stage. If you don't, click the Live Preview button in the FreeSpin3D control panel. It looks like an eyeball (see Figure 3). Use the trackball at the top left side of the FreeSpin3D control panel to rotate your model on the Stage. If you click the Wireframe button, you will see the polygons that make up the 3D geometry of the model. Click the Reset button to get your model back to its default rotation and use the Texture button to get out of Wireframe mode.

The FreeSpin3D control panel.

Figure 3. The FreeSpin3D control panel.

Apply interactivity

Now that your model has been imported, you have several options available to you. To start, let's apply some simple interactivity. No coding is required. This step enables you to interact with your 3D model using mouse and keyboard controls. To do this, expand the Behaviors menu in the FreeSpin3D control panel. You will see check boxes for the two simplest interactions: mouse and keyboard control (see Figure 3). Select either one or both, and you are finished. (Ignore the warning message when selecting these options — it is not applicable to your current project.)

To test your movie, press Control+Enter. Click and drag with your mouse to rotate the model and then verify that your keyboard arrows also rotate the model properly. You can publish this SWF file on the web — no supporting files or libraries are required to make this SWF file work properly.

Next, close the test window and uncheck the mouse and keyboard boxes. Open the Actions panel in Flash if it isn't already open by choosing Window > Actions. The code generated in the next step will be automatically added to the Actions panel.

At the bottom of the FreeSpin3D control panel, click the Add Behavior button (see Figure 3). The FreeSpin3D Behaviors panel launches (see Figure 4). The Behaviors panel lets you control sensitivity, acceleration, and more. I encourage you to play around with the options to see what's possible. For this tutorial, select Movement from the Pick Behavior fly-out menu to apply the Movement behavior. Then select Fly from the Select A Preset drop-down menu. For the behaviors to work on your model, name the instance of the model in the upper right corner of the FreeSpin3D Behaviors panel. I named mine "egg."

Control your 3D animation with the FreeSpin3D Behaviors panel.

Figure 4. Control your 3D animation with the FreeSpin3D Behaviors panel.

To make the default speed settings a little slower and to make the model bank as it is turning, scroll down to the Speed settings (see Figure 5). Decrease the Max Speed setting to 5, and decrease the Acceleration setting to 5.To make the object bank as it turns, set the Z Rotation setting in the Max Angular Speed area to 2.5, and set the Z Rotation setting in the Angular Acceleration area to 10. (Increasing this number increases the amount the model banks when turning.)

Refining the Speed settings for the animation.

Figure 5. Refining the Speed settings for the animation.

If you want to see the code that is being generated by the FreeSpin3D API, click the Show Code button. Then click OK.

If the Actions panel is not open, you will be prompted to open it when you press the OK button because the code will automatically be generated and applied to the Actions panel. You are not required to do any coding, but you can edit the numbers from within the Actions panel once the code has been generated, or you can go back to the FreeSpin3D Behaviors panel and use the sliders and input boxes to apply new settings.

Press Control+Enter to test your movie. Turn your model with the left and right arrow keys. Use the spacebar to fly forward and the Control key to fly backward (assuming you kept the default keyboard settings for controlling the flight of the model).

Animate the model using the timeline in Flash

On your timeline, you now have an Actions layer that was created by FreeSpin3D. Delete that layer or drag it to the trash can. Now you can animate your model using motion and rotation tween.

First, you need to create a standard motion tween by starting your model in frame 1 on the left side of the Stage. Select the frame and choose Insert > Motion Tween, or create the motion tween using the method you prefer. In the final frame of the motion tween, move the model to the right side of the Stage. Then with the Selection tool, bend the path to create a U-shaped path for this simple animation (see Figure 6).

Creating a motion tween for the animation.

Figure 6. Creating a motion tween for the animation.

Go back to frame 1 and align your model to the downward path using the rotation trackball in the control panel as if it were beginning its downward trajectory (see Figure 7).

align your model to the downward path.

Figure 7. Aligning the model to the downward path in frame 1.

Then go to the final frame and align your model to the path as if it were flying upward off the Stage (see Figure 8).

align your model to the path.

Figure 8. Aligning the model to the path in the final frame.

Expand the 3D Rotation Frames section of the FreeSpin3D control panel, and you will see the rotation settings for the first and last frame of your animation. You can preview the animation frame by frame by clicking the Play All button in the control panel or by testing your movie by choosing Control > Test Movie. FreeSpin3D handles all the rotation tween for you.

Let's add one more keyframe at the bottom of the path to make it look a little better. Scrub the timeline until the model is at the bottom of the arc path (see Figure 9). Rotate the model into the position it would realistically be in if it were flying this path. FreeSpin3D automatically adds your new keyframe to the tween. If you have trouble getting the proper rotation with the trackball, you can click the Reset button to return your model to the default rotation setting and try again.

Adding an additional keyframe to make the flight path more realistic.

Figure 9. Adding an additional keyframe to make the flight path more realistic.

Test your movie one more time and make any tweaks or add rotation keyframes wherever you like in the timeline to get the look you want. You publish FLA files created with FreeSpin3D the same way you publish any other FLA files. No other files are required on your server if you are publishing to the web. All you need is the SWF file.

In the second installment of this article, I show you how to create more 3D effects with FreeSpin3D. In the meantime, see some examples of FreeSpin3D.

‹ Back


Dave Klein is an online marketing consultant based in Boulder, Colorado. He has worked with several Adobe partners focusing on 3D software and technologies since early 2000. Visit www.kleinnewmedia.com.

.