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.
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});