3D Color Code Calculator in Away3DLite

May 28, 2010

Color Code Calculator

I did this example to demonstrate how to interactively change the materials of a Collada file in Away3DLite. I build the model in Cinema4D and assigned bands and added colors to those bands. I looked up their names in the out putted Collada file and then assigned materials as requested form the Flash Builder ComboBox using change event methods.

Demo

Color Code Calculator

Color Code Calculator

Video

http://www.youtube.com/watch?v=Wgm14JHXyf8

Source

http://code.google.com/p/lv3d/downloads/detail?name=colorCode.zip

Code Discussion

Here’s example code for the first ComboBox

private function changeEvt1(e:Event):void

{

myOne = e.currentTarget.selectedIndex;

modelResistor.materialLibrary.getMaterial(“ID18″).material = myMatArray[myOne];

calcMyOhms();

}

Code for Calculator Ohms as discussed on the video.

private function calcMyOhms():void {

myOhms = (myOne*10 + myTwo)*Math.pow(10, multiplier[myThree]);

if (myOhms >= 1000000) {

myOhms /= 1000000;

myOutput.text = “Resistance = “ + String(myOhms) + ” MOhms, “ + tolerance[myFour];

} else {

if (myOhms >= 1000) {

myOhms /= 1000;

myOutput.text = “Resistance = “ + String(myOhms) + ” KOhms, “ + tolerance[myFour];

} else {

myOutput.text = “Resistance = “ + String(myOhms) + ” Ohms, “ + tolerance[myFour];

}}}

A similar 2D example was done on the web by Danny Goodman at

http://www.dannyg.com/examples/res2/resistor.htm

Enjoy!

private function changeEvt1(e:Event):void {

myOne = e.currentTarget.selectedIndex;

modelResistor.materialLibrary.getMaterial(“ID18″).material = myMatArray[myOne];

calcMyOhms();

}

private function changeEvt2(e:Event):void {

myTwo = e.currentTarget.selectedIndex;

modelResistor.materialLibrary.getMaterial(“ID8″).material = myMatArray[myTwo];

calcMyOhms();

}

private function changeEvt3(e:Event):void {

myThree = e.currentTarget.selectedIndex;

modelResistor.materialLibrary.getMaterial(“ID23″).material = myMatArray[myThree];

calcMyOhms();

}

private function changeEvt4(e:Event):void {

myFour = e.currentTarget.selectedIndex;

modelResistor.materialLibrary.getMaterial(“ID13″).material = myPerArray[myFour];

calcMyOhms();

}


SQL Data Base in Flash Builder – in 5 lines

December 27, 2009

Intro

If there is one single reason that I’ve stuck with  (Flex 4 now) Flash Builder it’s the ability to auto-generate data base code. In the five part video tutorial series below I demonstrate how to create a complete CRUD SQL database system in Flash Builder…only writing 5 lines of code…the rest is auto-generated.

Of course…why do I care…the goal is to build a 3D learning management system…we’ve got the 3D down…time to bring in the data!!!

Videos

SQL Data Base in Flash Builder – in 5 lines (1 of 5):

SQL Data Base in Flash Builder – in 5 lines (2 of 5):

SQL Data Base in Flash Builder – in 5 lines (3 of 5):

SQL Data Base in Flash Builder – in 5 lines (4 of 5):


SQL Data Base in Flash Builder – in 5 lines (5 of 5):

Source Code

Source Code: http://lv3d.googlecode.com/files/DataBasingFB.zip

Hope this helps someone…it was fun to make…

Best Regards,
Mike


CS4 Google Maps Project – a money maker!

March 8, 2009

Intro

It seems like most sites like mine give you basic examples of how to do things but never take you to the next level – the level that makes money. This project, though not complete, closed the deal on a contract and is great starter code for any one doing Google maps.

It ‘s an air project, and the code is a little disorganized due to the short time frame. Basically, I had written the same project in Papervision3D but my buttons were off, but in CS4 everything is right on. So in about four hours I transferred this project from Papervision3D to CS4.

Code was flying everywhere and by the end of it I had to spray my keyboard down with liquid nitrogen … it was smok’n red hot …

The contract crew walked into the meeting with a good working prototype, where others were not even close, and guess what … they got funded … and that’s the way to do it. Give your clients something that works (a few bells and whistles) … not just a design … and you’ll win every time (unless the other contractor is the boss’s brother – it happens.).

Landmark Covington

Landmark Covington Air Project

The original Papervision3D code was Wii controlled and I left the Wii code inside the project just in case I needed to reactivate it. Check out my Wii Post to learn how to create a Wii controlled project.

Source 200+ Megs

YouTube

Discussion

Here are the highlights of its development.

1. Use of Flex custom mxml components and Cairngorm to control pop-ups with images and audio

Flex Popup Component

Flex Popup Component

2. removedFromStage trick to close audio after clicking the close button of the maps pop up (same component can be used for video pop-ups as well).

MXML

<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; width=”482″ height=”222″ creationComplete=”MyImageBox()” removedFromStage=”leaveStage()” horizontalScrollPolicy=”off” verticalScrollPolicy=”off” fontSize=”12″ backgroundColor=”#FFFFFF” alpha=”1.0″ backgroundAlpha=”0.0″>

ActionScript

private function leaveStage():void{

if(soundChannel){

soundChannel.stop();

SoundBtn.label=”Play Audio”;

}}

3. Primitive swapping using remove and add child

//movieParent.
movieParent.removeChildAt(0);
movieParent.addChild(tunnel);

4. Location navigation using a Combo Box including animated map directions

Navigation Menu

Navigation Menu

5. Application.application.map trick to add Google Maps to Flex

movie.addChild(Application.application.map);

Map in 3D

Map in 3D

6. XML data file to hold pop-up info including audio location.

XML for Marker Pop-up Box

XML for Marker Pop-up Box

I could spend 1 week going through every detail, but the stuff above was the stuff I had to think about! Hope it helps…

Sorry about the messiness of the code. Like I said, it was pretty short order. Once the project was completed, I didn’t have time to rework it. But if you’re working on a project like this one…this code will be very helpful to you. The real key to making this thing work was creating custom Flex components and using Cairngorm to talk to them. Google maps pops them up, and you can put anything in them: audio, video, or 3D.

I’m off to the next job. This coming week one of my programs is being presented in Austria (I haven’t written it yet…of course). But my graphic designers have been working like crazy building the assets for it.

I write about 5000 “working” lines of code a week now (that’s about two projects a day)…but that’s because my code base is growing. The more code I have, the more I can write…that’s right…this number includes cutting and pasting code from one project to another.

Once the Austria project is completed, I’ll post it so you can see how these larger (money making) projects go. Have a great week…


3D Lines in CS4 using drawPath

February 19, 2009

Intro

In the previous post on Pendulums, Papervision’s line3D class was used to plot the orbit of a Foucault Pendulum in a rotated plane. But there was a problem – adding more line segments slowed the processor and as result line segments had to be removed. Aha! You just thought I had created some really cool effect by erasing the end of my line while making the front. No, without erasing, everything would eventually slow down to a stand still.

Let’s speed things up a little by using CS4′s drawPath method. Click on the image below to see the demo.

3D Lines in CS4

3D Lines in CS4

Source

Demo

YouTube


Discussion: Drawing Points and Lines

Keith Peters in his book does a similar example using CS3 line functions, but he doesn’t sort his filled circles. His circles are black, and when you run his demo it appears as if the application is z-sorting-but it isn’t. If you try to applying his zSort algorithm the connecting lines go hay-wire. They don’t know where to go and try to follow his black circles as they rapidly sort.

Here’s the Trick

Commonly when we run into such issues in Papervision3D we create dummy graphics for our wayward objects to follow. So in this case you create dummy graphics under your circles for your lines to follow. Thus, separating the zSortng of the circles from the positions of your lines.

There ‘s a little bit of double processing here, but it’s worth it. And it’s very typical of solving problems of this type. In the code below, you see the parallel creation of the circle (or ball) and the dummy marker (or mark).

var ball:BallCS4 = new BallCS4(10, 0);
var mark:MarkCS4 = new MarkCS4(0, 0);
marks.push(ball);
balls.push(ball);
mark.xpos = ball.xpos = Math.random() * 200 – 100;
mark.ypos = ball.ypos = Math.random() * 200 – 100;
mark.zpos = ball.zpos = Math.random() * 200 – 100;
myHolder.addChild(ball);
myHolder.addChild(mark);

The MarkCS4 class is your dummy marker and is an object of zero pixel size – how do like that one! The BallCS4 class is similar to the MarkCS4 class. But draws a circle instead of a zero pixel line.

BallCS4 uses the drawPath method to create its circle in CS4. Since there are no drawCircles methods in CS4 you have to create one. I used four radial curves (created by the CURVE_TO method), which looks fine for small circles, but you’ll need to add eight for larger circles. The radius parameter (below) determines the size of your filled circle.

commands.push(GraphicsPathCommand.MOVE_TO);
data.push(-radius/1.9, radius/1.9);

data.push(0, radius);
data.push(radius/1.9, radius/1.9);

data.push(radius, 0);
data.push(radius/1.9, -radius/1.9);

data.push(0, -radius);
data.push(-radius/1.9, -radius/1.9);

data.push(-radius, 0);
data.push(-radius/1.9, radius/1.9);

commands.push(GraphicsPathCommand.CURVE_TO);
commands.push(GraphicsPathCommand.CURVE_TO);
commands.push(GraphicsPathCommand.CURVE_TO);
commands.push(GraphicsPathCommand.CURVE_TO);

graphics.lineStyle(0);
graphics.beginFill(0×800000);
graphics.drawPath(commands, data);

Extra Reading

A great article which explains this in more detail can be found on Senocular’s blog. Once you’ve got your “commands” and “data” Vectors loaded, you throw them into the drawPath function…and TaDah – sphere (or in this case filled circle)! Instantiate it as many times as you want.

zSort

Now that you’ve decoupled the spheres from the lines using the marker graphics you can now use Keith’s zSort method.

private function sortZ():void
{
balls.sortOn(“zpos”, Array.NUMERIC | Array.DESCENDING );
for(var i:uint = 0; i < numBalls; i++)
{
var ball:BallCS4 = balls[i];
myHolder.addChild(ball as Sprite);
}
}

The Big Limitation

The big limitation is that drawPath only draws in x and y – hey where’s the z Adobe? So to get around that limitation you have to use perspective scaling given in the code below:

var scale:Number = fl / (fl + ball.zpos);
ball.scaleX = ball.scaleY = scale;
ball.x = ball.xpos*scale;
ball.y = ball.ypos*scale;

That’s it, you’re ready to start using 3D lines in CS4. In an upcoming post, we will treat Creating 3D Springs and Making a Node Garden. And my favorite, 3D spring data visualization which I can’t wait to release. I’ve been working on this one for a while.

To see the entire code download the source above or click on the more button below.

Read the rest of this entry »


Follow

Get every new post delivered to your Inbox.