I've been looking at gradient masks to add a feathered/blurred effect to the edges of some shapes I'm drawing in AS3 (only with code) but I need it to work on squares/rectangles as well 开发者_运维知识库as circles.
Is there any kind of matrix that allows for this type of transformation? I could really use some guidance.
The target is to keep the file size down which means I don't want to add any PNG's to use as masks.
Thanks in advance.
[EDIT]
I've put the code that I'm using to draw the shape and I'm trying to put a feathered edge to each shape (except for cases 3 and 4 which I'm trying to draw shapes with for a different product type) The variable imageCont is the container for the image I'm trying to mask. But I don't seem to be able to put a feathered edge on either the circles/ovals or on the rectangle.
public function drawMask (drawI:int, clipWidth:int, clipHeight:int) {
var maskingShape:Shape = new Shape();
this.addChild(maskingShape);
maskingShape.x = 0;
maskingShape.y = 0;
var matr:Matrix = new Matrix();
var colors:Array = [0xFFFFFF, 0xFFFFFF];
var alphas:Array = [1, 0];
var ratios:Array = [200,255];
matr.createGradientBox( clipWidth, clipHeight );
//Calculate the positions automatically so they're centered
var centerX = 250 - (clipWidth / 2);
var centerY = 250 - (clipHeight / 2);
maskingShape.graphics.lineStyle();
//Only draw what we wanted..
switch ( drawI ) {
case 1:
showBalloonApp();
maskingShape.graphics.beginGradientFill ( GradientType.RADIAL, colors, alphas, ratios, matr );
maskingShape.graphics.drawEllipse ( centerX, centerY, clipWidth, clipHeight );
break;
case 2:
showBalloonApp();
maskingShape.graphics.beginGradientFill ( GradientType.RADIAL, colors, alphas, ratios, matr );
maskingShape.graphics.drawRoundRect ( centerX, centerY, clipWidth, clipHeight, 100, 100 );
break;
case 3:
hideBalloonApp();
//verticle shadow
maskingShape.graphics.beginFill ( 0x3B3B3B, 0.65 );
maskingShape.graphics.drawRect ( ( centerX + clipWidth - 30 ), centerY, 30, clipHeight );
maskingShape.graphics.endFill();
//horizontal shadow
maskingShape.graphics.beginFill ( 0x3B3B3B, 0.65 );
maskingShape.graphics.drawRect ( centerX, ( centerY + clipHeight - 30 ), clipWidth, 30 );
maskingShape.graphics.endFill();
//rectangle
maskingShape.graphics.drawRect ( centerX, centerY, clipWidth, clipHeight );
break;
case 4:
hideBalloonApp();
//verticle shadow
maskingShape.graphics.beginFill ( 0x3B3B3B, .65 );
maskingShape.graphics.drawRect ( ( centerX + clipWidth - 20 ), centerY, 20, clipHeight );
maskingShape.graphics.endFill();
//horizontal shadow
maskingShape.graphics.beginFill ( 0x3B3B3B, .65 );
maskingShape.graphics.drawRect ( centerX, ( centerY + clipHeight - 20 ), clipWidth, 20 );
maskingShape.graphics.endFill();
//rectangle
maskingShape.graphics.drawRect ( centerX, centerY, clipWidth, clipHeight );
break;
default:
showBalloonApp( );
maskingShape.graphics.beginGradientFill ( GradientType.RADIAL, colors, alphas, ratios, matr );
maskingShape.graphics.drawEllipse ( centerX, centerY, clipWidth, clipHeight );
break;
}
//End the filling process
maskingShape.graphics.endFill ( );
//Cache them as Bitmap items
imageCont.cacheAsBitmap = true;
maskingShape.cacheAsBitmap = true;
//Apply the mask
imageCont.mask = maskingShape;
}
Since you don't supply any code or info on what you have tried, it is a bit difficult to know how to answers, so I'll start with some of the basics - that both the mask and the masked DisplayObject has be be bitmaps for gradient masks to work, in the line of this schematic code:
gradientMask.cacheAsBitmap = true;
drawing.cacheAsBitmap = true;
drawing.mask = gradientMask;
精彩评论