• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 243
  • Last Modified:

In Flash MX2004, how do I turn this linear gradient box into a radial gradient circle?

How do I modify this action script so that it produces a circle with a concentric radial gradient, instead of a box with a linear gradient?

Thanks,
John
import flash.geom.*
//
var mc:MovieClip = this.createEmptyMovieClip("grad", 1);
 
var colors = [0x79986B, 0xDCE0B6, 0x79986B, 0x000000];
var alphas = [100, 100, 100,100];
var ratios = [0, 15, 30,45];
var matrix = {matrixType:"box", x:100, y:100, w:200, h:200, r:(45/180)*Math.PI};
mc.beginGradientFill("linear",colors,alphas,ratios,matrix);
mc.moveTo(100,100);
mc.lineTo(100,300);
mc.lineTo(300,300);
mc.lineTo(300,100);
mc.lineTo(100,100);
mc.endFill();

Open in new window

0
John Carney
Asked:
John Carney
  • 4
  • 2
1 Solution
 
Aneesh ChopraCommented:
Just change "linear" to "radial"

you can also play with "ratios" array, to change the size of gradient circle.
for example, try replacing existing "radios" array with following:
var ratios = [0, 50, 100, 200];

here is the updated code:
import flash.geom.*;
//
var mc:MovieClip = this.createEmptyMovieClip("grad", 1);
 
var colors = [0x79986B, 0xDCE0B6, 0x79986B, 0x000000];
var alphas = [100, 100, 100, 100];
var ratios = [0, 15, 30, 45];
 
var matrix = {matrixType:"box", x:100, y:100, w:200, h:200, r:(45/180)*Math.PI};
mc.beginGradientFill("radial",colors,alphas,ratios,matrix);
mc.moveTo(100,100);
mc.lineTo(100,300);
mc.lineTo(300,300);
mc.lineTo(300,100);
mc.lineTo(100,100);
mc.endFill();

Open in new window

0
 
John CarneyReliability Business Tools Analyst IIAuthor Commented:
Hi aneesh,

Yes that was the first thing i tried, but I still get a 200x200 black box around the much smaller circle gradient.bIs "box" an ActionScript defined term?  I thought maybe "circle" would get rid of the black box, but that produces no shape at all.

John
0
 
Aneesh ChopraCommented:
as I already mentioned

"
you can also play with "ratios" array, to change the size of gradient circle.
for example, try replacing existing "radios" array with following:
var ratios = [0, 50, 100, 200];
"

ratios defines the area each gradient color will occupy

ratio value must be in between 0 to 255

to get rid of black color you can set last color alpha to 0

just try follwoing code and see the output:
import flash.geom.*;
//
var mc:MovieClip = this.createEmptyMovieClip("grad", 1);
 
var colors = [0x79986B, 0xDCE0B6, 0x79986B, 0x000000];
var alphas = [100, 100, 100, 0];
var ratios = [0, 50, 150, 200];
 
var matrix = {matrixType:"box", x:100, y:100, w:200, h:200, r:(45/180)*Math.PI};
mc.beginGradientFill("radial",colors,alphas,ratios,matrix);
mc.moveTo(100,100);
mc.lineTo(100,300);
mc.lineTo(300,300);
mc.lineTo(300,100);
mc.lineTo(100,100);
mc.endFill();

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Aneesh ChopraCommented:
another point,
"ratios" Array value should be set in incremental to each previous element of the array
and value should be inbetween 0 to 255

0
 
John CarneyReliability Business Tools Analyst IIAuthor Commented:
Thanks, aneesh. The main key was making that last alpha zero. Thanks for the continuing education.

Please take a look at this related quesion. If you have the time to post an answer now that would be awesome.

http://www.experts-exchange.com/Software/Photos_Graphics/Web_Graphics/Macromedia_Flash/Q_22990904.html
0
 
Aneesh ChopraCommented:
welcome,
I just say the linked question and it has already been answered.

secondly,
if you are satisfy with my comment on this question.
Please close this question by accepting the appropriate comment


0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now