cyancdesign [Chris Yanc]

Interactive Designer and Developer

I do like the Flash and Math website. Is it a great place to find some tutorials and examples for actionscript. One in particular I'd like to point out is building a simple 3d cube, without needing APIs like Papervision. But, you will need to be able to compile SWF files with Flash 10 capabilities.

If you have Flash CS4, you will be able to try out this code:

import flash.events.*;
 
TUIO.init(this,'127.0.0.1',3000,'',true);
 
var numVertices:int=8;
var numFaces:int=6;
var objRad:Number=70;
var vertsVec:Vector.<Vector3D>=new Vector.<Vector3D>();
var facesVec:Vector.<Array>=new Vector.<Array>();
var fLen:Number=500;
 
var spBoard:Sprite=new Sprite();
this.addChild(spBoard);
 
spBoard.x=1024/2;
spBoard.y=768/2;
spBoard.filters=[ new DropShadowFilter() ];
 
var shBack:Shape=new Shape();
spBoard.addChild(shBack);
 
drawBack();
 
var spObject:Sprite=new Sprite();
var spObjImage:Sprite=new Sprite();
spBoard.addChild(spObjImage);
 
spObject.rotationX=0;
spObject.rotationY=0;
spObject.rotationZ=0;
 
var doRotate:Boolean=false;
var prevX:Number;
var prevY:Number;
var velX:Number=1;
var velY:Number=2;
var velMag:Number=5;
 
var facesColors:Array=[0xFFFFCC,0x00FF66,0x0066FF,0x33FFFF,0x9A7DDF,0xFFCCFF];
 
function drawBack():void {
	shBack.graphics.beginFill(0x000000);
	shBack.graphics.drawRect(-512,-389,1024,768);
	shBack.graphics.endFill();
}
 
setVertices();
setFaces();
rotateObj(0,0,0);
 
function setVertices():void {
	vertsVec[0]=new Vector3D(- objRad,- objRad,- objRad);
	vertsVec[1]=new Vector3D(objRad,- objRad,- objRad);
	vertsVec[2]=new Vector3D(objRad,- objRad,objRad);
	vertsVec[3]=new Vector3D(- objRad,- objRad,objRad);
	vertsVec[4]=new Vector3D(- objRad,objRad,- objRad);
	vertsVec[5]=new Vector3D(objRad,objRad,- objRad);
	vertsVec[6]=new Vector3D(objRad,objRad,objRad);
	vertsVec[7]=new Vector3D(- objRad,objRad,objRad);
}
 
function setFaces():void {
	facesVec[0]=[0,4,5,1];
	facesVec[1]=[1,5,6,2];
	facesVec[2]=[2,6,7,3];
	facesVec[3]=[3,7,4,0];
	facesVec[4]=[4,5,6,7];
	facesVec[5]=[0,1,2,3];
}
 
function rotateObj(rotx:Number,roty:Number,rotz:Number):void {
	var i:int;
	var j:int;
 
	var distArray:Array=[];
 
	var dispVec:Vector.<Point>=new Vector.<Point>();
	var newVertsVec:Vector.<Vector3D>=new Vector.<Vector3D>();
	var zAverage:Number;
 
	var dist:Number;
	var curFace:int;
	var curFaceLen:int;
	var curObjMat:Matrix3D;
 
	spObject.transform.matrix3D.appendRotation(rotx,Vector3D.X_AXIS);
	spObject.transform.matrix3D.appendRotation(roty,Vector3D.Y_AXIS);
	spObject.transform.matrix3D.appendRotation(rotz,Vector3D.Z_AXIS);
 
	curObjMat=spObject.transform.matrix3D.clone();
	spObjImage.graphics.clear();
 
	for (i=0; i<numVertices; i++) {
		newVertsVec[i]=curObjMat.deltaTransformVector(vertsVec[i]);
	}
 
	for (i=0; i<numVertices; i++) {
		newVertsVec[i].w=(fLen+newVertsVec[i].z)/fLen;
		newVertsVec[i].project();
	}
 
	for (i=0; i<numFaces; i++) {
		curFaceLen=facesVec[i].length;
		zAverage=0;
		for (j=0; j<curFaceLen; j++) {
			zAverage+=newVertsVec[facesVec[i][j]].z;
		}
		zAverage/=curFaceLen;
		dist=zAverage;
		distArray[i]=[dist,i];
	}
 
	distArray.sort(byDist);
 
	for (i=0; i<numVertices; i++) {
		dispVec[i]=new Point();
		dispVec[i].x=newVertsVec[i].x;
		dispVec[i].y=newVertsVec[i].y;
	}
 
	for (i=0; i<numFaces; i++) {
		spObjImage.graphics.lineStyle(1,0xCC0000);
		curFace=distArray[i][1];
		curFaceLen=facesVec[curFace].length;
		spObjImage.graphics.beginFill(facesColors[curFace],0.7);
		spObjImage.graphics.moveTo(dispVec[facesVec[curFace][0]].x,
		dispVec[facesVec[curFace][0]].y);
 
		for (j=1; j<curFaceLen; j++) {
			spObjImage.graphics.lineTo(dispVec[facesVec[curFace][j]].x,
			dispVec[facesVec[curFace][j]].y);
		}
 
		spObjImage.graphics.lineTo(dispVec[facesVec[curFace][0]].x,
		dispVec[facesVec[curFace][0]].y);
		spObjImage.graphics.endFill();
	}
}
 
function byDist(v:Array,w:Array):Number {
	if (v[0]>w[0]) {
		return -1;
	} else if (v[0]<w[0]) {
		return 1;
	} else {
		return 0;
	}
}
 
function resetObj():void {
	spObject.transform.matrix3D=new Matrix3D();
	rotateObj(0,0,0);
}
 
//spObjImage.addEventListener(TouchEvent.MOUSE_MOVE,boardMove);
//spObjImage.addEventListener(TouchEvent.MOUSE_DOWN,boardDown);
//spObjImage.addEventListener(TouchEvent.MOUSE_UP,boardUp);
spBoard.addEventListener(TouchEvent.MOUSE_MOVE,boardMove);
spBoard.addEventListener(TouchEvent.MOUSE_DOWN,boardDown);
spBoard.addEventListener(TouchEvent.MOUSE_UP,boardUp);
 
function boardDown(e:TouchEvent):void {
	prevX=e.stageX;
	prevY=e.stageY;
	velX=0;
	velY=0;
	velMag=0;
	doRotate=true;
}
 
function boardUp(e:TouchEvent):void {
	doRotate=false;
}
 
function boardMove(e:TouchEvent):void {
	var locX:Number=prevX;
	var locY:Number=prevY;
 
	if (doRotate) {
		prevX=e.stageX;
		prevY=e.stageY;
		velX=-1*(prevX-locX);
		velY=1*(prevY-locY);
		velMag=Math.abs(velX)+Math.abs(velY);
		rotateObj(prevY-locY,-(prevX-locX),0);
	}
}
 
this.addEventListener(Event.ENTER_FRAME,whenEnterFrame);
 
function whenEnterFrame(e:Event):void {
	if (! doRotate&&velMag>0) {
		rotateObj(velY,velX,0);
	}
}

I've kind of stripped down the offered code but added in a little bit of multi-touch goodness. Ok, maybe not multi-touch just yet, but single touch at least. Single touch rotation control. And with this code, no external files needed, just copy and paste into the first frame in a new FLA file. Test Movie. I even made sure it was Strict Mode friendly before hitting Publish Post. (^_^)//

Hope everyone's Memorial Day was either relaxing or productive. Mine was a little of both, with the leftover heartburn to prove it.

Happy Experimenting.

Tags: 3D, Actionscript 3.0, example, Flash CS4, TouchEvent

This entry was posted on Monday, May 25th, 2009 at 8:15 pm and is filed under Multi-Touch, Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.