The 3D Box creates a rectangular area around the 3D object for mouse control. You may wish to create your own mouse sensitive area instead. You may also want to change the mouse behaviour. For example, you may wish to rotate the object on mouse move instead of on mouse drag.
In this tutorial we'll be using the 'box.fla' movie as created in the Controlling the dimensions tutorial.
1. Select the 3D Box component in the 'box.fla' movie and uncheck the 'Allow mouse control' checkbox. This disables the default mouse behavior and will allow you to control it yourself.
2. Create an empty square
button (make it have a hit area only):
3. Place this button on top of all the objects in the "front" movieclip and make it the same size as the elements in the "front" movieclip:
4. Add the
following ActionScript code to the button:
on (rollOver) {
rootObject.activeMouse = true;
}
on (rollOut, dragOut) {
rootObject.activeMouse = false;
}
//rootObject - link to the root 3DBox instance.
//activeMouse - public parameter of the 3DBox, indicates when the 3DPlane rotates
with the mouse.
5. Copy this button with the actions and paste it into the remaining five side movieclips. Ensure that you adjust the button size accordingly to match each movieclip.
6. The 3D element should now react when the mouse is dragged on the object surfaces only and now when the mouse is dragged anywhere outside of the object itself.
7. Finally, remove
all of the actions from the 3D Box instance as well as the "show me front" and "show me back" buttons. Add the following code to the 3D Box instance instead:
onClipEvent (enterFrame)
{
this.rx += (x0-this.v3.px)/30;
this.ry += -(y0-this.v3.py)/30;
this.rz += (z0-this.v2.py)/80;
if (this.rx*this.rx+this.ry*this.ry+this.rz*this.rz<.001) {
this.rx = this.ry = this.rz = 0;
}
}
onClipEvent (load) {
//store the initial position
x0 = this.v3.px;
y0 = this.v3.py;
z0 = this.v2.py;
//push it gently in the beginning
this.rx = this.ry=5;
}
Now your visitors will notice this cool 3D feature immediately!