Flash 3D mouse-controlled cube
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | import Space3D.*;
#include "customFunctions.as"
//to hold clips
this.createEmptyMovieClip("space", 1);
//center origin
space._x = Stage.width / 2;
space._y = Stage.height / 2;
//hold x,y,z values of the 8 points to make a cube
pointsArray = new Array();
pointsArray.push(new Point3D(-100, -100, -100));
pointsArray.push(new Point3D(-100, -100, 100));
pointsArray.push(new Point3D(-100, 100, -100));
pointsArray.push(new Point3D(-100, 100, 100));
pointsArray.push(new Point3D(100, -100, -100));
pointsArray.push(new Point3D(100, -100, 100));
pointsArray.push(new Point3D(100, 100, -100));
pointsArray.push(new Point3D(100, 100, 100));
//attach 8 clips to space's 0,0 (center of screen)
for (i = 0; i < 8; i++) {
attachedObj = space.attachMovie("ball", "ball" + i, i);
}
//move camera towards you (comment out the next line if you want to be inside the cube
Camera3D.z = -200;
rotateCube = function () {
//rotation of cube determined by _xmouse and _ymouse
var xrot = this._ymouse / 900;
var yrot = -this._xmouse / 900;
//rotate all the points
Universe3D.rotatePointArray(pointsArray, xrot, yrot, 0);
//convert the 3D points to 2D points
screenPoints = Universe3D.toUniverse2D();
for (var i = 0; i < screenPoints.length; i++) {
var cur_ball = this["ball" + i];
//attach a ball to each point
screenPoints[i].moveClipHere(cur_ball);
}
};
space.onEnterFrame = rotateCube; |
And this is the content of the customFunctions.as file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | Object.prototype.toString = function() {
//set empty string to be displayed
var string = "";
//cycle through properties and functions
for (var i in this) {
//if not a function
if (typeof (this[i]) != "function") {
//add the property name and value to the string
string += i+":"+this[i].toString()+", ";
} else {
//else add the function name and "Function"
string += i+":Function, ";
}
}
//don't include last comma and space in final string
string = string.substring(0, string.length-2);
return string;
};
MovieClip.prototype.lineHitTest = function(x1, y1, x2, y2, pre) {
//find difference in x
var x = x2-x1;
//find difference in y
var y = y2-y1;
//find distance between points
var dis = Math.sqrt(x*x+y*y);
//when pre(precision) equals 2, it checks every 2 points
//therefore, the number of point equals dis/pre
var num = dis/pre;
var xinc = x/num;
var yinc = y/num;
//vars to hold current point
var tx, ty;
if (num) {
for (var i = 0; i<=num; i++) {
//if pre equals 2 and distance is ten, then
//we find a point 1/5 of the way down the line.
tx = x1+i*xinc;
ty = y1+i*yinc;
//if the point(tx, ty) touches the movieclip we're testing
if (this.hitTest(tx, ty, true)) {
//return true because the movieclip is on the line
return {x:tx, y:ty};
}
}
}
//return false because none of the tested points hit the movieclip
return false;
};
Object.prototype.clone = function() {
//empty object
var temp = new Object();
//for each propety in the going-to-be-cloned object
for (i in this) {
//copy property name with value to new object
temp[i] = this[i];
}
return temp;
};
Array.prototype.clone = function() {
//empty array
var temp = new Array();
//for each value in the going-to-be-cloned array
for (i in this) {
//copy value with index to new object
temp[i] = this[i];
}
return temp;
};
Array.prototype.sum = function() {
//empty num
var total = 0;
//for each value in the array
for (i=0; i<this.length; i++) {
total += this[i];
}
return total;
};
Array.prototype.fill = function(fill) {
//for each value in the array
for (i=0; i<this.length; i++) {
this[i] = fill;
}
};
Array.prototype.contains = function(elem) {
for (var i = 0; i<this.length; i++) {
if (this[i] == elem) {
return true;
}
}
return false;
};
angleFromTo = function (x1, y1, x2, y2) {
//find change in x
var x = x2-x1;
//find change in y
var y = y2-y1;
//Math.atan2 returns angle in radians; Math.PI/180 converts to degrees
return Math.atan2(y, x)/(Math.PI/180);
};
distanceFromTo = function (x1, y1, x2, y2) {
//find change in x
var x = x2-x1;
//find change in y
var y = y2-y1;
//use pythagorean theorem to find distance
return Math.sqrt(x*x+y*y);
};
vectorToHorz = function (ang, dis) {
var rads = ang/(180/Math.PI);
//returns x-component of a vector of dis magnitude at ang angle
return dis*Math.cos(rads);
};
vectorToVert = function (ang, dis) {
var rads = ang/(180/Math.PI);
//returns y-component of a vector of dis magnitude at ang angle
return dis*Math.sin(rads);
};
crop = function (num, bot, top) {
if (num<bot) {
return bot;
}
if (num>top) {
return top;
}
return num;
}; |
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
They can be easily customized to meet the unique requirements of your project.


























This post has 6 comments
Monkios
This is very cool …
I don’t see a use for it but it isn’t less cool.
And Mar
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.
Suely (Snakesue)
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.
shiv1411
Hi Emanuele,
check ur mail.
I sent you the “Stacking boxes in a truck proto”.
Anyways, this “cube ” is also fantastic
grunzsaint
hey very cool effect…m learning flash and have a question…if instead of this red ball i ve a menu button of some texts can i get same effect like the menu rotating with respect to mouse movement..and in my case i jus need z rotation…and also we can limit the z rotation to some angle only…can we do it plz plz plz help me…at least reply saying no if we cant…hehe… tc
Anant salgaonkar
hi I really like this 3d effect but can guide me how to make something 3d views like below link
http://www.1pointsize.com/#/about
can you make tutorial for this