예전에 4방향 그림자를 주기위해, ( http://thlife.net/705 )
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList( unscaledWidth, unscaledHeight );
//그림자
var shadow:RectangularDropShadow = new RectangularDropShadow();
shadow.blRadius = 10;
shadow.brRadius = 10;
shadow.tlRadius = 10;
shadow.trRadius = 10;
shadow.alpha = 0.25;
shadow.color = 0x00412c;
shadow.distance = 7;
shadow.angle = 45;
shadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight); // 1 , 1
shadow.angle = 135;
shadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight); // -1 , 1
shadow.angle = 225;
shadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight); // -1 , -1
shadow.angle = 315;
shadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight); // 1 , -1
shadow = null;
}
|
이런식으로 그림자를 4방향으로 해서 테두리를 그렸습니다.
근데 좋은 방법이 있더군요. zooc님이 알려주신 방법입니다. ㅎㅎ
바로 GlowFilter를 이용하는 건데요,
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList( unscaledWidth, unscaledHeight );
//그림자필터
var filter:BitmapFilter = getBitmapFilter();
var panelFilters:Array = new Array();
panelFilters.push(filter);
filters = panelFilters;
}
private function getBitmapFilter():BitmapFilter
{
var color:Number = 0xCCCCCC;
var alpha:Number = .7;
var blurX:Number = 12;
var blurY:Number = 12;
var strength:Number = 2;
var inner:Boolean = false;
var knockout:Boolean = false;
var quality:Number = BitmapFilterQuality.HIGH;
return new GlowFilter(color,
alpha,
blurX,
blurY,
strength,
quality,
inner,
knockout);
}
적용해보니 훨씬 자연스럽고 깔끔해 보입니다. ㅎㅎ
아래는 테스트 소스입니다.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
backgroundColor="0xffffff"
creationComplete="initApp()">
<mx:Script>
<![CDATA[
import comp.GlowFilterExample;
import mx.core.UIComponent;
private var bgColor:uint = 0xFFCC00;
private function initApp():void
{
draw();
var filter:BitmapFilter = getBitmapFilter();
var myFilters:Array = new Array();
myFilters.push(filter);
customBox.filters = myFilters;
}
private function getBitmapFilter() :BitmapFilter {
var color:Number = 0x33CCFF;
var alpha:Number = 0.8;
var blurX:Number = 35;
var blurY:Number = 35;
var strength:Number = 2;
var inner:Boolean = false;
var knockout:Boolean = false;
var quality:Number = BitmapFilterQuality.HIGH;
return new GlowFilter(color,
alpha,
blurX,
blurY,
strength,
quality,
inner,
knockout);
}
private function draw() :void {
customBox.graphics.beginFill(bgColor);
customBox.graphics.drawRect(0, 0, customBox.width, customBox.height);
customBox.graphics.endFill();
}
]]>
</mx:Script>
<mx:Box id="customBox"
x="50" y="50"
width="500" height="500"/>
</mx:Application>
|
 |
어떠세요? 훨씬 나아보이죠? ㅎㅎ
댓글을 달아 주세요