Make your own free website on Tripod.com
How to do 3d Pie
ericlin@ms1.hinet.net

download that animated 3d pie movie

I have this movie in FlashKit movie section that read XML and generate pie. Now here is the new version. I remove the XML reading portion and add inputs. This version is much more simpler. In that old version, I generate face and side separatively. In fact, it is very simple to generate them in one step.

 The pink disc is a movieClip. There is another movieClip which createEmptyMovieClip and draw a filled green shape according to two parameters: angleA and angleB. Make it to be mask, then we will get a pie segment. Here in the demo movie, I did not set it as mask. I just make it alpha=50 to demonstrate the creation of pie segment. 

To draw the shape, first go straight to the perimeter point of angleA, if the y is lower than center then next line will go straght down to include the side. If y is higher thant the center, then we need not draw the straight line cutting the side. 

download zipped fla

periPoint = function (Angle) {
    var pt = new Object();
    pt.x = radius*Math.cos((Math.PI/180)*Angle);
    pt.y = (0.5)*radius*Math.sin((Math.PI/180)*Angle);
    //this is not a circle. the height 50% scaled
    return pt;
};

with (mask.drawer) {
    beginFill(0x00ff00, 100);
    pt1 = periPoint(angleA);
    lineTo(pt1.x, pt1.y);
    if (pt1.y<=0) {
        lineTo(2*pt1.x, 2*pt1.y);
    } else {
        lineTo(pt1.x, pt1.y+50);
        //here the shape will create the side
    }
    var tempAngle = angleA+10;
    while (tempAngle<angleB) {
        tempPt = periPoint(tempAngle);
        lineTo(2*tempPt.x, 2*tempPt.y);
        tempAngle += 10;
    }
    pt2 = periPoint(angleB);
    if (pt2.y<=0) {
        lineTo(2*pt2.x, 2*pt2.y);
    } else {
        lineTo(pt2.x, pt2.y+50);
    }
    lineTo(pt2.x, pt2.y);
    endFill();

}


How to change the hue of the pie ?

In my old movie, I have two movieClip. The top clip is a gradient shape of alpha and black color. Beneath it is a clip that I can setRGB. 

Can we use setTransform to change the hue and preserve the black gradient ?

Yes ! If we set it as gray color. 

c = new Color(pieBg);
cv=rgb;
r=(cv>>16)/2;
g=((cv>>8)&(0xFF))/2;
b=(cv&0xFF)/2;
c.setTransform({ra:r,ga:g,ba:b, rb:0, gb:0, bb:0, aa:100, ab:0});