{"id":654,"date":"2008-09-16T09:00:25","date_gmt":"2008-09-16T14:00:25","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/?p=654"},"modified":"2009-08-15T19:04:00","modified_gmt":"2009-08-16T00:04:00","slug":"flash-scripted-conic-angle-gradient","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2008\/09\/16\/flash-scripted-conic-angle-gradient\/","title":{"rendered":"Flash Scripted Conic Angle Gradient"},"content":{"rendered":"\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n

One of the quirkier aspects of Flash is its lack of a 'conic' gradient fill. The conic gradient has been a mainstay of drawing apps like CorelDraw and Photoshop (where it's called an \"Angle Gradient\") for ages but Flash still hasn't implemented this basic feature. Go ahead and check... it's not there.<\/p>\n

NOTE:<\/strong> This tutorial uses some of the code and concepts from my previous Color Gradient<\/a> and Circle Drawing<\/a> tutorials so I highly recommend checking them out for a more in-depth explanation of the following code<\/em>.<\/p>\n

You can't make Flash fill a shape with a conic gradient but you can create a similar effect by masking a 'pie-chart-esque' shape composed of small multicolored slices. Of course, the more slices your pie chart has, the smoother your gradient will appear. For example:<\/p>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n

The graphic above was created with the following code:<\/p>\n

\/\/<\/span>
\n\/\/<\/span>
\n\/\/ "FadeHexes" accepts an array of hexadecimal colors<\/span>
\n\/\/ separated by numbers specifying how many new colors<\/span>
\n\/\/ should be generated between the adjacent colors.<\/span>
\n\/\/ For example:<\/span>
\n\/\/ [Red, 1,        Black, 3,                                  White] yields...<\/span>
\n\/\/ [Red, DARK-RED, Black, DARK-GRAY, MIDDLE-GRAY, LIGHT-GRAY, White].<\/span>
\nfunction<\/span> fadeHexes (<\/span>arry)<\/span>{<\/span>
\n    var<\/span> len = arry.length<\/span>-1<\/span>;
\n    var<\/span> newArry = [<\/span>]<\/span>;
\n    for<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>len; i+=2<\/span>)<\/span>{<\/span>
\n        var<\/span> hex = arry[<\/span>i]<\/span>;
\n        var<\/span> hex2 = arry[<\/span>i+2<\/span>]<\/span>;
\n        newArry.push<\/span>(<\/span>hex)<\/span>;
\n        var<\/span> r = hex >><\/span> 16<\/span>;
\n        var<\/span> g = hex >><\/span> 8<\/span> &<\/span> 0xFF;
\n        var<\/span> b = hex &<\/span> 0xFF;
\n        var<\/span> rd = (<\/span>hex2 >><\/span> 16<\/span>)<\/span>-r;
\n        var<\/span> gd = (<\/span>hex2 >><\/span> 8<\/span> &<\/span> 0xFF)<\/span>-g;
\n        var<\/span> bd = (<\/span>hex2 &<\/span> 0xFF)<\/span>-b;
\n        var<\/span> steps = arry[<\/span>i+1<\/span>]<\/span>+1<\/span>;
\n        for<\/span> (<\/span>var<\/span> j=1<\/span>; j<<\/span>steps; j++)<\/span>{<\/span>
\n            var<\/span> ratio = j\/<\/span>steps;
\n            newArry.push<\/span>(<\/span>(<\/span>r+rd*<\/span>ratio)<\/span><<<\/span>16<\/span> |<\/span> (<\/span>g+gd*<\/span>ratio)<\/span><<<\/span>8<\/span> |<\/span> (<\/span>b+bd*<\/span>ratio)<\/span>)<\/span>;
\n        }<\/span>
\n    }<\/span>
\n    newArry.push<\/span>(<\/span>arry[<\/span>len]<\/span>)<\/span>;
\n    return<\/span> newArry;
\n}<\/span>
\n\/\/<\/span>
\n\/\/<\/span>
\n\/\/ The "ConicPattern" function reads the 'colors' array and draws an<\/span>
\n\/\/ 'N' sided polygon, one side for each color.  The pie-wedge formed<\/span>
\n\/\/ by each side and the center point is filled with the specified color.<\/span>
\n\/\/\/\/\/<\/span>
\n\/\/ X = Center of the conic pattern on the X axis.<\/span>
\n\/\/ Y = Center of the conic pattern on the Y axis.<\/span>
\n\/\/ XR = Width of the radius on the X axis.<\/span>
\n\/\/ YR = Width of the radius on the Y axis.<\/span>
\n\/\/ ANGLE = Angle of the first color (0= 3 O'clock), (90\/360= 6 O'clock), (-60\/360= 1 O'clock).<\/span>
\n\/\/ COLORS = Array of colors used to fill each slice of the pie.  1 slice for each color.<\/span>
\nfunction<\/span> conicGradient(<\/span>x, y, xr, yr, angle, colors)<\/span>{<\/span>
\n    \/\/<\/span>
\n    \/\/ Record the length of the colors array.<\/span>
\n    var<\/span> len = colors.length<\/span>;
\n    \/\/<\/span>
\n    \/\/ Convert the initial angle of rotation to radians.<\/span>
\n    var<\/span> startRadians = angle *<\/span> 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
\n    \/\/<\/span>
\n    \/\/ Determine the size of each pie slice.<\/span>
\n    var<\/span> stepRadians = (<\/span>2<\/span> *<\/span> Math<\/span>.PI<\/span>)<\/span>\/<\/span>len;
\n    \/\/<\/span>
\n    \/\/ Find the first point on the circumference.<\/span>
\n    var<\/span> oldX = x + Math<\/span>.cos<\/span>(<\/span>startRadians)<\/span> *<\/span> xr;
\n    var<\/span> oldY = y + Math<\/span>.sin<\/span>(<\/span>startRadians)<\/span> *<\/span> yr;
\n    \/\/<\/span>
\n    \/\/ Prepare some variables for future use.<\/span>
\n    var<\/span> newX, newY;
\n    for<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>=len; i++)<\/span>{<\/span>
\n        \/\/<\/span>
\n        \/\/ Determine the angle of the next point on the circumference.<\/span>
\n        newRadians = startRadians + stepRadians*<\/span>(<\/span>i+1<\/span>)<\/span>;
\n        \/\/<\/span>
\n        \/\/ Locate the next point on the circumference.<\/span>
\n        newX = x + Math<\/span>.cos<\/span>(<\/span>newRadians)<\/span> *<\/span> xr;
\n        newY = y + Math<\/span>.sin<\/span>(<\/span>newRadians)<\/span> *<\/span> yr;
\n        \/\/<\/span>
\n        \/\/ Get color of pie slice from provided list.<\/span>
\n        beginFill<\/span>(<\/span>colors[<\/span>i]<\/span>)<\/span>;
\n        \/\/<\/span>
\n        \/\/ Draw wedge shape.<\/span>
\n        with<\/span> (<\/span>this<\/span>)<\/span>{<\/span>
\n            moveTo<\/span>(<\/span>oldX, oldY)<\/span>;
\n            lineTo<\/span>(<\/span>x, y)<\/span>;
\n            lineTo<\/span>(<\/span>newX, newY)<\/span>;
\n            lineTo<\/span>(<\/span>oldX, oldY)<\/span>;
\n            endFill<\/span>(<\/span>)<\/span>;
\n        }<\/span>
\n        \/\/<\/span>
\n        \/\/ Store new point cordinates in old variables<\/span>
\n        oldX = newX;
\n        oldY = newY;
\n    }<\/span>
\n}<\/span>
\n\/\/<\/span>
\n\/\/ Generate 4 lists of hex colors with different<\/span>
\n\/\/ quantities of "new" colors between each "key" color.<\/span>
\nvar<\/span> colors1 = fadeHexes (<\/span>[<\/span>0xFFFF00,  4<\/span>, 0x00FFFF,  4<\/span>, 0xFF00FF,  4<\/span>, 0xFFFF00]<\/span>)<\/span>;
\nvar<\/span> colors2 = fadeHexes (<\/span>[<\/span>0xFFFF00,  8<\/span>, 0x00FFFF,  8<\/span>, 0xFF00FF,  8<\/span>, 0xFFFF00]<\/span>)<\/span>;
\nvar<\/span> colors3 = fadeHexes (<\/span>[<\/span>0xFFFF00, 16<\/span>, 0x00FFFF, 16<\/span>, 0xFF00FF, 16<\/span>, 0xFFFF00]<\/span>)<\/span>;
\nvar<\/span> colors4 = fadeHexes (<\/span>[<\/span>0xFFFF00, 32<\/span>, 0x00FFFF, 32<\/span>, 0xFF00FF, 32<\/span>, 0xFFFF00]<\/span>)<\/span>;
\n\/\/<\/span>
\n\/\/ Draw 4 conic gradients using the colors generated above.<\/span>
\nconicGradient(<\/span> 70<\/span>, 70<\/span>, 50<\/span>, 50<\/span>, 0<\/span>, colors1)<\/span>;
\nconicGradient(<\/span>190<\/span>, 70<\/span>, 50<\/span>, 50<\/span>, 0<\/span>, colors2)<\/span>;
\nconicGradient(<\/span>310<\/span>, 70<\/span>, 50<\/span>, 50<\/span>, 0<\/span>, colors3)<\/span>;
\nconicGradient(<\/span>430<\/span>, 70<\/span>, 50<\/span>, 50<\/span>, 0<\/span>, colors4)<\/span>;
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

You may have noticed that the color yellow is duplicated in the above example because the first and last colors in the \"colors\" array are the same (0xFFFF00). To get the gradient to loop perfectly you can pop off the last element of the colors array like so:<\/p>\n

\/\/<\/span>
\n\/\/<\/span>
\nvar<\/span> colors1 = fadeHexes (<\/span>[<\/span>0xFFFF00,  4<\/span>, 0x00FFFF,  4<\/span>, 0xFF00FF,  4<\/span>, 0xFFFF00]<\/span>)<\/span>;
\ncolors1.pop<\/span>(<\/span>)<\/span>;
\nconicGradient(<\/span> 70<\/span>, 70<\/span>, 50<\/span>, 50<\/span>, 0<\/span>, colors1)<\/span>;
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

So there you have it. If you ever need a conic (or angle) gradient you'll know how to make one on your own. I hope you find it handy.<\/p>\n","protected":false},"excerpt":{"rendered":"

Flash lacks a \u2018conic\u2019 gradient fill which has been a mainstay of drawing apps like CorelDraw and Photoshop (where it\u2019s called an \u201cAngle Gradient\u201d) for ages. This Flash tutorial explains how to code your own conic angle gradient.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[8],"tags":[23,42,46,45,36,37],"class_list":["post-654","post","type-post","status-publish","format-standard","hentry","category-flash","tag-actionscript","tag-code","tag-color","tag-draw","tag-swfs","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/comments?post=654"}],"version-history":[{"count":0,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/654\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/media?parent=654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/categories?post=654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/tags?post=654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}