THLIFE.net :: [Flex] 4방향 Shadow 그리기,

ria/flex2008/07/11 09:17

[Flex] 4방향 Shadow 그리기,

UI 개발중 컴포넌트를 4방향으로 둘러싸는 Shadow가 필요하게 되었다.

Filter를 이용해 그림자를 주었지만,

자연스럽지 않았고, 디자이너도 만족하지 않았다.

API를 뒤지는 중

RectangularDropShadow 를 발견~

적용해 보았다.

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.angle = 45;
shadow.alpha = 0.25;
shadow.distance = 10;
shadow.color = 0x00412c;
shadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight);

shadow.angle = 135;
shadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight);

shadow.angle = 225;
shadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight);

shadow.angle = 315;
shadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight);

shadow = null;
}

Shadow 특성상 Border 처럼 적용할수는 없었고,

그래서, 45, 135, 225, 315 4방향으로 Alpha 를 주어서 겹쳐 효과를 줬다.

각 모서리 부분이 살짝 어설푸다 훔,,,

더 좋은 방법은???

'ria > flex' 카테고리의 다른 글

[Flex] seriesFilters (0)	2008/08/28
[Flex] SWF Font Embed (0)	2008/07/29
[Flex] 4방향 Shadow 그리기, (3)	2008/07/11
[Flex] Telnet 연결하기~ (0)	2008/06/11
[강좌] Flex + Spring 사용하기 (0)	2008/06/03
[정렬] SortField 사용하기~ (1)	2008/05/30

Posted by THLIFE.net

TAG flex, shadow, 그림자, 플렉스

Trackback 0 Comment 3

TRACKBACK http://thlife.net/trackback/705

댓글을 달아 주세요

zooc

더 좋은방법은 Fileter를 적용하시믄 되죵..GlowFilter
2008/10/22 17:18 [ ADDR : EDIT/ DEL : REPLY ]
THLIFE.net

ㅎㅎ 이전에 이 컴포넌트를 만들기 전에 filter에 대해 알아봤었는데, 자세히 안본거 같네요, ㅎㅎ
GlowFilter를 한번 적용해 봐야겠습니다. ㅎㅎ

감사합니다!
2008/10/23 09:45 [ ADDR : EDIT/ DEL : REPLY ]
THLIFE.net

Filter를 적용했을때, 의도하지 않은 모양이 나올수 도 있습니다.

컴포넌트 자체의 Alpha가 없을경우, 외부로 향하는 그림자 형태가 아닌 둘러싸고 있는 모양이 나올수도 있으니, 상황에 따라 사용해야할것 같네요~
2008/10/30 09:36 [ ADDR : EDIT/ DEL : REPLY ]