Categories

Partners
  • Website Templates

  • Design Feeds

  • Adobe Photoshop Tutorials

  • Website Templates, WordPress Themes

  • Website Templates

  • Flash Web Sites

  • Photoshop Templates

  • Photo Contests

  • Photo Tips
  • Search


    Advanced Search


    Partner Links
  • Adobe Photoshop Tutorials

  • Free Stock Photos and Images



  • Website Templates

    Putting the Pieces Together
    Published  10/1/2006 | Macromedia Flash
       




    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.

    Article Series
    This article is part 5 of a 5 part series. Other articles in this series are shown below:
    1. Creating 3D Classes with ActionScript 2.0
    2. Overview of ActionScript 2.0
    3. Doing Quaternion Math
    4. Constructing 3D Classes
    5. Putting the Pieces Together