지돌스타의 Flex와 천문프로그래밍

Flex 컴포넌트를 회전하면 그 안에 입력된 문자(한글,영어든 모두)가 지워지는 현상이 발생한다.
이러한 현상을 방지하기 위해 임의의 폰트를 Embed 시키는 방법이나 Bitmap을 이용하는 방법을 사용해야한다.
하지만 Textarea와 같은 컴포넌트는 직접 한글 또는 영문을 입력해야하므로 Bitmap을 이용하는 방법은 사용할 수 없다.

Textarea에 한글을 입력할 수 있도록 임의의 트루타입폰트(TTF, True Type Font)를 Embed하여 확장한 RatationTextarea 커스텀 컴포넌트(Custum Component)를 만들어 보았다.

아래 실행 파일에 보면 실제로 문자를 입력할 수 있다. 직접 해보기 바란다.

아래는 소스파일이다.

RotationTextArea.mxml (Language : xml)

RotationTextarea.mxml (Language : xml)
<?xml version="1.0" encoding="utf-8"?>
<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml" styleName="fontStyle">
    <mx:Script>
            [Embed(mimeType='application/x-font', source='/assets/font/ahn_m.ttf', fontName='myfont')]
            private var myFontClass:Class;
    </mx:Script>   
    <mx:Style>
        .fontStyle {
            fontFamily:myfont;
            fontSize:14;
            borderThickness: 4;
            borderColor: #ff0000;
            cornerRadius: 7;
            dropShadowEnabled: true;
            shadowDirection: right;
      shadowDistance: 8;
      focusAlpha : 0;
      focusThickness : 0;
      focusRoundedCorners : "tl tr bl br"
        }
    </mx:Style>     
</mx:TextArea>
 

RotationTextAreaText.mxml (Language : xml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" backgroundColor="#a3edca">
    <local:RotationTextArea width="180" height="193" rotation="10" x="184" y="2" htmlText="회전됩니다. 하하하" />
    <local:RotationTextArea width="118" height="148" rotation="-20" x="10" y="47" htmlText="이 상태에서 적을 수 있어요 한번 해보세요^^"/>
    <local:RotationTextArea width="175" height="199" rotation="0" x="39" y="176" text="회전안한거"/>
</mx:Application>
 

위의 소스에서 RatationTextArea.mxml을 살펴보면 이색으로 색칠되어진 부분이 있는데 이것은 TextArea에 Focus가 잡힐때 테두리 설정을 의미한다. 여기서 focusAlpha를 1로 하고 focusThickness를 10으로 하고 다시 컴파일해서 만든 프로그램이 바로 아래에 보여지고 있다.
아래 프로그램에서 아무 TextArea를 선택해보면 Focus가 잡힐때 외곽으로 파란색 테두리가 생긴다.

그런데 아래와 그림과 같이 focus를 잡아보자...
헉~이다. 맨 아래 Component를 처음 선택했을때는 Focus에 이상이 없다. 하지만 다른 component를 선택후 아래 component를 다시 선택하면 이전 component 선택한 방향으로 돌아서 Focus가 잡힌다.



정확한 이유은 모르겠지만 Textarea Component 자체에 이상이 있는 것으로 보인다.
그래서 나는 어쩔 수 없이 focusThickness를 0 으로 잡음으로써 테두리가 안나오게 해서 문제를 해결했다.
필요하다면 focus 잡히는 경우 Event 함수를 만들어서 나만의 focus 테두리를 만들도록 해야할 것 같다.

그리고 폰트는 컴파일시 Embed하므로 SWF용량이 크다. 이것을 개선하기 위해 동적으로 Font를 불러서 적용시켜야 할 것 같은데 어떻게 해야할지 모르겠다. 또 다양한 폰트를 적용할려면 꼭 그렇게 해야한다.

이 문제에 대해 근본적인 해결 방법이 있으신 분은 같이 공유했으면 한다.

결론

Textarea를 확장하여 Font Embed를 방법을 이용해 회전한 글자를 입력이 가능한 Textarea를 만들어 보았다.
하지만 아직 해결해야할 것이 있다.

1. focus 문제
2. 동적으로 폰트를 적용
   

이 문제에 대해서 방법이 있으신 분은 꼭 같이 공유했으면 한다.

참고자료

임의의 폰트를 Embed 시키는 방법
Bitmap을 이용하는 방법

무료 폰트 받을 수 있는 곳

위 소스에서 폰트를 Embed할 때 source='/assets/font/ahn_m.ttf' 부분 이 있는데 이 부분에 아래에서 무료폰트를 다운로드 받아 경로와 폰트명만 적어주고 컴파일 하면된다. 한글입력이 잘 안되는 폰트도 있으므로 참고하기 바란다.

NZEO : http://www.nzeo.com/bbs/zboard.php?id=download_font
폰트공작소 : http://cafe.naver.com/font1.cafe 
ITStudy 무료폰트다운 : http://www.itstudy.co.kr/root.php?sub=f ··· te%3Doff 

참고로 C:\Windows\font\ 폴더에도 트루타입폰트(TTF) 파일 많습니다.

글쓴이 : 지돌스타(http://blog.jidolstar.com/190  )

이 글의 관련글

• [Flex] 폰트를 런타임(run time)시 동적으로 불러와 [태그고리:Flex/폰트회전/회전/font/폰트]
• [Flex, Flash] 폰트(font) Embed의 이점과 제한점 [태그고리:Flex/font/폰트]
• [Flex] 시계 컴포넌트 [태그고리:Flex/Component/컴포넌트]
• [Flex, AIR] 프로그램 크기를 줄여보자 2 - 폰트(font [태그고리:Flex/font/폰트]
• [Flex] 스킨(Skin)을 이용하여 확장가능한 게이지 컴 [태그고리:Flex/Component/컴포넌트]
• Flex Component간 종속성을 없애보자 (Event 사용하자 [태그고리:Flex/Component/컴포넌트]
• [Flex] 비주얼 컴포넌트 라이프 사이클(Life Cycle) [태그고리:Flex/Component/컴포넌트]
• Flex 2 컴포넌트 제작과 확장 [태그고리:Flex/Component/컴포넌트]
• [Flex 2.0.1]Label위에 올라온 한글 폰트 회전 시키기 [태그고리:Flex/폰트회전/font rotation]
• [Flex]동적으로 스킨을 적용시킨 시계 컴포넌트 제작 [태그고리:Flex/컴포넌트]

* 태그고리란? 이 글에서 사용된 태그중 어떤 태그와 연결되어 있는지 알수 있는 태그.

오늘의 인기글

• (동영상) 대한민국의 땅, 독도 (30)
• [Flex, ActionScript 3] ActionScript 계산 속도 최.. (22)
• [Flex]한글폰트 입력이 가능한 회전하는 Textarea.. (17)
• [CSS/XHTML] 색을 지정할 수 있는 Select 태그 (14)
• [Flex] MXML에서 사용하는 Non Visual 컴포넌트 제.. (13)

전체조회 9029 : 오늘조회 18