A Flash Developer Resource Site

Results 1 to 20 of 20

Thread: 3D Image cube with shifting images? HELP!!!

  1. #1
    Junior Member
    Join Date
    Mar 2007
    Posts
    26

    3D Image cube with shifting images? HELP!!!

    I don't know anything about 3D and its use in Flash. I have, however successfully inserted a 3D cube into a website I am building for a client. I was wondering if any of the 3D experts on this forum might be able to help me with the following:

    Is it possible to make a 3D cube out of movieclips instead of imported jpgs? What I am trying to do is create a cube that can display 12 images, each side would shift between two different images every 30 seconds.

    If you can help me with this I would be eternally grateful because you'd be making my client so happy, and me as well, as I will not look like an utter failure. You guys rock in advance and I look forward to hearing a response.


  2. #2
    Student
    Join Date
    Apr 2001
    Location
    -
    Posts
    4,756
    http://sandy.media-box.net/blog/
    http://blog.papervision3d.org/tag/demos/

    are you talking about simple animations or realtime interactive 3d- cubes?

  3. #3
    Junior Member
    Join Date
    Mar 2007
    Posts
    26
    Here is the cube I am talking about: http://riddleinthedark.com/ellman/

    I am not sure if it is a simple animation or a interactive hoosywhatsit. As you can see, the sides of the cube are all logos of tv stations that my client has worked for. She wants to be able to display another six logos, of another six production companies she has worked for. I offered up the possibility that we might be able to have each side shift between two logos as it spins.

    Is this possible?

    As far as I am able to understand, the coding I took from the tutorial will only compose a cube out 6 imported jpgs. If I turn the jpg into a GRAPHIC, the coding will ignore it. If I turn the jpg into movieclip, the code ignores it.

    Do you know if what I want to do is possible? If so, would you know how? Thank you so much for your prompt respons, btw. - A

  4. #4
    Junior Member
    Join Date
    Mar 2007
    Posts
    26
    Also, is it possible to turn the sides of the cube into links?

  5. #5
    Student
    Join Date
    Apr 2001
    Location
    -
    Posts
    4,756
    basic concept (looke here first):
    http://ericlin2.tripod.com/cube/cube2004t.html

    but if you can better use the Flash8 transformation matrix (look at the bottom for the skewing part)
    http://www.senocular.com/flash/tutor...ansformmatrix/

    and yes if you write the code yourself of course you can do whatever you want to do with it,- like using MovieClips for the faces instead of images,.- add a button inside the movieclips to open "links"

    but if you are not into coding search on the net or here on flashkit for a free flashmovie or tutorial that has what you need. The following keywords might help:
    skew, cube, 3d, rotate

  6. #6

  7. #7
    Junior Member
    Join Date
    Mar 2007
    Posts
    26
    Thank you so much for replying so promptly. I greatly appreciate it. Unfotunately, I'm not much of a coder. What I would need is for somebody who is a coder to look at the code I am using and show me how to replace the jpgs with the movieclips. Are you up to the task? I can't imagine it is super difficult, but then again, what do I know? Nothing, especially when it comes to coding.

    If anybody knows how to compose a 3D code out of 6 square shaped movie clips, I would be so grateful. I'd be happy to share the code I am currently using.

  8. #8
    Student
    Join Date
    Apr 2001
    Location
    -
    Posts
    4,756
    Are you up to the task?
    I am not the one who has to do the job,- sorry but better start learning or start at least with something concreate where this forum (including me perhaps) can help you with.

    I am currently developing a block navigation with perspective distorsion but the prototype wont be finished within the next weeks- even if I give you what I already have for that it wont help you much since you seem more to be the designer type.

    why dont you get as I said one of these flash files,- pick the one wich has less code than the others and post the code here. I´m pretty sure that the dynamic laoded images can be replaced with movieClips that are on the stage- without the need of changing that much code

  9. #9
    Junior Member
    Join Date
    Mar 2007
    Posts
    26
    Here is the code I am using for the cube... any ideas?


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

  10. #10
    Student
    Join Date
    Apr 2001
    Location
    -
    Posts
    4,756
    it seems that the cube is 100³ see:
    Code:
    {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}
    and the center is in the center of the cube (-50,50,-50,50,...)- but I guess that´s clear

    further on it says:
    Code:
    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
    );
    }
    }
    ... remove that code and instead either create a movieClip on the stage with the instance name "theScene" or if it already is there use that one- and create inside of that 6 individual new movieClips and give them the instance names:
    image1
    image2
    image3
    image4
    image5
    image6


    each of those 6 movieClips needs some content (draw a rectangle...) with the excact dimension of 100*100 pixels.

    check if THIS already worked for your (beeing now able to have movieClips instead of the images) - and report

  11. #11
    Junior Member
    Join Date
    Mar 2007
    Posts
    26
    THANK YOU SO MUCH FOR THE ADVICE!!! I'm gonna try it tomorrow morning. I will report back after I try it. Once again... thank you!

  12. #12
    Student
    Join Date
    Apr 2001
    Location
    -
    Posts
    4,756
    just found this, you need to remove these lines as well
    Code:
    this.createEmptyMovieClip("theScene", 1);
    theScene._x = theScene._y = 150;
    because you´ll create that movieClip manually in Flash (not like here with AS). Otherwise your Flash created movieClip would disappear and replaced with a new empty one that was then created via AS here

  13. #13
    Junior Member
    Join Date
    Aug 2006
    Posts
    12
    this code come from senocular,but it used bitmap
    I have a question .if i want use movieclip.how to change the code

  14. #14
    Student
    Join Date
    Apr 2001
    Location
    -
    Posts
    4,756
    what you ask for doesn´t make that much sense logic wise,- I mean if you just change it with mc´s then how do you mean it?- mc´s from librarry, 1 mc with different frames each a side,...

    anyway here if you use a linkageID in you library containing a mc with different frames (6 frames) each showing another side:
    Code:
    function createImages(){
    	var i = 6;
    	while(i--){
    		theScene.createEmptyMovieClip("image"+i, i);
    		theScene["image"+i].createEmptyMovieClip("contents", i);
    		theScene["image"+i].contents.attachMovie("linkageId","image"+i,i);
    		theScene["image"+i].contents["image"+i].gotoAndStop(i);
    	}
    }
    but MAKE sure the content of each frame doesn´t go over or below 100*100 pixels because that´s each face size

  15. #15
    Junior Member
    Join Date
    Aug 2006
    Posts
    12
    thank you for your code.i have known how to do

  16. #16
    Junior Member
    Join Date
    Aug 2006
    Posts
    12
    now i have new problem.i deleted the top and bottom movieclip.but there is nothing but black behind the other four movieclips.if i want add a movieclip behind it .what should i do?

  17. #17
    Junior Member
    Join Date
    Aug 2006
    Posts
    12
    i don't know if you know what i said.this is my file
    Attached Files Attached Files

  18. #18
    Student
    Join Date
    Apr 2001
    Location
    -
    Posts
    4,756
    ah,- you are chinese - mihau
    you forgot to linkage all movieClips from the library,- that´s why you are missing to faces, here have a look it should be like this:


    maybe increase the framerate (fps) of your movie as well,- maybe to 42 fps so it runs smoother.

  19. #19
    Junior Member
    Join Date
    Aug 2006
    Posts
    12
    i haven't said clearly.what i want like this file.it came from senocular.there are two side in every movieclip.and every side is different movieclip.but the movieclip or picture should be 100*100.if i want make it in my previous file 3dcubeB.fla.what i should do .by the way,thank you for your help again
    Attached Files Attached Files

  20. #20
    Junior Member
    Join Date
    Aug 2006
    Posts
    12
    the problem has solved

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