Create a 3DSpace scene in Flex

4 Jun
2008
Delicious

Here is another example of how you can create a 3D space in flex using the Flash Player 10 API. You can include images and what not. It uses Tweener to animate the movement but you can use the AnimatedProperty class if you wanted to. Click on the Squares to move in the space.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="absolute"
	 width="500" height="500" backgroundColor="0x000000" color="0x000000" >
	<mx:Script>
		<![CDATA[
			import caurina.transitions.Tweener;
	  			import mx.core.FlexSprite;
	  			import mx.core.FlexShape;
	  			import mx.core.UIComponent;
 
	  			private var contentHolder:UIComponent = new UIComponent();
 
	  			protected override function createChildren():void
	  			{
 
	  				super.createChildren();
 
	  				for(var i:int=150;i>0;i--)
	  				{
	  					var flexSprite:FlexSprite = new FlexSprite();
	  					flexSprite.graphics.beginFill(Math.random()*0xFFFFFF);
	  					flexSprite.graphics.drawRect(0,0,150,150);
	  					flexSprite.graphics.endFill();
	  					flexSprite.x = Math.random() * 1000-500;
	  					flexSprite.y = Math.random() * 1000-500;
	  					flexSprite.z = i* 500;
	  					contentHolder.addChild(flexSprite);
 
	  				}
 
	  				contentHolder.addEventListener(MouseEvent.CLICK,onShapeClick,true);
	  				addChild(contentHolder);
	  			}
	  			private function onShapeClick(event:MouseEvent):void
	  			{
	  				var flexSprite:FlexSprite = FlexSprite(event.target);
	  				Tweener.addTween(contentHolder,{x:-flexSprite.x+150,
	  												y:-flexSprite.y+150,
	  												z:-flexSprite.z,
	  												time:2});
	  			}
 
		]]>
	</mx:Script>
</mx:Application>
	  		]]-->

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 Create a 3DSpace scene in Flex

Avatar

Karpacz Tanie NoclegiNo Gravatar

June 12th, 2008 at 2:25 am

Nice Blog!

Avatar

John SnookNo Gravatar

July 15th, 2008 at 9:22 pm

When I load this page, I get an error:
ReferenceError: Error #1056: Cannot create property http://www.adobe.com/2008/actionscript/Flash10/::z on mx.core.FlexSprite.
at LiveCycle/createChildren()
at mx.core::UIComponent/initialize()
at mx.core::Container/initialize()
at mx.core::Application/initialize()
at LiveCycle/initialize()
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::childAdded()
at mx.managers::SystemManager/initializeTopLevelWindow()
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::docFrameHandler()

Avatar

SherifNo Gravatar

July 15th, 2008 at 10:23 pm

You probably have to recompile it and see where the new Flash 10 namespace is. Since everything is in beta they have the right to move it around, I’ll look at it over the weekend.

Avatar

SherifNo Gravatar

July 15th, 2008 at 10:27 pm

Actually all you need to do is add use namespace flash10; to the top.

Avatar

nameNo Gravatar

April 20th, 2009 at 7:11 pm

in the .actionScriptProperties set the htmlPlayerVersion to 10,0,22 and of course, in the application descriptor file <application xmlns=”http://ns.adobe.com/air/application/1.5″>

and make sure you have sdk 3.3 and air 1.5

Avatar

Terrell EnglehartNo Gravatar

June 27th, 2010 at 10:19 am

Bardzo dobry post ! Duzo się nuczyć można . Rewelacja !!

Comment Form