[Flex] CustomBox 그리기..

WokrFlow에 사용될.. 어딘가 완벽하진 않지만 제대로 나온것만으로도...다행이다..;;

그림은 멀쩡하지만 사용하는 과정에서 알수없는 문제들이 빵빵 터진다는..뭐지...ㅠ

이번 플젝은 버튼을 제외하고 이미지는 사용하지 않았다는것에 만족 하고 다음 플젝은 좀 더 완성도있게 ^^아하하 재밌네..ㅋ

하지만 좀처럼 나아지지 않는 네이밍...........................

[CustomBox.as]

package assets.progammaticsSkin

{

import flash.display.Graphics;

import flash.geom.Matrix;

import mx.skins.halo.HaloBorder;

public class CustomBox extends HaloBorder

{

public function CustomBox()

{

super();

}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

{

super.updateDisplayList(unscaledWidth, unscaledHeight);

var rotaion:Number = 90 * Math.PI/180;

var gradientBoxMatrix:Matrix = new Matrix();

gradientBoxMatrix.createGradientBox( unscaledWidth, unscaledHeight, rotaion, 0, 0);

var ratios:Array = [130,130];

var colors:Array = this.getStyle("colors");

var shadowColors:Array = [0xd5d5d5,0xd5d5d5];

var alphas:Array = [1,1];

var g:Graphics = graphics;

g.clear();

g.beginGradientFill('linear', shadowColors , alphas, ratios, gradientBoxMatrix,'pad','rgb');

g.lineStyle(1, 0xe9e9e9, 1);

g.moveTo(0,0);

g.lineTo(0,5);

g.lineTo(unscaledHeight/2,unscaledHeight/2+5);

g.lineTo(unscaledHeight/2,unscaledHeight/2);

g.lineTo(0,0);

g.endFill(); 

g.beginGradientFill('linear', colors , alphas, ratios, gradientBoxMatrix,'pad','rgb');

g.lineStyle(0, 0xffffff, 0);

g.moveTo(0,0);

g.lineTo(185,0);

g.lineTo(185,unscaledHeight);

g.lineTo(0,unscaledHeight);

g.lineTo(15,unscaledHeight/2);

g.lineTo(0,0);

g.endFill();

g.beginGradientFill('linear', shadowColors , alphas, ratios, gradientBoxMatrix,'pad','rgb');

g.lineStyle(0, 0xd5d5d5, 0);

g.moveTo(0,unscaledHeight);

g.lineTo(185,unscaledHeight);

g.lineTo(180,unscaledHeight+5);

g.lineTo(0,unscaledHeight+5);

g.lineTo(0,unscaledHeight+5);

g.endFill();

}

}

}

[TestCustomBox.mxml]

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 

xmlns:mx="http://www.adobe.com/2006/mxml" 

width="400"

height="400"

layout="vertical" 

horizontalAlign="center">

<mx:Style>

.customBlueBox

{

border-skin: ClassReference("assets.progammaticsSkin.Test");

colors: #245c8f, #1a4d7f;

}

</mx:Style>

<mx:Box height="30" styleName="customBlueBox"/>

</mx:Application>