[Flex] FXG(Flash XML Graphic Format)으로 이미지 그리기

플래시 빌더가 4.0으로 업그레이드 되면서 컴포넌트의 스킨을 SparkSkin 클래스를 통해 만들게 됩니다. 이때 컴포넌트의 모양을 그리기 위해 FXG(Flash XML Graphic Format)를 사용합니다. 컴포넌트의 모양 뿐만 아니라 채움이나 선 모양과 색상 등을 포함해 텍스트, 이미지 표현까지 모든 그리기에 대한 방법입니다.

좀더 체계적이고 정리된 프로젝트 진행을 위해 기존에 알고 있는 다소 돌아가는 방법이 아닌 표준화된 방법을 이용해 컴포넌트의 스킨을 세련되게 입히고자 하는 생각에서 FXG에 관심을 가지고 살펴보던 중에.. 실제 컴포넌트에 스킨으로 입힐 이미지를 FXG를 통해 표현하는 코드를 정리해 봅니다.

FXG에서 비트맵 이미지를 표현하기 위한 방법은 2가지입니다. 첫째는 BitmapImage를 이용해 이미지를 그대로 그리는 방법과 BitmapFill를 이용해 대상이 되는 도형에 비트맵을 채워 넣는 방법입니다. 아래의 코드가 바로 위의 2가지 방법에 대한 예제 코드입니다.

아래의 화면은 위의 코드를 통한 실제 결과 화면입니다.