Hey guys, this is my first post, so first things first, hi!
My problemo- I need to make this cube work correctly. I used one of the tutorials, and tried to adapt it to my needs, but I’ve run aground. I have made the cube different colours, but the sides dont appear to show properly, its like 5 of the 6 sides are hollow, very strange.
Ideally I would like to make the sides one colour, then when clicked, become a different colour. How would I go about doing this? Here is the flash script:
// create a scene movieclip to contain all 3D elements
// and center it on the screen.
this.createEmptyMovieClip(“theScene”, 1);
theScene._x = 375;
theScene._y = 210;
// focal length to determine perspective scaling
focalLength = 300;
// here we set up a function to make an object with
// x, y and z properties to represent a 3D point.
make3DPoint = function(x,y,z){
var point = new Object();
point.x = x;
point.y = y;
point.z = z;
return point;
};
// here we set up a function to make an object with
// x and y properties to represent a 2D point.
make2DPoint = function(x,y){
var point = new Object();
point.x = x;
point.y = y;
return point;
};
// this is a function that will determine whether a triangle
// drawn between the 3 points a, b and c is supposed to be
// visible or not
isVisibleBetween = function(a,b,c){
if (((b.y-a.y)/(b.x-a.x)-(c.y-a.y)/(c.x-a.x)<0)^(a.x<=b.x == a.x>c.x)){
return true;
}else{
return false;
}
};
// here is a function that will draw a side of cube
// based on 4 passed points, first checking if it should
// be drawn using isVisibleBetween on the first 3 points
drawFilledSquare = function(a,b,c,d){
this.clear();
this.lineStyle(2,0,100);
if (isVisibleBetween(a,b,c)){
this.moveTo(a.x, a.y);
this.beginFill(this.col, 100);
this.lineTo(b.x, b.y);
this.lineTo(c.x, c.y);
this.lineTo(d.x, d.y);
this.lineTo(a.x, a.y);
this.endFill();
}
};
// conversion function for changing an array of 3D points to an
// array of 2D points which is to be returned.
Transform3DPointsTo2DPoints = function(points, axisRotations){
// the array to hold transformed 2D points - the 3D points
// from the point array which are here rotated and scaled
// to generate a point as it would appear on the screen
var TransformedPointsArray = [];
// Math calcs for angles - sin and cos for each (trig)
// this will be the only time sin or cos is used for the
// entire portion of calculating all rotations
var sx = Math.sin(axisRotations.x);
var cx = Math.cos(axisRotations.x);
var sy = Math.sin(axisRotations.y);
var cy = Math.cos(axisRotations.y);
var sz = Math.sin(axisRotations.z);
var cz = Math.cos(axisRotations.z);
// a couple of variables to be used in the looping
// of all the points in the transform process
var x,y,z, xy,xz, yx,yz, zx,zy, scaleRatio;
// 3… 2… 1… loop!
// loop through all the points in your object/scene/space
// whatever - those points passed - so each is transformed
var i = points.length;
while (i–){
// apply Math to making transformations
// based on rotations
// assign variables for the current x, y and z
x = points*.x;
y = points*.y;
z = points*.z;
// perform the rotations around each axis
// rotation around x
xy = cxy - sxz;
xz = sxy + cxz;
// rotation around y
yz = cyxz - syx;
yx = syxz + cyx;
// rotation around z
zx = czyx - szxy;
zy = szyx + czxy;
// now determine perspective scaling factor
// yz was the last calculated z value so its the
// final value for z depth
scaleRatio = focalLength/(focalLength + yz);
// assign the new x, y and z
x = zxscaleRatio;
y = zyscaleRatio;
// create transformed 2D point with the calculated values
// adding it to the array holding all 2D points
TransformedPointsArray* = make2DPoint(x, y);
}
// after looping return the array of points as they
// exist after the rotation and scaling
return TransformedPointsArray;
};
// the points array contains all the points in the 3D
// scene. These 8 make a cube on the screen.
pointsArray = [
make3DPoint(-50,-50,-50),
make3DPoint(50,-50,-50),
make3DPoint(50,-50,50),
make3DPoint(-50,-50,50),
make3DPoint(-50,50,-50),
make3DPoint(50,50,-50),
make3DPoint(50,50,50),
make3DPoint(-50,50,50)
];
// each side will be in its own movieclip
// each movieclip will have button actions which
// will display text and change its color
// drawFilledSquare is also given to the clip so
// it can know how to draw itself. First the functions
// for handling the interaction will be defined, then
// added to each clip as its created.
rollOverFace = function(){
this.col = 0xff0000;
};
pressFace = function(){
display_txt.text = "This Page is "+this._name;
};
rollOutFace = function(){
this.col = 0xffffff;
};
for (i=0; i<6; i++){
emptyFace = theScene.createEmptyMovieClip(“Face”+i,i);
emptyFace.col = 0xffffff;
emptyFace.onRollOver = emptyFace.onDragOver = rollOverFace;
emptyFace.onRollOut = emptyFace.onDragOut = rollOutFace;
emptyFace.onPress = pressFace;
emptyFace.draw = drawFilledSquare;
emptyFace.draw = drawFilledSquare;
}
// an object to represent the 3 angles of rotation
cubeAxisRotations = make3DPoint(0,0,0);
rotateCube = function(){
cubeAxisRotations.y -= this._xmouse/3000;
cubeAxisRotations.x += this._ymouse/3000;
// create a new array to contain the _x and _y positions of the
// points in the pointsArray as they would exist on the screen
var pts2D = Transform3DPointsTo2DPoints(pointsArray, cubeAxisRotations);
// draw each side of the cube
with (this.face0){
clear();
lineStyle(5,0x000000,100);
beginFill(0xFFFF99, 100);
moveTo(pts2D[0].x, pts2D[0].y);
lineTo(pts2D[3].x, pts2D[3].y);
lineTo(pts2D[2].x, pts2D[2].y);
lineTo(pts2D[1].x, pts2D[1].y);}
with (this.face1){
clear();
lineStyle(5,0x000000,100);
beginFill(0x99CCFF, 100);
moveTo(pts2D[4].x, pts2D[4].y);
lineTo(pts2D[5].x, pts2D[5].y);
lineTo(pts2D[6].x, pts2D[6].y);
lineTo(pts2D[7].x, pts2D[7].y);}
with (this.face2){
clear();
lineStyle(5,0x000000,100);
beginFill(0x99FF99, 100);
moveTo(pts2D[0].x, pts2D[0].y);
lineTo(pts2D[4].x, pts2D[4].y);
lineTo(pts2D[7].x, pts2D[7].y);
lineTo(pts2D[3].x, pts2D[3].y);}
with (this.face3){
clear();
lineStyle(5,0x000000,100);
beginFill(0xFFCC66, 100);
moveTo(pts2D[3].x, pts2D[3].y);
lineTo(pts2D[7].x, pts2D[7].y);
lineTo(pts2D[6].x, pts2D[6].y);
lineTo(pts2D[2].x, pts2D[2].y);}
with (this.face4){
clear();
lineStyle(5,0x000000,100);
beginFill(0xFF9966, 100);
moveTo(pts2D[2].x, pts2D[2].y);
lineTo(pts2D[6].x, pts2D[6].y);
lineTo(pts2D[5].x, pts2D[5].y);
lineTo(pts2D[1].x, pts2D[1].y);}
with (this.face5){
clear();
lineStyle(5,0x000000,100);
beginFill(0xCC66FF, 100);
moveTo(pts2D[1].x, pts2D[1].y);
lineTo(pts2D[5].x, pts2D[5].y);
lineTo(pts2D[4].x, pts2D[4].y);
lineTo(pts2D[0].x, pts2D[0].y);}
};
// make rotateCube happen every frame for theScene
theScene.onEnterFrame = rotateCube;
Any ideas?
Thanks ever so much!
Piers
