따뜻한 대한민국 겨울만들기

Embed Font Sharing 에 관해서 많은 검색을 해보았지만..
as2.0에서 사용하는 방법은 그다지 많지 않았고
있다고 해도 사용방법이 각각 달랐습니다.
하지만 as3.0에서 사용하는 방법은 꽤 여러가지 방법들이 있었습니다.

시대에 뒤떨어지는 것 같지만
아직 as2.0을 사용하는 사람들이 많이 있다는 가정하에
많은 사람들이 이미 알고 계시겠지만..
다른분들을 위해서..

나름대로 정리한 Embed Font Sharing 사용방법에 대해서 말해보겠습니다.

이 방법을 쓰는 이유는 컴파일 시간단축
제일 중요한 파일용량 감소!! 입니다.

그럼 저는 "-윤고딕340" 이라는 폰트를 공유하기 위해 작업을 시작하겠습니다.

먼저 공유할 때 쓰이는 yungo_340.fla 라는 파일을 만들겠습니다.
(추후에 계속 사용하기 위해서 파일명은 폰트명과 느낌이 비슷하게..)

yungo_340.fla에서 라이브러리 우클릭하여 New Font를 클릭합니다.

사용자 삽입 이미지

 위와 같이 "-윤고딕340" 의 새폰트를 라이브러리에 추가하겠습니다.

사용자 삽입 이미지

그리고 Export for runtime sharing 외 2가지를 체크하여 줍니다.
URL 부분은 "yungo_340.swf"로
자신이 컴파일된 swf파일의 이름을 입력합니다.
(이 URL은 나중에 서버에 올릴때도 변함없습니다. 즉 http://~~를 붙여줄 필요가 없습니다.)

그럼 공유할 폰트를 만들었습니다.
다음엔 이 공유폰트를 사용할 무비클립을 만들겠습니다.

사용자 삽입 이미지

아무것도 체크하지 말고 우선 yungo_340_mc라는 무비클립만 만듭니다.

사용자 삽입 이미지

이렇게 하나의 폰트와 무비클립을 만들었습니다.
다음으론 이 무비클립에 좀 전에 만든 폰트를 사용해 보겠습니다.

yungo_340_mc라는 무비클립을 열어서 TextField 하나를 드레그합니다.
TextField 설정을 아래와 같이 해줍니다.

사용자 삽입 이미지

설정은 Dynamic / Input Text 어느것이든 상관없습니다.

여기서 중요한건 폰트를 yungo_340* 로 선택합니다.
요 (*)별표가 꼭 붙어있어야 합니다.

이것은 압전에 제가만든 "-윤고딕340" 폰트심볼을 가리킵니다.
다음 다른설정은 건들지 말고...설정을 완료합니다.

사용자 삽입 이미지

이 무비클립 역시 Export for runtime sharing외 2가지를 클릭해주고
URL도 폰트심볼 만들때와 마찬가지로 셋팅하여 줍니다.

여기까지가 되었으면 이제 공유할 파일이 완성되었습니다.

컴파일을 합니다.
.
.
.

다음은 이 yungo_340.swf 를 공유해서 사용할 파일을 만들겠습니다.

이름은 font_test.fla 로 하겠습니다.
이 도큐먼트 문서에 좀전에 만든 yungo_340.fla 의 라이브러리 창을 열어서

yungo_340_mc라는 무비클립만 드래그하여
font_test.fla 라이브러리로 가져옵니다.
아래와 같이 말입니다.

드래그 시 없는 폰트라고 얼럿 창이 떠도 그냥 무시하시기 바랍니다.
당연히 yungo_340*란 폰트는 플래시 폰트 목록엔 없습니다.
하지만 저희는 공유해서 쓸것이므로 그냥 무시!!

사용자 삽입 이미지

font_test.fla 라이브러리로 드래그 하여 가져온 무비클립의 링키지 속성을 보면
아래와 같이 런타임시 URL의 yungo_340.swf파일을 불러들인다는
설정이 되어있을 것입니다.(자동으로)

사용자 삽입 이미지

위의 URL은 서버에 올릴 시 변경해 주어야 합니다.

저같은 경우는 서버에 embed_font 라는 폴더를 만들어서
입맛에 맞는 폰트들만 작업하여 올려놓았습니다.

예를들면 URLhttp://www.xxx.com/embed_font/verdana.swf와 같이 적어줍니다.

윤디자인웹돋움은
http://www.xxx.com/embed_font/yun_web_dotum.swf와 같이...

( 누르진마세요!!  )

지금은 같은 폴더에서 테스트 중이므로
URL은 그냥 yungo_340.swf라고 적어줄께요.

프로젝트를 진행할때마다 위의 폰트파일들를 공유하여 사용하는거죠...

자 그럼 공유할 폰트 무비클립도 가져왔으니...
이제는 빈 TextFieldfont_test.fla 에 하나 만들어
이 공유폰트를 적용시키는 일만 남았습니다.

빈 텍스트필드의 설정은 아래와 같이 해줍니다.

사용자 삽입 이미지

제가 만든 폰트가 "-윤고딕340"이므로 폰트선택란에 "-윤고딕340"을 선택합니다.
다른폰트를 지정하면 폰트공유가 적용되지 않습니다.

그리고 이 텍스트필드의 인스턴스 네임을 "txt"로 지정합니다.
(이것 역시 Input/Dynamic Text 상관없습니다.)

그럼 적용시킬 빈 텍스트필드도 만들었고...
라이브러리의 폰트 무비클립을 어떻게 적용시키냐만 남았는데요..

적용방법은...

라이브러리의 폰트 무비클립(yungo_340_mc)을 드래그하여
메인 도큐먼트에 올려놓습니다.

아래 그림과 같이 말입니다.

사용자 삽입 이미지

여기서 왼쪽은 폰트공유를 위해 드래그한 yungo_340_mc이구요.
오른쪽은 폰트공유를 적용시킬(txt) 텍스트필드입니다.

이 텍스트필드에 액션을 적용합니다.

txt.antiAliasType = "advance";
txt.embedFonts = true;

컴파일 후 확인하면 폰트가 공유되어진것을 확인하실 수 있을 것입니다.
swf 용량을 확인해 보면

완전 작습니다.!!


아래는 EmbedFontSharing.as라는 유틸 클래스를 만들어
사용하는 또하나의 방법입니다.

사용자 삽입 이미지


사용자 삽입 이미지

너무 두서없었네요...
다시한번 정리를 해야할거 같아요 ㅜ
수고하세요~

http://www.2rang.com

  1. josang

    | 2010.03.08 07:07 | PERMALINK | EDIT | REPLY |

    폰트임베드시키는 방법을 많이 찾아다녔지만 이렇게 잘 정리된곳이 없었습니다!
    정말 감사합니다.

  2. BlogIcon 꽃녀

    | 2010.03.22 10:53 신고 | PERMALINK | EDIT |

    헉.. 감사합니다 __;;;
    as2를 하시고 계시는군요~! ^^
    방문 감사드립니다.

Write your message and submit
« PREV : 1 : ··· : 57 : 58 : 59 : 60 : 61 : NEXT »