A Flash Developer Resource Site

Results 1 to 10 of 10

Thread: Rotating 3D Cube With Pictures

  1. #1
    Senior Member foochuck's Avatar
    Join Date
    Aug 2000
    Estero, FL

    Rotating 3D Cube With Pictures

    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...


  2. #2
    Junior Member
    Join Date
    Feb 2005
    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

    // 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;
    // 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
    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);

  3. #3
    Senior Member foochuck's Avatar
    Join Date
    Aug 2000
    Estero, FL
    Okay...that's a bit more information than I was expecting. Is there any type of tutorial that goes along with that example?

  4. #4
    Junior Member
    Join Date
    Feb 2005
    Sorry, but I just have this file...
    Attached Files Attached Files

  5. #5
    Join Date
    Jan 2004
    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?


  6. #6
    Junior Member
    Join Date
    Feb 2007
    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...

  7. #7
    Senior Member
    Join Date
    Feb 2005
    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.

  8. #8
    Junior Member
    Join Date
    Jun 2007
    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?

  9. #9
    Junior Member
    Join Date
    Feb 2008
    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)".

  10. #10
    Junior Member
    Join Date
    Jun 2008

    what I was looking for but i have 2 questions

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Click Here to Expand Forum to Full Width

HTML5 Development Center