Simple 3D Cube in Flex using Flash Player 10.

3 Jun
2008
Delicious

Here is an Example of How you can use the Flash Player 10 API to make a 3D cube in Flex.
If someone knows how to solidify the colors so it does not look see thru let me know.

?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	 creationComplete="onCreationComplete()" paddingTop="20"
	   width="450" height="450">
	<mx:Script>
		<![CDATA[
			import mx.core.FlexShape;
			import mx.core.UIComponent;
			import mx.core.FlexBitmap;
			import __AS3__.vec.Vector;
 
			 /**
			 * @private
			 * The Cube Holder
			 */
			 private var myCubeHolder:UIComponent = new UIComponent();
			 /**
			 * @private
			 */
			 private var cubeFaces:Vector.<FlexShape> = new Vector.<FlexShape>(6);
			 private function onCreationComplete():void
			 {
			 	addChild(myCubeHolder);
			 	myCubeHolder.x = myCubeHolder.y=250;
			 	createCubeFaces();
			 	myCubeHolder.addEventListener(Event.ENTER_FRAME,onCubeHolderFrame);
			 }
 
			 private function onCubeHolderFrame(event:Event):void
			 {
			 	myCubeHolder.rotationX+=1;
			 	myCubeHolder.rotationY+=1;
 
 
 
			 }
			 /**
			 * @Private
			 * We use this function to create the faces of the cube
			 * which will be 6
			 */
			 private function createCubeFaces():void
			 {
			 	for(var i:int=0;i<6;i++)
			 	{
			 		cubeFaces[i] = new FlexShape();
			 		cubeFaces[i].graphics.beginFill(Math.random()*0xFFFFFF,1);
			 		cubeFaces[i].graphics.drawRect(-100,-100,100,100);
			 		cubeFaces[i].graphics.endFill();
			 		cubeFaces[i].blendMode = BlendMode.DARKEN;
			  		myCubeHolder.addChild(cubeFaces[i]);
 
			 	}
 
 
			 	cubeFaces[0].z=100;
 
			 	cubeFaces[1].rotationY=90;
 
			 	cubeFaces[2].rotationX=-90;
 
 
			 	cubeFaces[3].rotationY=90;
			 	cubeFaces[3].x=-100;
 
			 	cubeFaces[4].rotationX=90;
			 	cubeFaces[4].y=-100;
			 	cubeFaces[4].z=100;
 
			 	//we do nothing with cubeFace[5] since it is already
			 	//in its place
 
 
 
 
			 }
 
 
		]]>
	</mx:Script>
</mx:Application>
Incoming Search Terms :flex 3d cube , flex 4 3d , flash 10 3d cube , cube flex , flex cube 3d , 3d cube flex , flash 10 cube , flex 4 cube , flex 4 3d cube , flex 3d box

Share this story with a friend !
Join SherifAbdou's Rss Feed Stumble This Article! Add this to your Delicious Bookmarks! Digg this story ! Add this story to Reddit ! Tweet This Brush


6 Responses to Simple 3D Cube in Flex using Flash Player 10.

Avatar

PlehNo Gravatar

June 6th, 2008 at 9:49 am

the transparency is probably caused by how your setting your color…

Math.random()*0xFFFFFF

this is a uint so it will include a 4th byte for alpha, you can use a bit shift to remove the 4th byte before you use it as a color, then the alpha property in the beginFill method will take effect.

Avatar

MartinNo Gravatar

October 22nd, 2008 at 7:54 am

“If someone knows how to solidify the colors so it does not look see thru let me know.”

The colours are solid. The problem here is that the depth of the FlexShapes still apply. What you are seeing is the squares at the back of the cube being drawn on top of the squares at the front because the ones at the back have a higher depth.

Flash 10 does not support “true 3D”. You still need to take care of little things like these.

Avatar

bergerdmNo Gravatar

November 11th, 2008 at 2:31 am

Hmmm, I am tempted to try this.

Avatar

nicsmrNo Gravatar

November 15th, 2008 at 6:08 am

Good blog

Avatar

khuyagaaNo Gravatar

November 15th, 2008 at 9:26 am

Nice blog btw

Avatar

Filipe MeloNo Gravatar

July 14th, 2009 at 10:21 am

Have you tried to change BlendMode.DARKEN to BlendMode.NORMAL?

Comment Form