Link to home
Create AccountLog in
Avatar of JoachimPetersen
JoachimPetersenFlag for Denmark

asked on

Shape with multiple lineStyle assigned

Hello

What would be the best way to assign two diffrent color borders to an shape?
var rectangle:Shape = new Shape();
rectangle.graphics.lineStyle(2, 0xffffff);
and then also:
rectangle.graphics.lineStyle(1, 0xcccccc);
Avatar of dgofman
dgofman
Flag of United States of America image

You can use "filters" easiest way I am using drop filter

var rectangle:Shape = new Shape();
rectangle.graphics.lineStyle(1, 0xff0000);
rectangle.graphics.lineTo(100, 100);
addChild(rectangle);

var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 1;
shadow.angle = 1;
shadow.color = 0x0000ff;
shadow.alpha = 1;
shadow.blurX = 1;
shadow.blurY = 1;
rectangle.filters = [shadow];
Avatar of JoachimPetersen

ASKER

How can you make the dropshadowfilter act as a border, and not as an shadow effect?
Unfortunately I cannot find the code how adobe implemented flash.filters classes

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/package-detail.html

In my application I am using DropShadowFilter

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/DropShadowFilter.html

another way you can draw two rectangles

import flash.filters.ColorMatrixFilter;

var rectangle:Shape = new Shape();
rectangle.graphics.lineStyle(1, 0xff0000);
rectangle.graphics.drawRect(10, 10, 150, 150);

var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 1;
shadow.color = 0x0000ff;
shadow.blurX = 0;
shadow.blurY = 0;
rectangle.filters = [shadow];

//DropShadowFilter(distance:Number = 4.0, angle:Number = 45, color:uint = 0, alpha:Number = 1.0,
                        //blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1.0, quality:int = 1,
                        //inner:Boolean = false, knockout:Boolean = false, hideObject:Boolean = false)

addChild(rectangle);
Actually using BevelFilter you can apply 3 colors (I am using green for shadow)


var rectangle:Shape = new Shape();
rectangle.graphics.lineStyle(1, 0xff0000);
rectangle.graphics.drawRect(10, 10, 150, 150);

//BevelFilter(distance:Number = 4.0, angle:Number = 45, highlightColor:uint = 0xFFFFFF, highlightAlpha:Number = 1.0, shadowColor:uint = 0x000000, shadowAlpha:Number = 1.0, blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1, quality:int = 1, type:String = "inner", knockout:Boolean = false)

rectangle.filters = [ new BevelFilter(2,
                                   45,
                                   0x00ff00,
                                   1,
                                   0x0000ff,
                                   1,
                                   1,
                                   1,
                                   1,
                                   BitmapFilterQuality.HIGH,
                                   BitmapFilterType.OUTER,
                                   false)];

addChild(rectangle);
I think I have to go with the two shape solotion, how do you combine shapes so that first you draw the 'border shape', then the other shape and 'lay' it over the first shape?
ASKER CERTIFIED SOLUTION
Avatar of dgofman
dgofman
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account