Integrating 3D Image Sequences into Flash

By Tom Costantini

Adobe Flash* has come along way from being just a simple multimedia tool for moving around vector and raster graphics. It's now used in numerous applications-from the online streaming of video and audio to creating sophisticated Web site and gaming experiences for various platforms, including netbooks, PC, and Mac*. Flash is also being used to create complex browser-based massive multiplayer online role-playing games like Club Penguin* and Sifaka World*, and it's even being used as the main animation software for creating television shows like the highly popular Foster's Home for Imaginary Friends* and Skunk Fu*.

This article shows how to integrate 3D image sequences from programs like Adobe After Effects*, Autodesk 3ds Max*, wondertouch particleIllusion*, and many others into your Flash animated projects. Topics of discussion include different reasons why you would want to integrate 3D into your Flash files and the process of automating the import of image sequences onto the Flash stage as well as creating chronological key frames. Other areas covered include the pros and cons of the overall process, specifically focusing on the difficulty of integrating large sequences into the Flash timeline. Finally, the article offers a few tips and techniques that 2A! has developed for integrating 3D sequences and managing the playback within Flash.

Why Integrate 3D?

There are many reasons you may need to incorporate 3D image sequences into Flash, but the most common reason is to enhance your project by adding a more realistic feeling. The addition of 3D elements can make your project or animation a higher-quality production. Also, in some cases, 3D can be helpful in providing a better interpretation of what an actual real-life object is like. For example, 3D may give medical students a better understanding of how the human heart works when they can explore the amazing inner workings of the valves and ventricles from every angle-something that is obviously more difficult to do with 2D graphics.

Getting Started

The first thing you're going to need is a 3D animation. You can use any of several third-party programs to create your 3D animations, including Autodesk Maya*, Adobe After Effects*, Autodesk 3ds Max*, and Electric Rain Swift 3D*, just to name a few. You can also purchase a stand-alone graphics application like particleIllusion*, which has numerous preinstalled 3D effects animations that you can easily modify to your project's specific needs. Whatever software you decide to use, make sure you have the option of exporting the final animation as an image sequence.

Note: This article assumes that you have a basic knowledge as well as some experience using the 3D software of your choosing.

Now that you have a 3D image sequence to work with, let's get started. You can use this process for integrating 3D sequences into the Flash timeline with most versions of Flash; however, for the purpose of this article, you will be using Flash CS4.

Start by launching Flash and creating a new document. Name this movie 3D_Sequence_Test.fla, and save the file to your desktop. Next, click Modify > Document. The document area allows you to customize your Flash movie to your project's exact specifications. Pay particular attention to the Frame rate text box: You want to make sure that the document's frame rate is the same as the 3D image sequence you are importing (see Figure 1). Use a stage setting of 1920 × 1080 with a frame rate of 30 fps-standard settings for high-definition television (HDTV) projects

Figure 1. Your new Flash movie project (All images are copyright Two Animators! LLP)

I recommend creating a new graphic symbol and importing your 3D image sequence into it. Doing so is helpful if you need to move the sequence later to adjust the position of the animation. To do this, click Insert > New Symbol. Name the symbol 3D_Sequence_01. Select Graphic to allow your animation to play within the Flash timeline rather than having to export a .swf file to view the playback. If you decide to import the animation into the main timeline rather than use a graphic symbol, you'll need to select and move every key frame in order to adjust the position later.

Importing Your 3D Sequence

Now, you're ready to import your 3D animation. Open the Flash library and double-click the symbol you just created. (Doing so takes you inside the 3D_Sequence_01 symbol.) Next, click File > Import > Import to Stage (see Figure 2) to open the Import dialog box. From here, you can search for your 3D files and select them for import.

Figure 2. Search for files to import.

Find and select the first image in your sequence, and then click Open. It's not necessary to click the entire sequence of images: Flash automatically detects that your image is part of a sequence and prompts you to import all of the images in the sequence (see Figure 3). Click Yes to import all the images.


Figure 3. Import all your movie images.

Depending on the length of your animation, it may take Flash a little time to import the 3D sequence of images. Flash automatically imports the images and places them in chronological key frames within your symbols timeline (see Figure 4). When your image sequence is fully imported, be sure to save your document.

Figure 4. The fully imported 3D image sequence

Now that your 3D image sequence has been successfully imported into your graphic symbol, you can drag that symbol from the library and place it anywhere on the main Flash timeline. Once placed on the timeline, change the graphic symbols properties from Loop to Play Once, and give that clip the appropriate number of key frames needed to play your animation one time. For instance, if your 3D sequence is 100 frames long, give your symbol 100 frames in the main timeline (see Figure 5). Now, you can add text, images, or sounds to complete your project.

Figure 5. Adjusting the Flash timeline to accommodate your images series


You probably won't experience too many problems when working with smaller image sequences at multimedia resolutions; however, you will definitely run into some issues if you are importing large 3D image sequences into a project with standard television or HDTV resolutions. Depending on your computer's graphics card, processor, and so on, you may run into issues where Flash will run out of memory to complete a task. When this happens, you may find missing key frames within your animation sequence, or the key frames may be there but tinted blue, which is an indication of insufficient memory (see Figure 6). Allocate as much memory as possible to your Flash application before beginning a large import.

Figure 6. Allocate sufficient memory for your project.

Another common problem when using large sequences is frequent crashing. Be sure to save frequently when working with large files, especially when trying to move large movie clips around in the timeline.

Tips and Techniques

I've been working with Flash since its earliest versions and have discovered a few tricks that help avoid the annoying problems I mentioned above. For instance, to avoid the "not enough memory" problem, import shorter segments of the 3D image sequences into separate graphic symbol instances, and then line them up on the main Flash timeline. Here's a quick example: If your image sequence is 300 frames long, separate the images into three 100-frame sequences. Next, using the technique described in the "Importing Your 3D Sequence," import each 100-frame sequence into three graphic symbol instances, labeling them Sequence_01, Sequence_02, and Sequence_03. Finally, drag each graphic symbol onto the main timeline, and line the symbols up one after another in sequence. Flash works much better when you use smaller segments, and you can easily line up your symbols on the timeline using the onion skin and align tools (see Figure 7).

Figure 7. Line up multiple small sequences on the Flash timeline to avoid memory problems.

If you do find yourself in a situation where one or more of your images is missing or tinted blue, you can try the following technique. Instead of attempting to re-import the entire image sequence, delete the missing or corrupt images, and re-import only those elements. Then, you can place them into the missing key frames and use the align tool to make sure they are in the proper position. This technique can save you a lot of time if you're working with a long sequence and have only lost a few actual images.

Similarly, to avoid the frequent crashing that tends to happen when working in Flash with larger image sequences, I often separate the project further into smaller and easier-to-work-with Flash documents. For example, a 3D image sequence that's 500 frames long would be separated into two 250-frame Flash .fla files. Again, this allows animators to work with large files without having frequent memory and crashing issues, and the final product can be easily put together in your favorite video editing software later. (This is most applicable when working with HD-size files.)


Successfully integrating 3D image sequences into your Flash animations can both enhance your project and give it the appearance of being a high-quality production. Using a limited amount of 3D sequences in your multimedia presentations and games is easy, but integrating large sequences can be both tricky and frustrating. Using the right techniques can greatly help ease the process and help your animations stand out from the pack.

About the Author

As the co-founder and creative director of Two Animators! LLP (2A!), Tom Costantini has more than nine years of experience working with highly recognized brands. 2A! is a full-service multimedia studio with clients such as Mattel*, Colgate-Palmolive* Company, USDA, Atmosphere BBDO*, VH1 Music Channel*, Meat Loaf*, Mezco Toyz*, Sifaka Productions*, and the rock group YES*. Tom has also written and co-directed dozens of animated shorts, including a five-minute educational video for Colgate* that teaches kids how to properly brush their teeth and a seven-minute music video for Meat Loaf's "Bat out of Hell III" tour. His creative work has been featured on WPSD Channel 6 News and in Millimeter* Magazine.

For more complete information about compiler optimizations, see our Optimization Notice.



Thank you so much for this tutorial! It helped me immensely.

Looks like everything is going 3D. It's about time!

Add a Comment

Have a technical question? Visit our forums. Have site or software product issues? Contact support.