Hi guys,
I’m fairly new to flash, I mean I’ve got buttons, motion, etc and some actionscript down pat however I sourced this awesome 3D box from Kirupa and I just need to alter one thing with it.
I’d like to add images to the different faces. I’m guessing loading the images into an array and then calling them is the way to go? I’ve played around with a few thing but taken them all out of the actionscript because they didn’t work.
Could someone please show me how to attach these images? I’ll attach my fla oh and I’m using AS2 at the moment thanks
Here’s the actionscript so far:
// create a scene movieclip to contain all 3D elements
// and center it on the screen.
this.createEmptyMovieClip(“theScene”, 1);
theScene._x = 400;
theScene._y = 300;
// focal length to determine perspective scaling
focalLength = 400;
// 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(1,-1,500);// (n,x,x = stroke weight)(x,n,x = stroke colour(-1=white +1=black))
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 = cx*y - sx*z;
xz = sx*y + cx*z;
// rotation around y
yz = cy*xz - sy*x;
yx = sy*xz + cy*x;
// rotation around z
zx = cz*yx - sz*xy;
zy = sz*yx + cz*xy;
// now determine perspective scaling factor
// yz was the last calculated z value so its the
// final value for z depth
scaleRatio = focalLength/(focalLength + yz - 200); //size of cube (change focallength accordingly)
// assign the new x, y and z
x = zx*scaleRatio;
y = zy*scaleRatio;
// 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 = 0xffffff; //colour of rollover
};
pressFace = function(){
display_txt.text = "You just pressed "+this._name;
};
rollOutFace = function(){
this.col = 0x333333; //colour of face once it’s been rolled over
};
for (i=0; i<6; i++){
emptyFace = theScene.createEmptyMovieClip(“image”+i,i);
emptyFace.col = 0x333333; //colour of idle faces
emptyFace.onRollOver = emptyFace.onDragOver = rollOverFace;
emptyFace.onRollOut = emptyFace.onDragOut = rollOutFace;
emptyFace.onPress = pressFace;
emptyFace.draw = drawFilledSquare;
}
// an object to represent the 3 angles of rotation
cubeAxisRotations = make3DPoint(0,0,0);
rotateCube = function(){
cubeAxisRotations.y -= this._xmouse/-10000;
cubeAxisRotations.x += this._ymouse/-10000;
// 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
this.image0.draw(pts2D[0], pts2D[3], pts2D[2], pts2D[1]);
this.image1.draw(pts2D[4], pts2D[5], pts2D[6], pts2D[7]);
this.image2.draw(pts2D[0], pts2D[4], pts2D[7], pts2D[3]);
this.image3.draw(pts2D[3], pts2D[7], pts2D[6], pts2D[2]);
this.image4.draw(pts2D[2], pts2D[6], pts2D[5], pts2D[1]);
this.image5.draw(pts2D[1], pts2D[5], pts2D[4], pts2D[0]);
};
// make rotateCube happen every frame for theScene
theScene.onEnterFrame = rotateCube;