Rotating Globe

[cliffdangler]

Hi,

I'm required to create a rotating globe in Flash. This globe must be mouse-driven along the x and y axis.

Because I don't have a Math degree (Hell - I didn't even take Math in High School) I had to resort to researching on the Internet. The closest example that I could find is this one.
http://www.ultrashock.com/flas/Detailed/154.html

It's pretty much what I want, except that the globe that I need to create is slightly more complex as there are more rows and columns, and the globe must be able to scroll along the y axis.

I've been trying to learn a bit of trigonometry while also trying to understand the code behind the above example. I'm kinda getting there but I'd really appreciate any pointers, clues or links to help me.

The globe will have logos (dynamically imported jpegs) mapped to the surface. Here's a screenshot showing the structure:


Has this been done before? Am I in over my head? Thanks in advance for your help and for even reading this far.

[brutfood]

I don't know whether you're over your head - but you're over the capabilities of flash which can't map bitmaps onto spherical surfaces. But director can.

As for the non-bitmap elements of the 3d sphere - well one way to do it is attached. However -you want a gap in between each square mapped on to the surface - so you've made it hard on yourself. You will need to do it in a more complex way, which involves the scaling technique I have used in the download, the MX drawing API ,and modifying the circle equations.

x=r*sin(theta);y=r*cos(theta)

Good luck!

[cliffdangler]

Thank you for your help brutfood.

Actually I don't want a gap between each image. The screenshot is a mere guideline. Sorry - I should have been clearer.

I know that I can't map images into Flash but I can dynamically load a jpeg into... say a movieclip and then use trigonometry to "bend" the movieclip at different angles (very much like the example on Ultrashock. Have you seen it?http://www.ultrashock.com/flas/Detailed/154.html).

I'm not familiar with MX's drawing API so I'll have to check it out. I cannot open your attached fla - it gives me an "unexpected file format". Could you please repost or post the swf or paste the code here so that I can try and understand it.

Thanks again.

[brutfood]

On a Wintel PC, try opening the .fla from inside flash FILE->OPEN instead of clicking on the icon.

You can see my globe at:-

http://au.geocities.com/brutfood/FLASH6/G3globe.swf

for another example of how to do a globe, go to my website (still under construction):-

http://www.i2genius.com

Click on the core icon. In core, start up depth. Drag a sphere to the stage. Give it a wireframe 1 or solid 1 render. Move it around to view it. This technique is complicated - so I won't try to describe it except to say that I solve a quadratic equation to find the intersection points of the inner curves and the circular envelope.

Hope you can open my .fla

[ericlin]

I know that I can't map images into Flash but I can dynamically load a jpeg into... say a movieclip and then use trigonometry to "bend" the movieclip at different angles (very much like the example on Ultrashock. Have you seen it?http://www.ultrashock.com/flas/Detailed/154.html).

In that link, shape.swf, the bitmap does not "bend"; You can zoom-in to see the detail of those faint and dark bitmaps when they are rotated near the edge.

It is an effect created by controlling the shape of a mask. The bitmaps are still rectangle images.

Maybe you can do a globe effect similar to that without bitmap bending.

[tomsamson]

check this one out:
http://www.andre-michelle.com/files/fla/geosphere.zip
it´s quite good (actually as good as it gets with the flash player´s speed),hope it helps,
let me know if you can achieve nice looking bitmap implementation

[cliffdangler]

Thanks for all your help guys. The geosphere from andre-michelle.com looks a little complicated. What I was thinking of doing was to use Den Ivanov's Rotating Menu on Ultrashock as a basis for my globe, then to use Flash's Drawing API to create a type of mask over the globe. This mask will basically be the outline or the grid of the globe. If I can't get that to work then I might try brutfood's G3globe as a mask.

I've been trying to understand Den's rotating menu but I need some help.

This is the menu: http://www.ultrashock.com/flas/Detailed/154.html

What I don't understand is how Den calculates his formulas. For example he'll cos or sin to get an angle, then he'll cos or sin it again repeatedly and multiply it by more values, etc.

I just seem to get lost when I try to understand the menu as a whole. (And yes I have tried to e-mail Den)

Your help is greatly appreciated. Thanks.

Here's his code:
In frame 1 of the stage:

walls = new array();
rad = Math.PI/180;
// number of items
max = 12;
// width of items
width = 40;
rat = width/100;
radius = (width*max)/Math.PI;
astep = -360/max;
dist = radius*2+50;
for (i=0; i<max; i++) {
	walls[i] = new Object();
	walls[i].y = 0;
	walls[i].x1 = Math.sin(astep*i*rad)*radius+Math.sin((astep*i+90)*rad)*width/2;
	walls[i].z1 = Math.cos(astep*i*rad)*radius+Math.cos((astep*i+90)*rad)*width/2;
	walls[i].x2 = Math.sin(astep*i*rad)*radius+Math.sin((astep*i-90)*rad)*width/2;
	walls[i].z2 = Math.cos(astep*i*rad)*radius+Math.cos((astep*i-90)*rad)*width/2;
}
// 
function clicked (n) {
	_root.menu._xscale = _root.menu._yscale=20;
	_root.menu._x = 50;
	_root.menu._y = 200;
	_root.menu.gotoAndStop(2);
	_root.name_section = "section::" add n
}
function menuback () {
	_root.menu._xscale = _root.menu._yscale=100;
	_root.menu._x = 160;
	_root.menu._y = 120;
	_root.menu.gotoAndStop(1);
	_root.name_section = "main"
}
// 
function Redraw (ya) {
	xa = 0;
	var cosYangle = Math.cos(ya*rad);
	var sinYangle = Math.sin(ya*rad);
	var cosXangle = Math.cos(xa*rad);
	var sinXangle = Math.sin(xa*rad);
	// rotation
	for (i=0; i<max; i++) {
		x = walls[i].x1;
		z = walls[i].z1;
		y = walls[i].y1;
		var tempz = (z*cosYangle)-(x*sinYangle);
		var tx = (z*sinYangle)+(x*cosYangle);
		var tz = (y*sinXangle)+(tempz*cosXangle);
		var ty = (y*cosXangle)-(tempz*sinXangle);
		var zratio = dist/(tz+dist);
		walls[i].sx1 = +tx*zratio;
		walls[i].sy1 = -ty*zratio;
		walls[i].size1 = 50*zratio;
		x = walls[i].x2;
		z = walls[i].z2;
		y = walls[i].y2;
		var tempz = (z*cosYangle)-(x*sinYangle);
		var tx = (z*sinYangle)+(x*cosYangle);
		var tz = (y*sinXangle)+(tempz*cosXangle);
		var ty = (y*cosXangle)-(tempz*sinXangle);
		var zratio = dist/(tz+dist);
		walls[i].sx2 = +tx*zratio;
		walls[i].sy2 = -ty*zratio;
		walls[i].size2 = 50*zratio;
	}
	// visualisation
	for (i=0; i<max; i++) {
		name = "sh" add i;
		_root.menu.ins.attachMovie("shape", name, i+1);
		_root.menu.ins[name].pic.gotoAndStop(i%6);
		_root.menu.ins[name].pic.name = i;
		_root.menu.ins[name].n = i;
		if (walls[i].size1<walls[i].size2) {
			ratio = int((walls[i].size1/walls[i].size2)*1000);
			_root.menu.ins[name]._x = walls[i].sx2/(r+1);
			_root.menu.ins[name]._y = -walls[i].sy2/(r+1);
			_root.menu.ins[name]._yscale = walls[i].size2/(r+1);
			_root.menu.ins[name]._xscale = (walls[i].sx1-walls[i].sx2)/(r+1);
			_root.menu.ins[name].pic._xscale = -100;
		} else {
			ratio = int((walls[i].size2/walls[i].size1)*1000);
			_root.menu.ins[name]._x = walls[i].sx1/(r+1);
			_root.menu.ins[name]._y = -walls[i].sy1/(r+1);
			_root.menu.ins[name]._yscale = walls[i].size1/(r+1);
			_root.menu.ins[name]._xscale = (walls[i].sx2-walls[i].sx1)/(r+1);
		}
		_root.menu.ins[name]._alpha = 40;
		_root.menu.ins[name].gotoAndStop(1000-ratio);
	}
}
stop ();

On the menu instance:

onClipEvent(load) {
ya = 0;
}
onClipEvent (enterFrame) {
	ya -= int((this._x-_root._xmouse)/(_xscale/3));
	_root.Redraw(ya);
updateAfterEvent();
}

[oldchick]

I made a sphere based on codes in FOE Actionscript Reference and Super Samurai. It can rotate left and right using the left right keys, but I couldn't get the up down rotation to work properly. I am also still waiting for some help.


_x = 275;
_y = 200;
d = 400;
pointx = new Array();
pointy = new Array();
pointz = new Array();
numStrips = 10;
degPerStrip = 180/numStrips;
numAround = 20;
trans = Math.PI/180;
degPerAround = 360/numAround;
incAng = 0;
incAng2 = 0;
inc = 0.01;
inc2=0.001;
for (i=0; i<=numStrips; i++) {
pointx[i] = new Array();
pointy[i] = new Array();
pointz[i] = new Array();
for (j=0; j<=numAround; j++) {
//initialising points will speed up processing
pointx[i][j] = 0;
pointy[i][j] = 0;
pointz[i][j] = 0;
}
}
//
_root.createEmptyMovieClip("sphere", 1);
sphere.onEnterFrame = function() {
this.clear();
for (i=0; i<=numStrips; i++) {
for (j=0; j<=numAround; j++) {
ang = j*degPerAround;
if (Key.isDown(Key.LEFT) || Key.isDown(Key.RIGHT)) {
incAng += Key.isDown(Key.LEFT)*inc-Key.isDown(Key.RIGHT)*inc;
}
ang += incAng;
ang2 = i*degPerStrip;
if (Key.isDown(Key.UP) || Key.isDown(Key.DOWN)) {
incAng2 += Key.isDown(Key.UP)*inc2-Key.isDown(Key.DOWN)*inc2;
}
ang2 += incAng2;
if (ang2>180) {
ang2 =ang2-180;
}
rad = Math.sin(ang2*trans)*100;
x = rad*Math.sin(ang*trans);
z = (rad*Math.cos(ang*trans))+500;
y = Math.cos(ang2*trans)*100;
pointx[i][j] = x;
pointy[i][j] = y;
pointz[i][j] = z;
}
}
for (i=0; i<numStrips; i++) {
for (j=0; j<numAround; j++) {
// Grab the 4 points of the quad
x1 = pointx[i][j];
y1 = pointy[i][j];
z1 = pointz[i][j];
x2 = pointx[i+1][j];
y2 = pointy[i+1][j];
z2 = pointz[i+1][j];
x3 = pointx[i+1][j+1];
y3 = pointy[i+1][j+1];
z3 = pointz[i+1][j+1];
x4 = pointx[i][j+1];
y4 = pointy[i][j+1];
z4 = pointz[i][j+1];
// Corner 1, on screen
sx1 = (x1*(z1/d));
sy1 = (y1*(z1/d));
// Corner 2, on screen
sx2 = (x2*(z2/d));
sy2 = (y2*(z2/d));
// Corner 3, on screen
sx3 = (x3*(z3/d));
sy3 = (y3*(z3/d));
// Corner 4, on screen
sx4 = (x4*(z4/d));
sy4 = (y4*(z4/d));
// Test to see if this quad is visible or not
this.lineStyle(1, 0xFF0000, 100);
this.moveTo(sx1, sy1);
this.lineTo(sx2, sy2);
this.lineTo(sx3, sy3);
this.lineTo(sx4, sy4);
}
}
};