If I understand what you're trying to achieve, you'll need not only one gradient but a large number of them.
Basically a linear gradient tweens 2 or more color values in _one_ direction, e.g. red to green to grey on the x-axis. It is not possible to fill a rectangle with a gradient where e.g. all 4 corners have different colors. To get this gradient in 2 directions, on the x and the y axis, we'll have to 'concatenate' the gradient using a big number of 1-pixel wide gradient stripes. This principle is applied in this gradient tween editor: http://motiondraw.com/md/as_samples/t/gradientTween/gradientTweenEditor.html (drag in more color tabs and turn the 'knobs' for rotation) For a 'kind of borealis style pseudo temperature graph' you could start with something like this: temperatureValues = new Array(); // create some random temperature data for(var i= 0; i<400; i++){ lastVal = i ? temperatureValues[i-1] : 50; if(lastVal > 100){ c = -1; }else if(lastVal < 0){ c = 1; }else{ c = Math.random() > 0.5 ? 1 : -1; } temperatureValues[i] = lastVal + c; } neutralColor = 0x006666; coldColor = 0x66FFFF;// temperature = 0 hotColor = 0xFF0000;// temperature = 100 hotColdRange = colorRange(coldColor, hotColor, 100); drawGraph(); function drawGraph(){ for(var i=0, len=temperatureValues.length; i<len; i++){ canvas = this.createEmptyMovieClip('canvas'+i, this.getNextHighestDepth()); // highest temperature: v = 255 // lowest temperature: v = 0 // for this sample we use a temperature range from 0 to 100 temperatureRange = 100; v = temperatureValues[i] * (255 / temperatureRange); ratios = [0, v, 255]; colors = [neutralColor, hotColdRange[Math.floor(temperatureValues[i])], neutralColor]; alphas = [100, 100, 100]; // more graph, less 'borealis' //ratios = [0, v-30, v, v+30, 255]; //colors = [neutralColor, neutralColor, hotColdRange[Math.floor(temperatureValues[i])], neutralColor, neutralColor]; //alphas = [100, 100, 100, 100, 100]; matrix = {a:100, b:0, c:0, d:0, e:100, f:0, g:100, h:100, i:1}; matrix = {matrixType:"box", x:0, y:0, w:100, h:100, r:0}; canvas.beginGradientFill("linear", colors, alphas, ratios, matrix); canvas.lineTo(100, 0); canvas.lineTo(100, 1); canvas.lineTo(0, 1); canvas.lineTo(0, 0); canvas.endFill(); canvas._rotation = -90; canvas._x = i; } } function colorRange(c1, c2, n) { var c1 = {r:(c1 & 0xFF0000) >> 16, g:(c1 & 0x00FF00) >> 8, b:c1 & 0x0000FF}; var c2 = {r:(c2 & 0xFF0000) >> 16, g:(c2 & 0x00FF00) >> 8, b:c2 & 0x0000FF}; var r = (c2.r-c1.r)/(n-1); var g = (c2.g-c1.g)/(n-1); var b = (c2.b-c1.b)/(n-1); var color_arr = new Array(); for(var i=0, len=n; i<len; i++){ color_arr[i] = ((c1.r+i*r) << 16) + ((c1.g+i*g) << 8) + (c1.b+i*b); } return color_arr; } hth -------------- Andreas Weber motiondraw.com -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Andreas Rønning Sent: Friday, November 04, 2005 9:46 AM To: Flashcoders mailing list Subject: [Flashcoders] gradient fills based on temperature maps I'm building a temperature grid in a 2d array, where i'd like to build some kind of smooth gradient based on the entire map. For instance this map can start red in the top left, fade to a cool blue near the center, then flare into red again off to the right, while everything else becomes a green tinted blue. As is i could use the drawing api to draw colored blocks to give the impression of such a map, but ideally i'd be able to smooth out the values with gradients, because the map is really quite low res. Anyone got any ideas for this? - Andreas _______________________________________________ Flashcoders mailing list [email protected] http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
