This is 3d movie, so the first step is to setup 8 points 3d data to represent a cube in 3D.
// top face
p0 = {x:50, y:50, z:50};
p1 = {x:50, y:50, z:50};
p2 = {x:50, y:50, z:50};
p3 = {x:50, y:50, z:50};
// botton face
p4 = {x:50, y:50, z:50};
p5 = {x:50, y:50, z:50};
p6 = {x:50, y:50, z:50};
p7 = {x:50, y:50, z:50};
pointArray = [p0, p1, p2, p3, p4, p5, p6, p7];
// p0 to p8 , the 3d points of a cube;
There is no perspective effect, so to render a 3D data, we just let z off. These 8 points construct into a cube that has 6 faces. So, we need 6 skewing movieClip to cover them. In fact, before we can cover these 6 faces with pictures, for practise, we can try to use 6 square dark clip to cover these 6 faces. Later, we just attach graphics to the dark squares to make them texturized.
clipArray = new Array();
for (k = 0; k < 6; k++)
{
duplicateMovieClip (obj, "obj"+k, k+1);
var clip = _root["obj"+k];
clip.mc.holder.attachMovie("mv"+k, "mov", 1);
clipArray[k] = clip;
}
Well, if you don't know how to skew a square to conform 3 corners of a quadrangle, you should check the tutorial about skewing. Ok, if you understand what I said, you should try making a cube now. Make 6 faces to cover the 6 faces of the cube.
Next step, I will briefly explain the math about "rotation" of 3d data.
Below is a function where:
 x1,y1 is the original x,y data
 "center" is the rotation axis point in the format of point {x:??,y:??}
 "dAngle" is the rotation in degrees that we want to apply.
It returns a point data format {x:??,y:?/} which is the new coordinates data.
center = {x:0, y:0, z:0};
function rotateZ (x1, y1, center, dAngle)
{
var dy = y1center.y;
var dx = x1center.x;
var orgAngle = Math.atan2(dy, dx);
var hypo = Math.sqrt(dy*dy+dx*dx);
var newAngle = orgAngle+dAngle*(Math.PI/180);
var xx = hypo*Math.cos(newAngle)+center.x;
var yy = hypo*Math.sin(newAngle)+center.y;
var pt = {x:xx, y:yy};
return pt;
}
The above equation is a rotation in 2D plane. It is useful when we do rotation in 2D. It also can be applied to 3D plane. Well, we need to extend this function a little. We need batch rotate a bunch of points data. In this case, we need rotate 8 points data. So, I would call it 8 times. Also, we need the rotation along Y or X axis. The equation is simply difference of x,y,z.
function groupRotateZ (pointArray, dAngle)
{
for (k = 0; k < pointArray.length; k++)
{
var pt = rotateZ(pointArray[k].x, pointArray[k].y, _root.center, dAngle);
pointArray[k].x = pt.x;
pointArray[k].y = pt.y;
}
}
function groupRotateY (pointArray, dAngle)
{
for (k = 0; k < pointArray.length; k++)
{
var pt = rotateZ(pointArray[k].z, pointArray[k].x, _root.center, dAngle);
pointArray[k].z = pt.x;
pointArray[k].x = pt.y;
}
}
function groupRotateX (pointArray, dAngle)
{
for (k = 0; k < pointArray.length; k++)
{
var pt = rotateZ(pointArray[k].z, pointArray[k].y, _root.center, dAngle);
pointArray[k].z = pt.x;
pointArray[k].y = pt.y;
}
}
So, we setup 8 points. We skew 6 square clips to cover the 6 faces of the cube. This is updated when we rotate these 8 points data along x,y or z axis. Later, we make it fancy by adding shadow according to Z data and attaching pictures to the square movieClips.
If you can do a rotating grey cube, then it is finished.
This is the final result, with textured faces:
