Re: [Flashcoders] How to make a doughnut?
Here's one I just made (and tested) from a draw circle prototype that
then draws another circle in reverse (before the endfill is applied --
necessary to get a cutout):
// r1 = radius of outer circle
// r2 = radius of inner circle (cutout)
// x, y = center of donut
MovieClip.prototype.drawDonut = function (r1, r2, x, y) {
var TO_RADIANS:Number = Math.PI/180;
this.moveTo(0, 0);
this.lineTo(r1, 0);
// draw the 30-degree segments
var a:Number = 0.268; // tan(15)
for (var i=0; i 12; i++) {
var endx = r1*Math.cos((i+1)*30*TO_RADIANS);
var endy = r1*Math.sin((i+1)*30*TO_RADIANS);
var ax = endx+r1*a*Math.cos(((i+1)*30-90)*TO_RADIANS);
var ay = endy+r1*a*Math.sin(((i+1)*30-90)*TO_RADIANS);
this.curveTo(ax, ay, endx, endy);
}
// cut out middle (go in reverse)
this.moveTo(0, 0);
this.lineTo(r2, 0);
for (var i=12; i 0; i--) {
var endx = r2*Math.cos((i-1)*30*TO_RADIANS);
var endy = r2*Math.sin((i-1)*30*TO_RADIANS);
var ax = endx+r2*(0-a)*Math.cos(((i-1)*30-90)*TO_RADIANS);
var ay = endy+r2*(0-a)*Math.sin(((i-1)*30-90)*TO_RADIANS);
this.curveTo(ax, ay, endx, endy);
}
this._x = x;
this._y = y;
}
// example usage:
createEmptyMovieClip(d, 1);
d.beginFill(0xaa, 60);
d.drawDonut(100, 50, 200, 200);
d.endFill();
Helen
Navneet Behal wrote:
After putting a couple of hours on the problem, I am still in a daze
on how would one go about making a doughnut shape (circle with cut-out
in the center) using the drawing API.
I'm not talking about drawing a circle using:
lineStyle(BIGNUMBERHERE, color, alpha);
I'd like to put in a gradient fill into a doughnut shape. And it has
to be a doughnut, not a simulation of it (ie. not by drawing 2 circles
over each other and keeping the center cirlce the same as the
background color). Real dunkin' doughnut!
Any ideas?
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] How to make a doughnut?
Too cumbersome to make a simple donut, isn't it :) But thanks for the suggestion JOR.. Helen came up with a pretty elegant one. Regards, Navneet - Original Message - From: JOR [EMAIL PROTECTED] To: Flashcoders mailing list flashcoders@chattyfig.figleaf.com Sent: Saturday, October 29, 2005 8:16 PM Subject: Re: [Flashcoders] How to make a doughnut? How about making the doughnut shape as a movieclip and dynamically applying it as a mask layer to a gradient filled cirle you create at run-time? You could even draw the mask layer at run-time instead of using a pre-drawn one. JOR ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] How to make a doughnut?
Solution is quite simple ;-) Flash drawing / fill methods use XOR logic. Here's what you want (swf and code): http://gousable.com/flash/temp/doughnut1.html frcfc Navneet Behal wrote: After putting a couple of hours on the problem, I am still in a daze on how would one go about making a doughnut shape (circle with cut-out in the center) using the drawing API. I'm not talking about drawing a circle using: lineStyle(BIGNUMBERHERE, color, alpha); I'd like to put in a gradient fill into a doughnut shape. And it has to be a doughnut, not a simulation of it (ie. not by drawing 2 circles over each other and keeping the center cirlce the same as the background color). Real dunkin' doughnut! Any ideas? -- Best regards, Gregorymailto:[EMAIL PROTECTED] http://GOusable.com Flash components development. Usability services. ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
RE: [Flashcoders] How to make a doughnut?
cut the ring with a 1 pixel line, then it's like a c with a pixel opening. You could do this with the drawing api, but if the split shows too badly you might need to patch it -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Navneet Behal Sent: Saturday, October 29, 2005 9:54 AM To: Flashcoders mailing list Subject: [Flashcoders] How to make a doughnut? After putting a couple of hours on the problem, I am still in a daze on how would one go about making a doughnut shape (circle with cut-out in the center) using the drawing API. I'm not talking about drawing a circle using: lineStyle(BIGNUMBERHERE, color, alpha); I'd like to put in a gradient fill into a doughnut shape. And it has to be a doughnut, not a simulation of it (ie. not by drawing 2 circles over each other and keeping the center cirlce the same as the background color). Real dunkin' doughnut! Any ideas? Thanks for your time. Regards, Navneet ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] How to make a doughnut?
Ah.. reading the code again along with your post I realize the AOL Keyword is BEFORE the end fill is applied which is necessary to make the cut-out. Got it... thanks again. Regards, Navneet - Original Message - From: Helen Triolo [EMAIL PROTECTED] To: Flashcoders mailing list flashcoders@chattyfig.figleaf.com Sent: Saturday, October 29, 2005 7:56 PM Subject: Re: [Flashcoders] How to make a doughnut? Here's one I just made (and tested) from a draw circle prototype that then draws another circle in reverse (before the endfill is applied -- necessary to get a cutout): snip Helen -- ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] How to make a doughnut?
That's a very long keyword. But yes, that's crucial. I decided to write it up so I wouldn't forget again that it's only the mask that requires a reverse cutout: http://flash-creations.com/notes/dynamic_drawingapi.php#cutout Helen Navneet Behal wrote: Ah.. reading the code again along with your post I realize the AOL Keyword is BEFORE the end fill is applied which is necessary to make the cut-out. Got it... thanks again. Regards, Navneet ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
