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

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

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

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


    



    
        
    

아래의 화면은 위의 코드를 통한 실제 결과 화면입니다.사용자 삽입 이미지

ActionScript 코드 최적화 항목

이번 핑거아이즈의 속도 개선을 위한 전반적인 코드 리팩토링 시에 고려했던 최적화 항목입니다. 위의 항목중 2/3정도만 반영되었고.. 나머지는 반영하지 못했습니다. 코드 최적화 작업 시간을 따로 마련해 놓지 말고.. 코드 작성 시에 미리 미리 고려해 적용해 놓아야한다는 당연한 진리를 새삼 깨닫게 되었습니다.

  1. 가능하다면 Sprite 대신에 Shape 사용하기
  2. cacheAsBitmap 적절히 사용하기
  3. 라벨에 대해 TextField 보다는 FTE(Flash Text Engine) 사용하기
  4. 가능하다면 mouseChildren, mouseEnable을 false 지정하기
  5. Array 대신 Vector. 사용하기
  6. 드로잉 API(drawPath, drawGraphicsData, drawTriangles) 사용하기
  7. object cache 전략 사용하기
  8. 폴리곤 내부 판정은 hitTestPoint보다 직접 구현해 사용하기
  9. 파생될 일이 없는 클래스는 final로 지정하기
  10. floor, ceil은 int 형변환으로 대체하기(floor(1.5) -> int(1.5), ceil(1.5) -> int(1.5)+1)
  11. abs보다는 직접 -1을 곱하는 방식으로 처리하기
  12. for 반복문 대신 for each 문 사용하기

여하튼… 위의 최적화 코드등을 통해 기존 속도 대비 10%정도 향상된듯합니다만… 체감하기는 어려운 향상인지라 다소 아쉬움이 많이 남습니다.

[ActionScript] 문자열에 대한 Trim 함수

액션 스크립트는 문자열에 대한 Trim 함수를 제공하지 않습니다. 해서 제가 사용하고 있는 Trim 함수를 소개해 드립니다. 재귀호출 함수를 사용해서 그다지 속도는 나질 않지만…. 제가 사용함에 있어서 문제가 없기에 소개해 드립니다.

public class StringHelper
{
    static public function trim(str:String, char:String):String {
        return trimBack(trimFront(str, char), char);
    }
  
    static public function trimFront(str:String, char:String):String {
        char = stringToCharacter(char);
        if (str.charAt(0) == char) {
            str = trimFront(str.substring(1), char);
        }
        return str;
    }
  
    static public function trimBack(str:String, char:String):String {
        char = stringToCharacter(char);
        if (str.charAt(str.length - 1) == char) {
            str = trimBack(str.substring(0, str.length - 1), char);
        }
        return str;
    }

    static public function stringToCharacter(str:String):String {
        if (str.length == 1) {
            return str;
        }
        return str.slice(0, 1);
    }
}

사용방법은 StringHelper.trim(”    ABC    “, ” “)와 같으며 이에 대한 결과는 “ABC”가 됩니다. 참고로 이 함수는 제가 만든 것이 아니고 외국의 블로그에서 발췌해 사용한 것인데… 어느 블로그인지.. 시간이 많이 흘러 알수가 없네요..

[ActionScript] object에 저장된 값 읽기

액션스크립트의 최상위 객체인 Object는 해쉬 테이블 자료구조입니다. 즉, 키와 값으로 구성된 리스트입니다. 키의 타입은 문자열이며 값의 타입은 다시 Object라고 이해하면 별 무리가 없을 것입니다. Object의 이러한 특성으로 인해 액션스크립트를 이용해 매우 유연한 코딩을 가능하게 해줌과 동시에 이러한 애매모호한 타입에 대해 별도의 문서와 주석이 없을 경우 유지보수에 상당한 비용이 발생하게 됩니다. 뭐 여튼… Object에 저장된 키와 값에 대한 리스트를 얻어오는 코드가 이 글의 주요 정리 내용입니다. 필요할때.. 맨날~ 까먹기에.. 정리해 봅니다.

for(var key:String in _conditionsCtrls)
{
    var wc:IWhereConditionable = _conditionsCtrls[key] as IWhereConditionable;

    ....

위의 코드에서 Object 타입의 _conditionsCtrls에 저장된 키 문자열을 key라는 변수에 할당하고 이렇게 얻은 키를 통해 _conditionsCtrls[key]와 같은 형식으로 Object 타입의 값을 얻어옵니다. Object 타입이니.. 형변환을 통해 원하는 타입으로 변환할 수 있습니다.