Does anyone know of a good tutorial showing how to make a 3D cube in Flash 8 - I'd like to put a photo on each side of the cube and have it rotate to show each of the pictures...
Thanks
Printable View
Does anyone know of a good tutorial showing how to make a 3D cube in Flash 8 - I'd like to put a photo on each side of the cube and have it rotate to show each of the pictures...
Thanks
Stage.scaleMode = 'noScale';
// 3D rotation is defined by an object
// which has rotation values for each axis
var rotations = {x:0, y:0, z:0};
// The points within the cube are defined
// in an array called boxPoints
var boxPoints = [
{x:-50, y:-50, z:-50},
{x:50, y:50, z:-50},
{x:-50, y:50, z:-50},
{x:-50, y:-50, z:50},
{x:50, y:-50, z:50},
{x:50, y:50, z:50}
];
/* Points
3 - 4
/ /|
0 - 5
| |/
2 - 1
Notice that 2 points are missing, one in the front upper
right and one in the back lower left. These are not needed
since each side only requires 3 points to define its place
in 3D space. Depending on intented image orientation,
though, these points may be necessary for your images to
go and face where you want them to
*/
// create a movie clip for the cube to reside
// place it in the center of the screen
this.createEmptyMovieClip("theScene", 1);
theScene._x = theScene._y = 150;
// generate each image for the cube
createImages();
// define enter frame event for rotating cube and
// positioning images within it
theScene.onEnterFrame = function(){
// adjust axis rotations based on mouse position
rotations.x -= this._ymouse/2000;
rotations.y += this._xmouse/2000;
// transform original 3D points to 2D based on rotations
var points2d = pointsTransform(boxPoints, rotations);
// for each image clip, use movieClip3PointTransform
// to alter its transform matrix so that it matches to
// 3 points within points2d
movieClip3PointTransform(this.image0, points2d[2], points2d[0], points2d[3]);
movieClip3PointTransform(this.image1, points2d[5], points2d[1], points2d[2]);
movieClip3PointTransform(this.image2, points2d[0], points2d[2], points2d[1]);
movieClip3PointTransform(this.image3, points2d[4], points2d[3], points2d[0]);
movieClip3PointTransform(this.image4, points2d[3], points2d[4], points2d[5]);
movieClip3PointTransform(this.image5, points2d[1], points2d[5], points2d[4]);
}
// create images as empty movie clips. Each contains another
// empty movie clip in which each bitmap is attached. Using this
// inner movie clip, any sized bitmap can be used and it will
// stil conform to the size needed in the cube as this clip
// is referenced in movieClip3PointTransform.
function createImages(){
// for each side
var i = 6;
while(i--){
// create an image movie clip
theScene.createEmptyMovieClip("image"+i, i);
// create a contents clip
theScene["image"+i].createEmptyMovieClip("contents", i);
// attach the appropriate bitmap in the contents clip
theScene["image"+i].contents.attachBitmap(
flash.display.BitmapData.loadBitmap("image"+i),
1, false, true
);
}
}
// transforms 3d points into 2d points based
// on the rotation values provided
function pointsTransform(points, rotations){
var tpoints = new Array();
var sx = Math.sin(rotations.x);
var cx = Math.cos(rotations.x);
var sy = Math.sin(rotations.y);
var cy = Math.cos(rotations.y);
var sz = Math.sin(rotations.z);
var cz = Math.cos(rotations.z);
var x,y,z, xy,xz, yx,yz, zx,zy;
var i = points.length;
while (i--){
x = points[i].x;
y = points[i].y;
z = points[i].z;
// 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;
tpoints[i] = {x:zx, y:zy};
}
return tpoints;
}
// this function sets the transform for the image movie clips
// each a, b, c, and d of the transform matrix are simply
// based on the difference of positions of the points
// they need to match with. The image movie clips' contents
// sizes are required to determine how much of that difference
// is actually applied to make the transform match
function movieClip3PointTransform(mc, a,b,c){
// deterimine visibility
mc._visible = pointsIsVisible(a,b,c);
// if not visible, exit function
if (!mc._visible) return;
// set values for matrix using point b as top left
var m = mc.transform.matrix;
m.tx = b.x;
m.ty = b.y;
m.a = (a.x - b.x)/mc.contents._width;
m.b = (a.y - b.y)/mc.contents._width;
m.c = (c.x - b.x)/mc.contents._height;
m.d = (c.y - b.y)/mc.contents._height;
mc.transform.matrix = m;
}
// using a 2D relationship between 3 points
// determine if a 3D face is visible
function pointsIsVisible(a,b,c){
var db = b.x - a.x;
if (!db) return (a.y > b.y == c.x > a.x);
var dc = c.x - a.x;
if (!dc) return (a.y > c.y == b.x < a.x);
return ((b.y-a.y)/db < (c.y-a.y)/dc) != (a.x < b.x == a.x > c.x);
}
Okay...that's a bit more information than I was expecting. Is there any type of tutorial that goes along with that example?
Sorry, but I just have this file...
hello, I've been looking for something like this, but I cannot open the file, is it in Flash8? I only have FlashMX2004.
I was able to put the script into an mc, but nothing happened. I'm sorry, I've been away from Flash for a while, is there something I'm missing?
THanks!
OK... need som ehelp here... Can I some how add a blur effect to the cube (from the file posted)? Havn't worked much with the new effects, but I see the potential...
ericb1 if you go to the source of the cube thing, you'll notice that it's flash 8. flash 2004 doesn't include some of the needed stuff. I'm not sure about the 3d stuff though, I haven't done much with it.
Hi, sorry I am kinda new to Flash/Actionscript but I am trying to learn and use this script to play around with.
Questions: How would I edit this to dynamically load external jpg files instead of having to import them into the library and relink? I read this site: http://www.frontend-multimedia.com/smoothImageLoader/ and tried to insert the code but I am having problems and think I am making it harder than it needs to be.
Also, when I take my own 6 images, import them into the library and relink, the spinning cube is showing them mirrored, as if the front of the images are inside the cube. How do I change that?
To fix the mirrored image issue all you have to do is reverse the order of the arguments for the function "pointsIsVisible(a,b,c)" to "pointsIsVisible(c,b,a)".
this is the kind of thing I was looking for :)
only two things;
- is it possible to change it to a specific rectangle size?
- How can i disable the mouse interaction and have it rotate automatically?
thank you.
:cap: