Flash 3D mouse-controlled cube

December 10, 2007 by Emanuele Feronato
Filed Under Flash, Users contributions •  

Today it's the time to publish a demo/prototype of a 3D mouse-controlled cube sent by Andre Marianiello.

It was made with code from the 3D tutorials on www.kirupa.com that I formatted into easy-to-use classes. Easy to make simple changes if that would be more agreeable to you. I will send source code if you want, but you don't have to publish it (unless, of course, you want to).

As usual, Andre commented the code to make it more readable for us all

This is the main actionscript

PLAIN TEXT
ACTIONSCRIPT:
  1. import Space3D.*;
  2. #include "customFunctions.as"
  3. //to hold clips
  4. this.createEmptyMovieClip("space", 1);
  5. //center origin
  6. space._x = Stage.width / 2;
  7. space._y = Stage.height / 2;
  8. //hold x,y,z values of the 8 points to make a cube
  9. pointsArray = new Array();
  10. pointsArray.push(new Point3D(-100, -100, -100));
  11. pointsArray.push(new Point3D(-100, -100, 100));
  12. pointsArray.push(new Point3D(-100, 100, -100));
  13. pointsArray.push(new Point3D(-100, 100, 100));
  14. pointsArray.push(new Point3D(100, -100, -100));
  15. pointsArray.push(new Point3D(100, -100, 100));
  16. pointsArray.push(new Point3D(100, 100, -100));
  17. pointsArray.push(new Point3D(100, 100, 100));
  18. //attach 8 clips to space's 0,0 (center of screen)
  19. for (i = 0; i <8; i++) {
  20.     attachedObj = space.attachMovie("ball", "ball" + i, i);
  21. }
  22. //move camera towards you (comment out the next line if you want to be inside the cube
  23. Camera3D.z = -200;
  24. rotateCube = function () {
  25.     //rotation of cube determined by _xmouse and _ymouse
  26.     var xrot = this._ymouse / 900;
  27.     var yrot = -this._xmouse / 900;
  28.     //rotate all the points
  29.     Universe3D.rotatePointArray(pointsArray, xrot, yrot, 0);
  30.     //convert the 3D points to 2D points
  31.     screenPoints = Universe3D.toUniverse2D();
  32.     for (var i = 0; i <screenPoints.length; i++) {
  33.         var cur_ball = this["ball" + i];
  34.         //attach a ball to each point
  35.         screenPoints[i].moveClipHere(cur_ball);
  36.     }
  37. };
  38. space.onEnterFrame = rotateCube;

And this is the content of the customFunctions.as file

PLAIN TEXT
ACTIONSCRIPT:
  1. Object.prototype.toString = function() {
  2.     //set empty string to be displayed
  3.     var string = "";
  4.     //cycle through properties and functions
  5.     for (var i in this) {
  6.         //if not a function
  7.         if (typeof (this[i]) != "function") {
  8.             //add the property name and value to the string
  9.             string += i+":"+this[i].toString()+", ";
  10.         } else {
  11.             //else add the function name and "Function"
  12.             string += i+":Function, ";
  13.         }
  14.     }
  15.     //don't include last comma and space in final string
  16.     string = string.substring(0, string.length-2);
  17.     return string;
  18. };
  19. MovieClip.prototype.lineHitTest = function(x1, y1, x2, y2, pre) {
  20.     //find difference in x
  21.     var x = x2-x1;
  22.     //find difference in y
  23.     var y = y2-y1;
  24.     //find distance between points
  25.     var dis = Math.sqrt(x*x+y*y);
  26.     //when pre(precision) equals 2, it checks every 2 points
  27.     //therefore, the number of point equals dis/pre
  28.     var num = dis/pre;
  29.     var xinc = x/num;
  30.     var yinc = y/num;
  31.     //vars to hold current point
  32.     var tx, ty;
  33.     if (num) {
  34.         for (var i = 0; i<=num; i++) {
  35.             //if pre equals 2 and distance is ten, then
  36.             //we find a point 1/5 of the way down the line.
  37.             tx = x1+i*xinc;
  38.             ty = y1+i*yinc;
  39.             //if the point(tx, ty) touches the movieclip we're testing
  40.             if (this.hitTest(tx, ty, true)) {
  41.                 //return true because the movieclip is on the line
  42.                 return {x:tx, y:ty};
  43.             }
  44.         }
  45.     }
  46.     //return false because none of the tested points hit the movieclip   
  47.     return false;
  48. };
  49. Object.prototype.clone = function() {
  50.     //empty object
  51.     var temp = new Object();
  52.     //for each propety in the going-to-be-cloned object
  53.     for (i in this) {
  54.         //copy property name with value to new object
  55.         temp[i] = this[i];
  56.     }
  57.     return temp;
  58. };
  59. Array.prototype.clone = function() {
  60.     //empty array
  61.     var temp = new Array();
  62.     //for each value in the going-to-be-cloned array
  63.     for (i in this) {
  64.         //copy value with index to new object
  65.         temp[i] = this[i];
  66.     }
  67.     return temp;
  68. };
  69. Array.prototype.sum = function() {
  70.     //empty num
  71.     var total = 0;
  72.     //for each value in the array
  73.     for (i=0; i<this.length; i++) {
  74.         total += this[i];
  75.     }
  76.     return total;
  77. };
  78. Array.prototype.fill = function(fill) {
  79.     //for each value in the array
  80.     for (i=0; i<this.length; i++) {
  81.         this[i] = fill;
  82.     }
  83. };
  84. Array.prototype.contains = function(elem) {
  85.     for (var i = 0; i<this.length; i++) {
  86.         if (this[i] == elem) {
  87.             return true;
  88.         }
  89.     }
  90.     return false;
  91. };
  92. angleFromTo = function (x1, y1, x2, y2) {
  93.     //find change in x
  94.     var x = x2-x1;
  95.     //find change in y
  96.     var y = y2-y1;
  97.     //Math.atan2 returns angle in radians; Math.PI/180 converts to degrees
  98.     return Math.atan2(y, x)/(Math.PI/180);
  99. };
  100. distanceFromTo = function (x1, y1, x2, y2) {
  101.     //find change in x
  102.     var x = x2-x1;
  103.     //find change in y
  104.     var y = y2-y1;
  105.     //use pythagorean theorem to find distance
  106.     return Math.sqrt(x*x+y*y);
  107. };
  108. vectorToHorz = function (ang, dis) {
  109.     var rads = ang/(180/Math.PI);
  110.     //returns x-component of a vector of dis magnitude at ang angle
  111.     return dis*Math.cos(rads);
  112. };
  113. vectorToVert = function (ang, dis) {
  114.     var rads = ang/(180/Math.PI);
  115.     //returns y-component of a vector of dis magnitude at ang angle
  116.     return dis*Math.sin(rads);
  117. };
  118. crop = function (num, bot, top) {
  119.     if (num<bot) {
  120.         return bot;
  121.     }
  122.     if (num>top) {
  123.         return top;
  124.     }
  125.     return num;
  126. };

Move the mouse to rotate the cube

Can be useful for a preloader, or a screen saver, or maybe you'll find another use of it.

Take the source code and enjoy

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

4 Responses to “Flash 3D mouse-controlled cube”

  1. Monkios on December 10th, 2007 11:26 pm

    This is very cool …

    I don’t see a use for it but it isn’t less cool.

  2. And Mar on December 11th, 2007 1:15 am

    Emanuele, I think you put the main code in the customFunctions.as file.
    Oops!

    This 3D rendering technique is the engine for a simple 3D game. Thats why I made the classes.

  3. Suely (Snakesue) on December 11th, 2007 7:53 am

    I am a old brazilian woman. I found your site when i was searching games to play. Then my life changed. Now my oldlife = emptyMovieClip, onEnterFrame{
    playing=true;
    live++;
    }
    Thanks for all.
    I have a Flash Mx2004, but is no problem for me yet, because you put the code in your blog and someones are good for me. I learn a lot.

  4. shiv1411 on December 11th, 2007 1:45 pm

    Hi Emanuele,

    check ur mail.
    I sent you the “Stacking boxes in a truck proto”.

    Anyways, this “cube ” is also fantastic

Leave a Reply