Building Click-and-Rotate Content in Flash - Part 1

By: David Stiller

Page 1 of 3

Set for printing


In one implementation of the QuickTime VR format, known as QTVR Object Movies, the user can click-and-drag an image to seemingly rotate it, as if spinning the real-life object on a lazy Susan. This simulated 3D interactivity can improve multimedia curb appeal, and makes for a nifty way to showcase merchandise. But it doesn't stop there: the same basic principle can also bring click-and-drag responsiveness to short video sequences and even user input widgets, such as the click-and-scrub input fields of numerous Adobe dialog boxes (Figure 1).

Figure 1 Adobe often uses click-and-drag input to update text fields

If you're a Flash developer and interested in click-and-drag functionality, you've come to the right tutorial series! Here in Part 1, we'll start by exploring the Flash version of a QTVR Object Movie that rotates an F-15A aircraft. In future articles, we'll work through a common "gotcha" in regard to direction reversal. We'll also load images from external files and explore alternate uses for the same programmatic concept.

Cutting Edge Inspiration

I have always been drawn to the idea of Swiss Army knives. Maybe that's the geek in me. For one, they have tons of tools; for two, every one of those tools is retractable; for three, in spite of all the overstuffed-yet-retractable goodness, Swiss Army knives are visually understated. To me, that's a class act. The silver of the steel, the flat red of the casing, the elegant Victorinox shield logo: it all adds up to the sort of hip design principles typically found in Apple products — iPod, anyone? — only, the Swiss Army product line is over 100 years old. That's pretty neat.

Now, what does this have to do with Flash? Not a whole lot, implicitly — though I will say, I appreciate useful and understated Flash content! In this case, it just happens that I was recently browsing the Victorinox website and discovered a drag-and-rotate widget that displays a number of their knives in simulated 3D. I was intrigued to see that the widget was developed in Flash, and that was enough to inspire me to build a version of my own.

Importing Your Images

In order to simulate a rotating object, the first thing you have to do is acquire a series photos or illustrations of the object from various angles. For real-life objects, this is usually accomplished by turning the item on a lazy Susan and snapping a shot at regular intervals (say, every 10 degrees). Depending on the size of the item, this may or may not be practical from the comforts of a small home studio. If you're rotating a human, for example, you may have to make due by marking an X on the floor with masking tape and instructing your subject to rotate carefully on that spot. If you're rotating a car ... well, I wish you luck! The key to success, in any case, is to keep your angles as close to even as possible. Use a number that divides evenly into 360 (a complete circle), and then stick by that value. If you're using a 3D modeling application to produce your artwork, your image series should be easy to produce perfectly.

Because Flash recognizes sequentially named images, go ahead and use that naming convention for your files. Look inside the ZIP archive that accompanies this tutorial and you'll find a series of JPGs named F-15A-0000.jpg through F-15A-0035.jpg. That's 36 images of a 3D modeled F-15A aircraft at 10-degree intervals.

Note: Special thanks to Roy Baker, a longtime friend and 3D artist, for the image sequence.

Here's how to bring the images into Flash:

  1. Create a new ActionScript 2.0 FLA file and create a new movie clip symbol with the Create New Symbol dialog box (Insert > New Symbol). Enter the name photos into the Name field, then click the OK button to close the dialog box.
  2. Doing so will bring you into the timeline of that movie clip, which temporarily becomes your Stage. Select File > Import to Stage and browse to the first image in the series (F-15A-0000.jpg) and click the Open button to close the Import dialog box.
  3. When you do, you'll see a prompt like the one in Figure 2:

    Figure 2 Flash recognizes image sequences

    Click the Yes button to agree, and Flash not only imports the whole series, but actually places them into sequential keyframes for you automatically (Figure 3).

    Figure 3 Flash creates sequential keyframes for you

  4. If you like, scrub the playhead back and forth to get a rough preview of the user's click-and-rotate functionality. When you're done, select Edit > Edit Document to return to the main timeline. Drag an instance of the photos movie clip from the Library to the Stage. Adjust the document's dimensions to the dimensions of the movie clip — see the Size button in the Property inspector — and then use the Property inspector to give the movie clip the instance name photos, as shown in Figure 4. The instance name is what allows ActionScript to speak directly to this particular movie clip.

    Figure 4 Flash recognizes image sequences

    Your preliminaries are done!

Page 1 of 3 1 2 3 Next

Download Support Files

Flash, QTVR Object Movies, click-and-rotate, rotation, ActionScript 2.0, AS2, ActionScript 3.0, AS3