Quick Tip: Incorporate a 3D Vector Animation in a Flash Game

In this tutorial, you’ll learn how to take a 3D model from Blender and use it in your Flash games using Swift3D.

Final Result Preview

Take a look at the preview below. It’s just like one of those car-driving games you see all over the Internet —well, no, not exactly. This car is 3D, or so it seems to be.

Overview

Surprise. There is actually no 3D here. The car is 2D vector art. The 3-dimensional effect was achieved by showing different frames of a turnaround animation of the car. In this Quick Tip, we’ll cover how to take a 3D model, animate it and export it as vector art so that it can be used in Flash. To do so, we’ll use a combination of three programs: Blender, Swift 3D and Flash.

If you’re not familiar with Swift 3D, I suggest you watch the video tutorials offered at Swift 3D’s official website, erain.com. You can become accustomed to the program in an afternoon.

Step 1: Exporting from Blender

We’ll start out with our model in Blender. It’s made up of several parts, which I have accordingly named Body, Windows, Tires, etc… and each part has a material assigned to it with a corresponding name.

To open the model in Swift 3D it needs to be in .3ds format. To export it as such, select it (all the parts), then go File > Export > 3D Studio and save it to your computer.

Step 2: Importing in Swift 3D

Open up Swift 3D. To import our newly exported model, go File > New from 3DS. Find the file and click Open.

Step 3: Adjusting Materials

You might have noticed that the materials don’t look exactly the same in Swift 3D as they did in Blender. Now we’ll take a look at how we can modify these materials.

Let’s say we want to modify the car’s Body material in order to make it shinier (and so that it will pick up specular highlights). First, select the Body mesh in the hierarchy window. In the Properties Panel, select Material and double-click on the preview icon. A window with the Body material properties will open. To make it shiny, play around with the Highlight Strength and Highlight Size (and hit Generate Preview to see changes). When you’re happy with the results, click OK.

Step 4: Lighting

Now we need some lighting to brighten up our scene. In the Galleries window, under the Lighting Schemes tab, you can find pre-made lighting schemes. For this demonstration, I will use the “Default” lighting scheme. To apply it, drag and drop it into the scene. If you want, you can adjust it using the Lighting Scheme Trackball.

Note: The lighting scheme named “Default” is actually not the default lighting scheme!

Step 5: Animation

It’s time to get our car spinning. Just as with the lighting schemes, you can find pre-made animations under the Animations tab in the Galleries window. We will use the ER-Horiziontal Left animation. Again, drag and drop it onto the model.

A spinning animation will be created over 20 frames. If you scrub the timeline, you will see the animation in the Active viewport.

Step 6: Camera

We need a camera through which we can view our model. In the main toolbar, click the Create Target Camera icon. Position the camera as shown in the picture. Change one of the viewports to the Target Camera view and click on it to make it the Active viewport.

Step 7: Export Preview

Click on the Preview and Export Editor. Make sure that the Vector button is selected. Here, you can play around with the Fill and Outline settings. These are the settings I used.

When you’re done, click Generate All Frames. Play the animation a few times to make sure it looks just as you want it to. It should look similar to this:

Step 8: Extending the Animation

For our purposes, 20 frames is not enough for a smooth animation, so we need to make it longer. Go back to the Scene Editor. Select the car and click the Animate button. Expand the animation to 120 frames.

Step 9: Final Export

Enter the Preview and Export Editor again. Without changing any of the previous settings, click Generate All Frames. Go watch a movie or two, and when you come back, the animation will hopefully be rendered out completely. To export it, make sure that the Target File Type under the General tab is set to “Swift 3D Flash Importer”, then click “Export All Frames” and save the .swft file.

Your animation should look similar to this:

Step 10: Importing in Flash

Open up Flash. To import the file, go File > Import > Import to Library. Find the file and open it. Flash will import it as a movie clip in the Library.

Note: You can also select “Import to Stage”, which will import each frame to the main timeline. While this might be helpful in some cases, it’s usually more convenient to have it imported as a movie clip.

Step 11: Suggestions

In addition to the steps above, here’s a short list of things you can do to improve the final outcome:

Cast shadow: To create a cast shadow, create a plane in the Scene editor, scale it up and place it just below the car. Edit its material giving it a Highlight Strength of 0 (this will ensure that it won’t pick up highlights). Afterwards, in Flash, delete Colors (Stationary) layer. You will be left with a cast shadow!
Windows: To improve the windows’ material, you can make it shiny (like in step 3) or reflective (if you have some sort of background).
Outline: In Flash, you can create a thick outline around the car. This will give it a cartoonish look, and more importantly, make it easier to see when it’s scaled down and used in a game.

Also, it’s a lot cleaner than Swift 3D’s rendered outlines.

If you follow these suggestions, you will end up with something similar to this:

Conclusion

We’re done! Now that you have the turntable animation of the car, you can program it to create a game. Here are a couple of links that might help you out with doing so: