본문 바로가기

Embedded Font


뭐 물른 텍스트필드를 플렉스에서 추가해서 작업하면 되겠지. 그렇게 따진다면 이 포스트는 논외인거고.
 포인트는 디자이너가 준 swf안의 텍스트필드를 바꾸자.

예를 들자.

1.Flex 프로그래머와 Flash 디자이너가 연동한다고 치자.
2.Flash 디자이너가 만들어준 swf를 Flex 프로그래머가 SWFLoader를 통해서 첨부한 후 작업한다 치자.
3.Flash 디자이너가 만들어준건 이쁜 타이틀바라 치자.
  타이틀바는 페이지나 창 등등에서 글자가 타이틀에 맞게 바껴야 한다.
  모든게 같은데 글자만 조금 틀린걸 여러개 만들것인가?

디자이너는 요청에 따라 이쁘게 데코레이션한 타이틀바를 만들었다.
아래처럼
    <디자이너가 플래시에서 디자인 한 swf>
   타이틀바로 안보이겠지만 이쁘게 디자인한 타이틀바다. 타이틀바다. 타이틀바다.(쇠뇌중)
embedwithflash1.swf

 

디자이너가 준 swf를 가지고 플렉스 프로그래머가 SWFLoader를 이용하여 불러와서 만들었다.(역시 swf)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="200" minHeight="100" width="200" height="100">
 <mx:SWFLoader x="0" y="0" width="200" height="100" source="assets/swf/embedwithflash1.swf" autoLoad="true"/>
</mx:Application>


그런데 프로그래머가 타이틀바를 각타이틀바에 맞게 텍스트만 교체 할려고 하는데 안되는것이 아닌가.
디자이너는 이렇게 했던 것이다.


다시 고민하다가 알아냈다. 바로 Dynamic Text로 하고 인스턴스명을 주면 된다는거.
TextField 인스턴스 네임을 title_text로 주기로 서로 약속 하고 디자이너는 다시 swf를 만들어 줬다.


프로그래머는 행복했다.
이제 타이틀바 한개로 글자만 슥슥 바꿔서 할 수 있었던 것이다.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="200" minHeight="100" width="200" height="100">
 <mx:SWFLoader id = "title_bar" x="0" y="0" width="200" height="100" source="assets/swf/embedwithflash1.swf" autoLoad="true" complete="Init();"/>
 <mx:Script>
  <![CDATA[   
   public var headerTitleMovieClip:MovieClip;
   public function Init():void
   {
    headerTitleMovieClip = MovieClip(title_bar.content);
    headerTitleMovieClip.title_text.text = "1번 타이틀 명";
   }   
  ]]>
 </mx:Script>
</mx:Application>

그렇게 작업은 잘 진행 되는 듯 했다.
그러던 어느날 여지 껏 만든 화면을 가지고 마지막 정리 작업을 하기로 했다.
모든게 문제가 없었다. 그런데. 타이틀바를 바라보는 디자이너가 심상치 않았다.
한마디하는 왈 디자인은 같은데 "내가 드렸던 폰트체가 아니네요"
프로그래머 : "어 그러네요. 왜 그렇죠"
소스를 보기 시작했다 flex며 flash며
원하는건 디자이너가 줄때 선택했던 이쁜 폰트체가 그대로 보이게 하면서 글자는 바꿀 수 있게 하는것.

프로그래머는 마악 검색하기 시작했다.
알게 되었다. 디자이너 PC의 Windows/Font에 있는 따로 추가해서 사용중인 폰트를 썻던 것이였다.
다른사람은 그 폰트체가 없기 때문에 당연히 기본 폰트로 대체.
디자이너가 썻던 폰트 명이 방울이라고 치자.
프로그래머 pc는 방울체가 없었다. 그러니 기본체가 대체되어 보인다.
착한 프로그래머는 디자이너가 디자인 했던 대로 똑같이 나오게 최대한 맞춰주고 싶었다.
다시 엄청난 검색을 통하여 알게 되었다. Embedd Font를 쓰면 되것네요.


더 착한 디자이너는 아래 스샷처럼 해서 다시 줬다.
swf를 다시 만들어 줬다.


프로그래머는 받아서 아주 잘 쓰고 있었다.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="200" minHeight="100" width="200" height="100">
 <mx:SWFLoader id = "title_bar" x="0" y="0" width="200" height="100" source="assets/swf/embedwithflash1.swf" autoLoad="true" complete="Init();"/>
 <mx:Script>
  <![CDATA[   
   public var headerTitleMovieClip:MovieClip;
   public function Init():void
   {
    headerTitleMovieClip = MovieClip(title_bar.content);
    headerTitleMovieClip.title_text.text = "1번 타이틀 명";
   }   
  ]]>
 </mx:Script>
</mx:Application>

드디어 프로그래머 PC에 Windows/Font에 방울체가 없음에도 불구하고
방울체가 이쁘게 나오기 시작했다.

그러던 어느날 또 이상한 점이 있었다.
embedd 하지 않았을 때의 디자이너가 준 font와 하고 난뒤의
font 사이즈를 재보니 대략 13배 쯤 더 커져 있었다(꼭 13배쯤은 아니다 내 경우 그렇다 소리)
다시 고민했다.
되는건 좋은데 불필요하게 너무 크게 타이틀에 들어갈 글자는 한정되어 있는데..
하므서 디자이너 자리로 가서 다시 이야기 했다.
타이틀에 들어갈 글자만 추려서 embedd 해서 주세요~

너므너므 천사같은 디자이너는 다시 아래처럼 해서 줬다.


꼭 필요한 문자만 embedd 시켜서 크기를 줄여서 사용했다.


혹시 오다 가다 보다 편한 방법있으면 알려주세요.

초짜라 여기까지 밖에 모르것네요 ㅋㅋ