Click on or near the disembodied head and watch what happens.
Concept
Apple's QuickTimeVR and other 3D technologies have introduced the concept of object movies, video sequences showing an object from various viewpoints around a circle. By linking such views to user interaction, designers can allow users to manipulate an object virtually, turning it this way and that. It's relatively easy to do the same thing with Flash. QTVR and other plug-ins are not required.
Basic architecture
The designer of an object movie must first decide how many views s/he wishes to support. I decided to work with eight views shot at 45-degree rotations: 0, 45, 90, 135, 180, 225, 270, 315. There's nothing magical about this arrangement: I could have used more viewpoints (though eight is probably a reasonable minimum). More views yield smoother rotation but also require more images, hence larger file size.
If I'd been working with real a real object I would have placed it on a turntable and photographed it at each degree of rotation. Predictably I've used Poser instead, rendering each of the eight shots as a JPEG, then making the background transparent by converting to PNG in Photoshop.
To set up basic rotation control, I take each of the eight PNGs and import it to a keyframe within a Movie Clip. I place a stop() action on each keyframe. Since the images form a sequence, moving from one frame to the next virtually rotates the object.
Basic scripting
Here are the scripts that control simple rotation. They're installed on the rotating Movie Clip itself:
onClipEvent(mouseDown){
if(this.hitTest(_root._xMouse, _root._yMouse)){
this.spinner = true;
}
}
onClipEvent(mouseUp){
this.spinner = false;
}
onClipEvent(enterFrame){
if(this.spinner==true) spinDoctor();
}
onClipEvent(load){
function spinDoctor(){
if(_root._xMouse > this._x){
this.gotoAndPlay(this._currentFrame+1);
}
else{
leftSpin = this._currentFrame -1;
if(leftSpin == 0) leftSpin = 8;
this.gotoAndPlay(leftSpin);
}
}
}
The mouseDown and mouseUp handlers set a flag or trigger variable called this.spinner, which is read in turn by an enterFrame handler. This arrangement means that rotation will continue automatically until the mouse button is released.
I've made the trigger variable specific to the Movie Clip in case I want to put more than one rotating object into my main movie. The mouseDown handler is hit tested so so that only clicks within the object will cause rotation. The mouseUp handler is not tested because mouseUp should cause all the rotating objects to stop if there are more than one.
The actual rotation is accomplished in the function called spinDoctor(). This function reads the current mouse position. If it is to the right of the object's midpoint, the Movie Clip jumps to the next frame in its sequence--and stops there, thanks to the stop() action scripted on each frame. I don't need to worry about overrunning the end of the sequence because the property _currentFrame automatically resets itself to 1 when it exceeds the last frame.
Counterclockwise (leftward) movement is slightly more complicated because _currentFrame does not reset in the other direction (go figure). Thus we need to set up a variable called leftSpin and store the current frame index in it, testing it for the zero condition, in which case we bump it back to 8, sending the display back to the high end of the sequence.
Advanced version
The movie you see above has a number of additions and refinements not present in the basic version. The head closest to bottom right rotates in much the same way as the basic head, but the head at left rotates both itself and the righthand head. The head in the middle distance causes all three heads to rotate.
I won't go into the scripting details behind these effects, except to say that they depend on the fact that rotation is accomplished by a function defined on each rotatable Movie Clip. Any function so defined may be invoked by scripts in another Movie Clip.
The architecture of the advanced project differs from the basic project. As you may notice, the heads change their facial expressions each time they rotate around. Each head clip actually contains seven component Movie Clips, each with a different expression. One of these seven is made visible by random selection when the limit of rotation is reached.
You can inspect all these differences by looking at the source file.
Finally, there's an even more advanced implementation of this technique incorporated in the proof-of-concept workshop/splash page files. This one lets you rotate a continuous animation. Click the link above or the image at right to check it out.
Source files
The source file for the basic project is called spinSimple.fla. It can be found in MMShare/headSpin on Crow. The source file for the advanced version, headSpin2.fla, is in the same directory.
