Page 1 of 3 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.
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.
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:
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
Figure 4 Flash recognizes image sequences
Your preliminaries are done!
Keywords
Flash, QTVR Object Movies, click-and-rotate, rotation, ActionScript 2.0, AS2, ActionScript 3.0, AS3
