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

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 3.00 out of 5)
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.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 6 comments

  1. Monkios

    on December 10, 2007 at 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 11, 2007 at 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 11, 2007 at 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 11, 2007 at 1:45 pm

    Hi Emanuele,

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

    Anyways, this “cube ” is also fantastic

  5. grunzsaint

    on November 5, 2009 at 1:07 pm

    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

  6. Anant salgaonkar

    on January 4, 2012 at 9:18 am

    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