Question

Here is the code I have:

private function drawRect():Sprite{
   var rect:Sprite = new Sprite();
   rect.name = "rectName";
   rect.graphics.beginFill(0xffff00);
   rect.graphics.lineStyle(1,0x000000);
   rect.graphics.drawRect(0,0,6,6);
   rect.graphics.endFill();
   rect.addEventListener(MouseEvent.MOUSE_OVER, changeColor);
   rect.addEventListener(MouseEvent.MOUSE_OUT, changeColorBack);
   return rect;
}

private function changeColor(e:MouseEvent):void{
   var newColor:ColorTransform = new ColorTransform();
   newColor.color = 0x00ffff;
   e.target.transform.colorTransform = newColor;
}

private function changeColorBack(e:MouseEvent):void{
   var newColor:ColorTransform = new ColorTransform();
   newColor.color = 0xffff00;
   e.target.transform.colorTransform = newColor;
}

The changeColor and changeColorBack functions work but not how I would like them to. They change the whole color of my Sprite including the line border(stroke) around the rectangle. I want to change just the color inside the rectangle and maintain the rectangle’s border. I don’t see a property in the ColorTransform that allows me to specify the lineStyle so is there a different approach to changing the fill color of my rectagle and maintain the border around it?

Answer 1

ColorTransform applies to the whole MovieClip regardless of what’s drawn in its graphics property. You could either redraw the rectangle each time you need to:

import flash.display.Sprite;

function drawRect(target:Sprite, clr:Number):void{
   target.graphics.clear();
   target.graphics.beginFill(clr);
   target.graphics.lineStyle(1,0x000000);
   target.graphics.drawRect(0,0,6,6);
   target.graphics.endFill();
}

function changeColor(e:MouseEvent):void{
   drawRect(Sprite(e.target), 0x00ffff);
}

function changeColorBack(e:MouseEvent):void{
   drawRect(Sprite(e.target), 0xffff00);
}

var rect:Sprite = new Sprite();
rect.addEventListener(MouseEvent.MOUSE_OVER, changeColor);
rect.addEventListener(MouseEvent.MOUSE_OUT, changeColorBack);
this.addChild(rect);

drawRect(rect, 0xffff00);

Or, if you’re set on using ColorTransform for some reason, you could build your outlined rectangle out of two separate Sprites (an outer and an inner) and target the inner Sprite only with the ColorTransform:

import flash.display.Sprite;

function getRectangle(w:Number, h:Number, x:Number, y:Number, clr:Number):Sprite{
   var sprite:Sprite = new Sprite();
   sprite.name = "rectName";
   sprite.graphics.beginFill(clr);
   sprite.graphics.drawRect(x, y, w, h);
   sprite.graphics.endFill();

   return sprite;
}

function changeColor(e:MouseEvent):void{
   var newColor:ColorTransform = new ColorTransform();
   newColor.color = 0x00ffff;
   inner.transform.colorTransform = newColor;
}

function changeColorBack(e:MouseEvent):void{
   var newColor:ColorTransform = new ColorTransform();
   newColor.color = 0xffff00;
   inner.transform.colorTransform = newColor;
}

var rect:Sprite = new Sprite();
rect.addEventListener(MouseEvent.MOUSE_OVER, changeColor);
rect.addEventListener(MouseEvent.MOUSE_OUT, changeColorBack);
this.addChild(rect);

// Outer rectangle for the outline
var outer:Sprite = getRectangle(8, 8, 0, 0, 0x000000);
rect.addChild(outer);

// Smaller inner rectangle which can be targeted with the color transform
var inner:Sprite = getRectangle(6, 6, 1, 1, 0xffff00);
rect.addChild(inner);