3d Landscape In Swishmax (flash) some syntax differences but basically same as flash

[Tsunami 0]

OK! this tutorial is inspired by a game at addictinggames.com... im not sure how many of you have played it but here it is:

God's Playing Field

 

Its a cute little game... but when i first played it i though HOW DOES IT DO THAT!!! and by that i mean dot he 3d with the mouse and then today i finally got around to making it...

 

I used one of the oldest tricks in the book... so lets educate you a lil about flash...

 

Flash does not support 3D directly, you have to find some way to make your own. You could develop some complicated system for which you could use for any and all of your 3D needs or you could just use this little technique...

 

the 3 dimensions are X, Y and Z ... the only one's flash knows are X and Y... we have to create a variable for Z and use that to modify the X and Y values so that it "looks" 3d... ok? we do this by creating a scale ratio... or a number by which to multiply them by to make them look 3d

 

 

ok start by creating a new movie that is 600 wide and 400 tall... Now create a ground picture... preferably a rectangle with a linear gradient (see example)...

 

Now make an empty sprite and call it "thing".. inside of thing, draw an oval and then put a shadow under it (optional)...

 

now click on the scene1 object and add this code:

 

onLoad () {	focalLength = 100;	width = thing._width;	height = thing._height;	Mouse.hide();}

What this does is it creates a focalLength to help us define our Z... the bigger the number... the smaller the increment of z... the smaller the number the bigger the increment of Z... so if you have 500, 1 Z could be about .5 inches and if you have 5, 1 Z could be about 5 inches... you could play with this number... but for the demonstration i used 100... we also saved our original width and height variables and hid the mouse...

 

 

now underneath that add this code...

onEnterFrame() {	if (_ymouse <= (400 - thing._height/2)) {		z = 200 -_ymouse;	}	thing._x = _xmouse;	thing._y = 200 * (focalLength/(focalLength+z));	thing._width = width * (focalLength/(focalLength + z));	thing._height = height * (focalLength/(focalLength + z));}

What it does is it restrains "thing" so that it is on the screen... it calculates Z by making the middle of the screen the origin and make the mouse's y variable control the Z instead of the y. Thing's X is Mouse's X, However, Thing's y you will notice that it changes depending on Z. so if Z is equal to ten, 200 * (100/(100+10)) = 200 * .9; meaning the bigger the number Z the further it is away from you... Then we do the same thing with the width and the height to give the proper scaling and then were done!

 

You can then add some animations to thing and what not...

 

(note* Flash users, whenever i say sprite, for you i mean movieclip... so just change the syntax and add the code to the layer that your movie clip is on instead of the scene)

 

Preview:

Squish : Could be used to make an ant squishing game of sorts >.<

[newt 0]

Thanks for the tut.I was just looking at this, and you know this would be a great way to to do a menu, or a navagation.