ActionScript 3 - adding gradient to object - actionscript-3

Question

I have an instance of a MovieClip called 'BlueBox', which is just a 'Drawing Object' which is blue. It is inside a container called 'option1MC' which is inside 'option1Container' which is on the stage.. It's color can be changed like so:
option1Container.addEventListener(MouseEvent.MOUSE_OVER, option1ContainerOver);
var optionOver:ColorTransform = new ColorTransform();
optionOver.color = 0xC56516;
function option1ContainerOver(evt:Event):void {
option1Container.option1MC.BlueBox.transform.colorTransform = optionOver;
}
I want to change the color to a gradient. This is what I tried:
var mtr:Matrix = new Matrix();
mtr.createGradientBox(option1Container.option1MC.BlueBox.width, option1Container.option1MC.BlueBox.height, 0, 0, 0);
mtr.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x0000FF], [1, 1], [0x00, 0xFF], mtr);
mtr.graphics.drawRect(0,0,option1Container.option1MC.BlueBox.width, option1Container.option1MC.BlueBox.height);
However, right now when I run the .fla file, it i giving me an error saying:
Access of possible undefined property graphics through a reference with static type flasg.geom:Matrix:
and is referring to the lines
mtr.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x0000FF], [1, 1], [0x00, 0xFF], mtr);
mtr.graphics.drawRect(0,0,option1Container.option1MC.BlueBox.width, option1Container.option1MC.BlueBox.height);
Any idea why?

Answer 1

A Matrix does not have a graphics property. You would need to apply this to a DisplayObject with a graphics property. That would look something like this with your setup:
//create the sprite to do the gradient fill on or use your MovieClip
//var spriteObject:Sprite = new Sprite() or just use option1Container;
//enter your matrix
var mtr:Matrix = new Matrix();
mtr.createGradientBox(option1Container.BlueBox.width, option1Container.BlueBox.height, 0, 0, 0);
//apply it to the sprite
sprite.graphics.beginGradientFill("linear", [0xFF0000, 0x0000FF], [1, 1], [0x00, 0xFF], mtr);
sprite.graphics.drawRect(0, 0, 50, 40);
sprite.graphics.endFill();
addChild(sprite);
I created a sprite variable here, which is not necessary as you can just swap sprite with option1Container
You can reference adobe's help for this as well: http://help.adobe.com/en_US/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7dd7.html
Now if you drew the MovieClip graphics in the IDE you won't currently be able to change it. In which case you can create a new MovieClip and add it to your container like so:
//note I made a target variable just to save on typing:
var target:MovieClip = option1Container.option1MC.BlueBox;
var gradientLayer:MovieClip = new MovieClip();
var gradientBox:Matrix = new Matrix();
gradientBox.createGradientBox(target.width, target.height, 0, 0, 0);
gradientLayer.graphics.beginGradientFill("linear", [0xFF0000, 0x0000FF], [1, 1], [0x00, 0xFF], gradientBox);
gradientLayer.graphics.drawRect(0, 0, target.width, target.height);
gradientLayer.graphics.endFill();
//giving the asset a name will allow you to easily remove it later
gradientLayer.name = "gradientLayer";
target.addChild(gradientLayer);
Notice I gave the gradient asset a name of "gradientLayer". If you want to remove this child later on you can do that with:
option1Container.option1MC.BlueBox.removeChild( option1Container.option1MC.BlueBox.getChildByName( "gradientLayer" ) );