Putting the Pieces Together
October 1, 2006 | 0 comments
Putting the Pieces Together
With all of the classes written, you can now create a FLA that renders a simple 3D scene. In the spirit of my previous automobile examples, I have assembled a set of nodes, lines, and polygons that render the basic shape of a car. Rather than walk you through the code line by line, I have included comments that explain each section:
// import the classes and interfaces for the project
import com.lo9ic.*;
// create the scene movie clip and center it on the stage
var mySceneClip:MovieClip = createEmptyMovieClip("SceneMC", 1);
mySceneClip._x = 275;
mySceneClip._y = 200;
mySceneClip._yscale = mySceneClip._xscale = 250;
// create an instance of the Scene class and set
// the clip and projection factor properties
var myScene:Scene = new Scene();
myScene.clip = mySceneClip;
myScene.f = 200;
// create style objects to be used by lines and polygons
var bodyStyle:Style = new Style();
bodyStyle.fillcolor = "0x660000";
bodyStyle.linecolor = "0x660000";
var grillStyle:Style = new Style();
grillStyle.fillcolor = "0x666666";
grillStyle.linealpha = 0;
var windowStyle:Style = new Style();
windowStyle.fillcolor = "0x000033";
windowStyle.fillalpha = 20;
windowStyle.linecolor = "0x660000";
windowStyle.linealpha = 100;
windowStyle.lineweight = 2;
var antennaStyle:Style = new Style();
var roofStyle:Style = new Style();
var interiorStyle:Style = new Style();
interiorStyle.fillcolor = "0x5F453A";
interiorStyle.linealpha = 0;
var tireStyle:Style = new Style();
tireStyle.fillcolor = "0x333333";
tireStyle.linealpha = 0;
// body panels, grill and trunk nodes
var n0:Node = new Node(-47,20,0);
var n1:Node = new Node(-50,20,15);
var n2:Node = new Node(50,20,15);
var n3:Node = new Node(47,20,0);
var n4:Node = new Node(-47,-20,0);
var n5:Node = new Node(-50,-20,15);
var n6:Node = new Node(50,-20,15);
var n7:Node = new Node(47,-20,0);
// window, hood and trunk lid nodes
var n8:Node = new Node(-22,-20,15);
var n9:Node = new Node(-22,20,15);
var n10:Node = new Node(15,20,15);
var n11:Node = new Node(15,-20,15);
// roof nods
var n12:Node = new Node(14,17,30);
var n13:Node = new Node(-12,17,30);
var n14:Node = new Node(-12,-17,30);
var n15:Node = new Node(14,-17,30);
// the antenna nodes
var n16:Node = new Node(23,20,15);
var n17:Node = new Node(23,20,35);
// the wheel nodes
var n18:Node = new Node(20,20,0);
var n19:Node = new Node(20,20,-10);
var n20:Node = new Node(30,20,-10);
var n21:Node = new Node(40,20,-10);
var n22:Node = new Node(40,20,0);
var n23:Node = new Node(20,-20,0);
var n24:Node = new Node(20,-20,-10);
var n25:Node = new Node(30,-20,-10);
var n26:Node = new Node(40,-20,-10);
var n27:Node = new Node(40,-20,0);
var n28:Node = new Node(-20,20,0);
var n29:Node = new Node(-20,20,-10);
var n30:Node = new Node(-30,20,-10);
var n31:Node = new Node(-40,20,-10);
var n32:Node = new Node(-40,20,0);
var n33:Node = new Node(-20,-20,0);
var n34:Node = new Node(-20,-20,-10);
var n35:Node = new Node(-30,-20,-10);
var n36:Node = new Node(-40,-20,-10);
var n37:Node = new Node(-40,-20,0);
// add the nodes to the scene
for (var i:Number = 0; i<38; i++) {
myScene.addNode(this["n"+i]);
}
// create movie clips for the body panels, windows and antenna
var clip:MovieClip;
for (var i:Number = 0; i<17; i++) {
this["clip"+i] = mySceneClip.createEmptyMovieClip("mc"+i, i+1);
}
// create polygons for the body panels and windows,
// set the clip properties
// and add the polygons to the scene
var poly:Polygon;
for (var i:Number = 0; i<16; i++) {
this["poly"+i] = new Polygon();
this["poly"+i].clip = this["clip"+i];
myScene.addObject(this["poly"+i]);
}
// apply the bodystyle to the body panels
for (var i:Number = 0; i<5; i++) {
this["poly"+i].style = bodyStyle;
}
// apply the grillstyle to the grill
this["poly5"].style = grillStyle;
// apply the roof style to the roof
this["poly6"].style = roofStyle;
// apply the window style to the windows
for (var i:Number = 7; i<11; i++) {
this["poly"+i].style = windowStyle;
}
// apply the interior style to the interior
this["poly11"].style = interiorStyle;
// apply the tire style to the tires
for (var i:Number = 12; i<16; i++) {
this["poly"+i].style = tireStyle;
}
// add the nodes to the polygons
// right body panel
poly0.addNode(n0); poly0.addNode(n1);
poly0.addNode(n2); poly0.addNode(n3);
// left body panel
poly1.addNode(n4); poly1.addNode(n5);
poly1.addNode(n6); poly1.addNode(n7);
// trunk panel
poly2.addNode(n0); poly2.addNode(n1);
poly2.addNode(n5); poly2.addNode(n4);
// trunk
poly3.addNode(n1); poly3.addNode(n4);
poly3.addNode(n8); poly3.addNode(n9);
// hood
poly4.addNode(n11); poly4.addNode(n6);
poly4.addNode(n2); poly4.addNode(n10);
// grill
poly5.addNode(n2); poly5.addNode(n3);
poly5.addNode(n7); poly5.addNode(n6);
// roof
poly6.addNode(n12); poly6.addNode(n13);
poly6.addNode(n14); poly6.addNode(n15);
// windows
poly7.addNode(n9); poly7.addNode(n10);
poly7.addNode(n12); poly7.addNode(n13);
poly8.addNode(n8); poly8.addNode(n11);
poly8.addNode(n15); poly8.addNode(n14);
poly9.addNode(n8); poly9.addNode(n9);
poly9.addNode(n13); poly9.addNode(n14);
poly10.addNode(n11); poly10.addNode(n10);
poly10.addNode(n12); poly10.addNode(n15);
// tires
poly12.addNode(n18); poly12.addNode(n19, true);
poly12.addNode(n20); poly12.addNode(n21, true);
poly12.addNode(n22);
poly13.addNode(n23); poly13.addNode(n24, true);
poly13.addNode(n25); poly13.addNode(n26, true);
poly13.addNode(n27);
poly14.addNode(n28); poly14.addNode(n29, true);
poly14.addNode(n30); poly14.addNode(n31, true);
poly14.addNode(n32);
poly15.addNode(n33); poly15.addNode(n34, true);
poly15.addNode(n35); poly15.addNode(n36, true);
poly15.addNode(n37);
// interior
poly11.addNode(n8); poly11.addNode(n9);
poly11.addNode(n10); poly11.addNode(n11);
// create a line for the antenna
// and add the line to the scene
var antenna = new Line(n16, n17);
antenna.clip = this["clip16"];
antenna.style = antennaStyle;
myScene.addObject(antenna);
// create quaternion for rotating the car into initial position
var myQuat:Quaternion = new Quaternion();
myQuat.fromAxisAngle(1,0,0,-Math.PI/4);
myScene.quaternion.concat(myQuat);
// set the axis and angle of the quaternion, concatenate it with
// the existing quaternion, and draw the scene
function run():Void {
x = Math.sin(getTimer()/5000);
y = Math.cos(getTimer()/5000);
myQuat.fromAxisAngle(0,1,3,.1);
myScene.quaternion.concat(myQuat);
myScene.draw();
}
// set an interval to rotate and draw the scene
var id:Number = setInterval(run, 20);
When you publish the FLA, the resulting movie looks like the one in Figure 1.
Figure 1. A SWF created from 3D classes
I encourage you to download and experiment with this code to create your own 3D scenes or classes. Write a cube or pyramid class that leverages the classes I present here. Hopefully you will find that class-based programming is not only easy to implement but useful in your own projects.
Comments