Creating a 3D Room in Flash Catalyst (in 6 lines)

Building a 3D Room

Creating a 3D room could never be easier than in Flash Catalyst…and with only writing six lines of code. Now of course it takes more than 6 lines of code to create a 3D room…about 80 using Flash Catalyst. But 74 of them are auto-generated for you. It’s all click and drag and once you bring it into Flash Builder…you just need to add 6 lines of your own to make everything operational.

Check out the demo below:

3D Room Demo (Click the Image)

http://www.professionalpapervision.com/demos/my3droom/

3D Room Demo

Source: http://lv3d.googlecode.com/files/My3DRoomResources.zip

Note: My son James Lively created the images if you use them please give him credit.

Videos:

Video 1: Building a 3D Room in Flash Catalyst (1 of 3)

Video 2: Building a 3D Room in Flash Catalyst (2 of 3)

Video 3: Building a 3D Room in Flash Catalyst (3 of 3)

What’s Important Here!!!

(1) It was all created with only 80 lines of code (74 auto-generated)
(2) It uses very little system resources…your computer doesn’t run hot or slow down
(3) The images are easily replaceable…so create as many rooms as you want
(4) Development time is decrease by a factor of 10
(5) You are not limited by Viewport size or anti-aliasing concerns
(6) It’s just great fun!

Click the link below to see the code.

Complete Code for the 3D Room

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Group click=”group_clickHandler()”  xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243; xmlns:d=”http://ns.adobe.com/fxg/2008/dt”&gt;
<fx:Script>
<![CDATA[
protected function group_clickHandler():void
{
const state:String = currentState;
if ( state == ‘State1′ ) {
currentState=’State2′;
}
if ( state == ‘State2′ ) {
currentState=’State1′;
//currentState=’State2′;
}
}
]]>

</fx:Script>
<s:states>
<s:State name=”State1″/>
<s:State name=”State2″/>
</s:states>
<s:Group id=”myRoomGroup” x=”0″ y=”0″ z=”100″  >
<s:BitmapImage source=”@Embed(‘/assets/images/A01Back-edited1024.jpg’)” d:userLabel=”back” x=”0″ y=”0″ id=”bitmapimage5″/>
<s:BitmapImage source=”@Embed(‘/assets/images/A01Ceiling-edited1024.jpg’)” d:userLabel=”top” x=”0″ y=”0″ id=”bitmapimage3″/>
<s:BitmapImage source=”@Embed(‘/assets/images/A01Floor-edited1024.jpg’)” d:userLabel=”floor” x=”0″ y=”0″ id=”bitmapimage4″/>
<s:BitmapImage source=”@Embed(‘/assets/images/A01Left-edited.jpg’)” d:userLabel=”left” x=”256″ y=”0″ id=”bitmapimage2″/>
<s:BitmapImage source=”@Embed(‘/assets/images/A01Rightedited.jpg’)” d:userLabel=”right” x=”256″ y=”0″ id=”bitmapimage1″/>
</s:Group>
<s:transitions>
<s:Transition fromState=”State1″ toState=”State2″ autoReverse=”true”>
<s:Parallel>
<s:Parallel target=”{bitmapimage5}”>
<s:Move3D zBy=”256″ autoCenterTransform=”true” duration=”1000″ autoCenterProjection=”true” />
</s:Parallel>
<s:Parallel target=”{bitmapimage1}”>
<s:Rotate3D angleXFrom=”0″ angleXTo=”0″ angleZFrom=”0″ autoCenterTransform=”true” angleYTo=”-90″ angleYFrom=”0″ autoCenterProjection=”true” angleZTo=”0″ d:noAutoDelete=”true”/>
<s:Move3D xBy=”512″ autoCenterTransform=”true” duration=”0″ autoCenterProjection=”true” />
</s:Parallel>
<s:Parallel target=”{bitmapimage2}”>
<s:Rotate3D angleXFrom=”0″ angleXTo=”0″ angleZFrom=”0″ autoCenterTransform=”true” angleYTo=”90″ angleYFrom=”0″ autoCenterProjection=”true” angleZTo=”0″ d:noAutoDelete=”true”/>
<s:Move3D xBy=”-512″ autoCenterTransform=”true” duration=”0″ autoCenterProjection=”true” />
</s:Parallel>
<s:Parallel target=”{bitmapimage3}”>
<s:Rotate3D angleXFrom=”0″ angleXTo=”-90″ angleZFrom=”0″ autoCenterTransform=”true” angleYTo=”0″ angleYFrom=”0″ autoCenterProjection=”true” angleZTo=”0″ d:noAutoDelete=”true”/>
<s:Move3D yBy=”-256″ autoCenterTransform=”true” duration=”0″ autoCenterProjection=”true” />
</s:Parallel>
<s:Parallel target=”{bitmapimage4}”>
<s:Rotate3D angleXFrom=”0″ angleXTo=”90″ angleZFrom=”0″ autoCenterTransform=”true” angleYTo=”0″ angleYFrom=”0″ autoCenterProjection=”true” angleZTo=”0″ d:noAutoDelete=”true”/>
<s:Move3D yBy=”256″ autoCenterTransform=”true” duration=”0″ autoCenterProjection=”true” />
</s:Parallel>
</s:Parallel>
</s:Transition>

<s:Transition fromState=”State2″ toState=”State1″ autoReverse=”true”>
<s:Parallel>
<s:Parallel target=”{bitmapimage5}”>
<s:Move3D zBy=”-256″ autoCenterTransform=”true” duration=”0″ autoCenterProjection=”true” />
</s:Parallel>
<s:Parallel target=”{bitmapimage1}”>
<s:Rotate3D angleXFrom=”0″ angleXTo=”0″ angleZFrom=”0″ duration=”0″ autoCenterTransform=”true” angleYTo=”0″ angleYFrom=”-90″ autoCenterProjection=”true” angleZTo=”0″ d:noAutoDelete=”true”/>
<s:Move3D xBy=”-512″ autoCenterTransform=”true” duration=”0″ autoCenterProjection=”true” />
</s:Parallel>
<s:Parallel target=”{bitmapimage2}”>
<s:Rotate3D angleXFrom=”0″ angleXTo=”0″ angleZFrom=”0″ duration=”0″ autoCenterTransform=”true” angleYTo=”0″ angleYFrom=”90″ autoCenterProjection=”true” angleZTo=”0″ d:noAutoDelete=”true”/>
<s:Move3D xBy=”+512″ autoCenterTransform=”true” duration=”0″ autoCenterProjection=”true” />
</s:Parallel>
<s:Parallel target=”{bitmapimage3}”>
<s:Rotate3D angleXFrom=”-90″ angleXTo=”0″ angleZFrom=”0″ duration=”0″ autoCenterTransform=”true” angleYTo=”0″ angleYFrom=”0″ autoCenterProjection=”true” angleZTo=”0″ d:noAutoDelete=”true”/>
<s:Move3D yBy=”+256″ autoCenterTransform=”true” duration=”0″ autoCenterProjection=”true” />
</s:Parallel>
<s:Parallel target=”{bitmapimage4}”>
<s:Rotate3D angleXFrom=”90″ angleXTo=”0″ angleZFrom=”0″ duration=”0″ autoCenterTransform=”true” angleYTo=”0″ angleYFrom=”0″ autoCenterProjection=”true” angleZTo=”0″ d:noAutoDelete=”true”/>
<s:Move3D yBy=”-256″ autoCenterTransform=”true” duration=”0″ autoCenterProjection=”true” />
</s:Parallel>
</s:Parallel>
</s:Transition>
</s:transitions>
</s:Group>

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: