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
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" 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): Helen -- ___ 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?
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?
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" 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?
Thanks Helen.. u rule!
The part which still amazes me is how u made the cut out. So u're saying
that by going in reverse over the larger radius circle, using the smaller
radius, the drawing would actually behave like the IDE drawing tool and cut
out the shape below. I never realized that. It opens up new drawing ideas.
Flash is getting too big to keep up with every aspect of it :)
Thanks a lot for this.
Regards,
Navneet
- Original Message -
From: "Helen Triolo" <[EMAIL PROTECTED]>
To: "Flashcoders mailing list"
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):
// 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
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] How to make a doughnut?
One of those moments where you can say that the Mathematics teacher was right! ;-) ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
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 ___ === James O'Reilly === === SynergyMedia, Inc. === www.synergymedia.net 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? 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?
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
