원문
http://www.adobe.com/devnet/flash/quickstart/embedding_fonts/



글꼴 끼워넣기


애플리케이션에서 TextField에 글꼴을 적용할 때, 플래시 플레이어는 같은 이름의 장치 글꼴(사용자의 컴퓨터에 들어 있는 글꼴)을 찾는다. 사용자의 시스템에서 그런 글꼴을 찾지 못했거나 이름은 같지만 글꼴의 버전이 조금이라도 다르다면, 텍스트는 의도한 것과 매우 다르게 표시될 것이다.

사용자가 올바른 글꼴을 정확히 볼 수 있게 그 글꼴을 애플리케이션의 SWF 파일에 끼워넣을 수 있다. 끼워넣은 글꼴에는 다음 이점들이 있다.

● 끼워넣은 글꼴 문자는 계단 현상이 방지되고(anti-aliased), 특히 큰 텍스트의 가장자리를 부드럽게 만들어준다.
● 끼워넣은 글꼴을 사용한 텍스트는 돌릴 수 있다.
● 끼워넣은 글꼴 텍스트는 투명하거나 반투명하게 만들 수 있다.
● 끼워넣은 글꼴에 자간 CSS 스타일을 사용할 수 있다.
● 트루타입 글꼴과 Type 1 Postscript 글꼴을 포함해, 시스템에 설치된 거의 모든 글꼴을 끼워넣을 수 있다.

끼워넣은 글꼴을 사용할 때 주된 제약은, 끼워넣은 글꼴은 애플리케이션의 파일 크기나 다운로드 크기를 늘린다는 점이다.

플래시 애플리케이션에는 다음을 포함해 글꼴을 끼워넣는 방법이 많다.

● 스테이지의 동적 또는 입력 TextField의 font 또는 style 속성 설정과 임베드 버튼 클릭하기.
● 글꼴 심볼 만들고 참조하기. 이 글에서 다룸.
● 끼워넣어진 글꼴 심벌을 포함하는 런타임 공유 라이브러리 만들고 사용하기. 이 글에서는 다루지 않음.
한상훈님께서 런타임 공유 글꼴에 대한 글을 게시했습니다 +_+
http://hangunsworld.com/blog/330


글꼴 심벌 만들기

글꼴 심벌을 만들려면, 라이브러리의 팝업 메뉴(라이브러리 패널의 오른쪽 위에 있음)에서 New Font를 선택한다. 글꼴 심벌의 속성들을 기입할 수 있는 Font Symbol Properties 대화상자가 열린다.

사용자 삽입 이미지
그림 1. 플래시 문서의 라이브러리에서 글꼴 심벌 만들기


글꼴 심벌 속성 설정하기

Font Symbol Properties 대화상자에서 글꼴 심벌의 이름을 정의할 수 있다. 글꼴 이름은 라이브러리 패널에 들어갈 심벌의 이름이다. 액션스크립트를 사용해 이 글꼴에 동적으로 접근하려면 글꼴의 linkage 속성을 설정해야 한다. 글꼴 팝업 메뉴로 현재 컴퓨터에 설치된 글꼴의 목록에서 원하는 글꼴을 선택할 수 있다.

글꼴 라이브러리 항목 만들기 :
 1. 글꼴 심벌을 추가하길 원하는 라이브러리를 연다.
 2. 라이브러리 패널 메뉴에서 New Font를 선택한다.
 3. Name 필드에 글꼴 이름을 입력한다.
 4. Font 메뉴에서 글꼴을 선택하거나 Font 필드에 직접 글꼴 이름을 입력한다.
 5. (선택) Bold 또는 Italic을 선택한다.
 6. (선택) 글꼴 정보를 벡터 외곽선 데이터 대신 비트맵 데이터로 끼워넣으려면 Bitmap Text 옵션을 선택하고  Size 텍스트 필드에 글꼴 크기를 입력한다. (비트맵 글꼴은 계단 현상 방지(anti-aliasing)를 사용할 수 없다. Bitmap Text를 선택한다면, 이 글꼴을 사용하는 텍스트의 Property 패널에서 Bitmap Text as the anti-aliasing 옵션을 선택해야 한다.

잠깐 : Size 설정은 Bitmap Text 옵션을 선택했을 때만 적용된다. 보통 TextFormat 객체로 텍스트의 사이즈를 설정할 수 있다.

사용자 삽입 이미지
그림 2. 글꼴 심벌의 속성 기입하기

잠깐 : 라이브러리에서 심벌을 오른쪽 클릭하고 컨텍스트 메뉴에서 Properties를 선택해서 언제든지 심벌의 속성을 수정할 수 있다.


글꼴 심벌의 linkage 속성 설정하기

새 Font 인스턴스를 동적으로 만들기 전에, 그것의 linkage 클래스 이름 정의가 필요하다. linkage 클래스를 설정하려면

 1. 라이브러리에서 글꼴 심벌을 오른쪽 클릭하고 Linkage를 선택한다.
 2. Export for ActionScript를 선택하고 클래스 이름을 입력한다 (그림 3을 보라).
 3. OK를 누른다.

사용자 삽입 이미지

그림 3. Linkage Properties 대화 상자에서 linkage 클래스 설정하기.

잠깐 : Linkage Properties 대화상자에서, 아마도(즉, 안 보일 수도 있다) 기입된 클래스를 위한 정의를 클래스패스에서 찾을 수 없다는 액션스크립트 클래스 경고를 만날 것이고, 당신을 위해 하나를 자동으로 만들 것이다. OK를 누른다.


액션스크립트를 사용해 새로운 글꼴 심벌 만들기

라이브러리에 글꼴 심벌이 있으며 linkage 클래스가 정의되었다면, new 연산자와 linkage 클래스 이름을 기입하여 글꼴 심벌의 인스턴스를 만들 수 있다. 끼워넣은 글꼴을 동적으로 생성된 TextField에 적용하려면 다음을 따른다.

● TextFormat 객체를 만들고, 그것의 font 속성을 끼워넣은 글꼴의 이름으로 설정하고, TextFormat 객체를 TextField에 적용한다. 끼워넣은 글꼴을 기입할 때, font 속성은 하나의 이름만을 가져야 한다. 콤마로 구분된 여러 글꼴 이름의 목록을 사용할 수 없다.
● TextField의 글꼴을 설정하기 위해 CSS 스타일을 사용할 경우, 끼워넣은 글꼴의 이름을 CSS의 font-family 속성에다 기입한다. font-family 속성은 하나의 이름만을 포함해야 하고 이름들의 목록이 될 수 없다.
● TextFIeld의 embedFonts 속성을 true로 설정한다.

다음 예제는 라이브러리의 linkage 클래스 이름이 Font1인 글꼴 심볼을 기반으로 새로운 글꼴 인스턴스를 만든다. 그리고 TextFormat 객체를 만들어 그것의 글꼴 이름을 myFont 인스턴스의 fontName으로 설정한다.

예제
다음 예제는 새로운 Font, TextFormat, TextField 인스턴스를 만들고 TextField 인스턴스의 embedFonts 속성을 true로 설정한다.

잠깐 : 라이브러리에 linkage 클래스가 Font1인 글꼴 심벌이 필요하다.

// 문서의 라이브러리에 있는 Font1 심벌의 새로운 인스턴스를 만든다.
var myFont:Font = new Font1();

// 새로운 TextFormat 객체를 만들고, font 속성을 myFont 객체의 fontName 속성으로 설정한다.
var myFormat:TextFormat = new TextFormat();
myFormat.font = myFont.fontName;
myFormat.size = 24;

// 새로운 TextField 객체를 만들고, defaultTextFormat 속성을 사용해 텍스트 포맷을 할당하고,
// embedFonts 속성을 true로 설정한다.
var myTextField:TextField = new TextField();
myTextField.autoSize = TextFieldAutoSize.LEFT;
myTextField.defaultTextFormat = myFormat;
myTextField.embedFonts = true;
myTextField.text = "The quick brown fox jumped over the lazy dog.";
addChild(myTextField);


결과

[Flash] http://liverwort.tistory.com/attachment/fk200000000000.swf

이 예제의 소스 코드를 내려받으라 :
embeddingfonts_section4_example1.zip (ZIP, 8K)


향상된 계단 현상 방지(anti-aliasing) 설정하기

끼워넣은 글꼴으로 작업할 때, 텍스트 필드의 antiAliasType 속성에 flash.text.AntiAliasType 클래스의 값을 넣어서 anti-aliasing 타입을 normal 또는 advanced로 설정할 수 있다.

예제
다음 예제는 글꼴 심벌의 새로운 인스턴스를 만들고, 끼워넣은 글꼴을 텍스트 필드에 쓸 수 있게 하고, anti-alias 타입을 advanced로 설정한다.

잠깐 : 라이브러리에 Font1이라는 linkage 클래스가 Font1인 글꼴 심벌이 필요하다.

// 문서의 라이브러리에 있는 Font1 심벌의 새로운 인스턴스를 만든다.
var myFont:Font = new Font1();

// 새로운 TextFormat 객체를 만들고, font 속성을 myFont 객체의 fontName 속성으로 설정한다.
var myFormat:TextFormat = new TextFormat();
myFormat.font = myFont.fontName;
myFormat.size = 24;

// 새로운 TextField 객체를 만들고, defaultTextFormat 속성을 사용해 텍스트 포맷을 할당하고,
// embedFonts 속성을 true로 설정하고, antiAliasType 속성을 "advanced" 로 설정한다.
var myTextField:TextField = new TextField();
myTextField.autoSize = TextFieldAutoSize.LEFT;
myTextField.defaultTextFormat = myFormat;
myTextField.embedFonts = true;
myTextField.antiAliasType = AntiAliasType.ADVANCED;
myTextField.text = "The quick brown fox jumped over the lazy dog.";
addChild(myTextField);


결과

[Flash] http://liverwort.tistory.com/attachment/ek200000000000.swf

이 예제의 소스 코드를 내려받으라 :
embeddingfonts_section5_example1.zip (ZIP, 5K)


예제
다음 예제는 새로운 텍스트 필드를 만들고 사용자가 글꼴 끼워넣음 여부, anti-aliasing 사용 여부, 텍스트 필드의 텍스트 크기를 선택하게 한다.

잠깐 : 라이브러리에 linkage 클래스가 Font1인 글꼴 심벌, CheckBox 컴포넌트, ComboBox 컴포넌트, Slider 컴포넌트가 필요하다. 컴포넌트들을 스테이지로 끌어놓고 지워서 라이브러리에 쉽게 추가할 수 있다.

// 필요한 컴포넌트 클래스들을 임포트한다.
import fl.controls.CheckBox;
import fl.controls.ComboBox;
import fl.controls.Slider;
import fl.events.SliderEvent;

// 문서의 라이브러리에 있는 Font1 심벌의 새로운 인스턴스를 만든다.

var myFont:Font = new Font1();

// 새로운 TextFormat 객체를 만들고, font 속성을 myFont 객체의 fontName 속성으로 설정한다.
var myFormat:TextFormat = new TextFormat();
myFormat.font = myFont.fontName;
myFormat.size = 24;

// 새로운 TextField 객체를 만들고, defaultTextFormat 속성을 사용해 텍스트 포맷을 할당하고,
// embedFonts 속성을 true로 설정하고, antiAliasType 속성을 "normal" 로 설정한다.
var myTextField:TextField = new TextField();
myTextField.autoSize = TextFieldAutoSize.LEFT;
myTextField.defaultTextFormat = myFormat;
myTextField.embedFonts = true;
myTextField.antiAliasType = AntiAliasType.NORMAL;
myTextField.text = "The quick brown fox jumped over the lazy dog.";
addChild(myTextField);

// embedFonts 속성을 켜고 끄는 데 쓸 CheckBox 컴포넌트 인스턴스를 만든다.
var embedFontsCheckBox:CheckBox = new CheckBox();
embedFontsCheckBox.label = "embedFonts";
embedFontsCheckBox.move(0, 50);
embedFontsCheckBox.selected = myTextField.embedFonts;
embedFontsCheckBox.addEventListener(Event.CHANGE, checkBoxChangeHandler);
addChild(embedFontsCheckBox);

// anti-aliasing을 normal과 advaced로 켜고 끄는 데 쓸 ComboBox 컴포넌트 인스턴스를 만든다.
var antiAliasTypeComboBox:ComboBox = new ComboBox();
antiAliasTypeComboBox.addItem({data:AntiAliasType.NORMAL, label:"AntiAliasType.NORMAL"});
antiAliasTypeComboBox.addItem({data:AntiAliasType.ADVANCED, label:"AntiAliasType.ADVANCED"});
antiAliasTypeComboBox.enabled = myTextField.embedFonts;
antiAliasTypeComboBox.width = 200;
antiAliasTypeComboBox.move(150, 50);
antiAliasTypeComboBox.addEventListener(Event.CHANGE, comboBoxChangeHandler);
addChild(antiAliasTypeComboBox);

// 글꼴 크기를 설정하는데 쓸 Slider 컴포넌트 인스턴스를 만든다.

var fontSizeSlider:Slider = new Slider();
fontSizeSlider.minimum = 8;
fontSizeSlider.maximum = 24;
fontSizeSlider.value = Number(myFormat.size);
fontSizeSlider.tickInterval = 2;
fontSizeSlider.liveDragging = true;
fontSizeSlider.move(400, 56);
fontSizeSlider.addEventListener(SliderEvent.CHANGE, sliderChangeHandler);
addChild(fontSizeSlider);

// CheckBox 컴포넌트 인스턴스를 위한 핸들러 함수.
// 이 함수는 CheckBox의 현재 값에 의존해 ComboBox 인스턴스의 enabled 속성을 토글한다.
function checkBoxChangeHandler(event:Event):void {
    myTextField.embedFonts = CheckBox(event.currentTarget).selected;
    antiAliasTypeComboBox.enabled = CheckBox(event.currentTarget).selected;
}

// ComboBox 컴포넌트 인스턴스를 위한 처리자 함수.
// 이 함수는 텍스트 필드의 antiAliasType 속성을
// ComboBox에서 현재 선택된 항목의 값에 의존해 설정한다.
function comboBoxChangeHandler(event:Event):void {
    myTextField.antiAliasType = ComboBox(event.currentTarget).selectedItem.data;
}

// Slider 컴포넌트 인스턴스를 위한 처리자 함수.
// 이 함수는 텍스트 포맷의 글꼴 크기를 슬라이더의 현재 값에 기반해 설정하고
// setTextFormat() 메서드를 사용해 텍스트 필드의 텍스트 포맷을 갱신한다.
function sliderChangeHandler(event:SliderEvent):void {
    myFormat.size = event.value;
    myTextField.setTextFormat(myFormat);
}


결과

[Flash] http://liverwort.tistory.com/attachment/ek200000000001.swf

이 예제의 소스 코드를 내려받으라 :
embeddingfonts_section5_example2.zip (ZIP, 448K) 

귀띔 : advanced anti-aliasing의 이점은 작은 글꼴에서 나타난다. 이전 예제에서, 끼워넣은 글꼴을 쓰게 하고, advanced anti-aliasing을 선택하고, 슬라이더에서 글꼴 크기를 최솟값(8 포인트)으로 설정해보라.


끼워넣은 글꼴과 Tween 클래스를 사용한 텍스트 페이딩(fading)

라이브러리에 글꼴 심벌이 있으니, 텍스트를 페이드시키고 돌릴 수 있고, 사용자의 컴퓨터에 없는 글꼴을 사용할 수 있다.

다음 예제는 액션스크립트 3.0의 Tween 클래스를 사용해 페이드 인-아웃되고 돌아가는 텍스트를 만드는 방법을 보여준다.

예제
다음 예제는 Tween 클래스를 사용해서 텍스트 필드의 alpha 속성을 조절한다.

잠깐 : 라이브러리에 Font1이라는 linkage 클래스가 Font1인 글꼴 심벌이 필요하다.

// 필요한 transition 클래스들을 임포트한다.
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

// 문서의 라이브러리에 있는 Font1 심벌의 새로운 인스턴스를 만든다.
var myFont:Font = new Font1();

// 새로운 TextFormat 객체를 만들고, font 속성을 myFont 객체의 fontName 속성으로 설정한다.
var myFormat:TextFormat = new TextFormat();
myFormat.font = myFont.fontName;
myFormat.size = 24;

// 새로운 TextField 객체를 만들고, defaultTextFormat 속성을 사용해 텍스트 포맷을 할당하고,
// embedFonts 속성을 true로 설정하고, antiAliasType 속성을 "advanced" 로 설정하고,
// 텍스트 필드를 돌린다.
var myTextField:TextField = new TextField();
myTextField.autoSize = TextFieldAutoSize.LEFT;
myTextField.embedFonts = true;
myTextField.antiAliasType = AntiAliasType.ADVANCED;
myTextField.defaultTextFormat = myFormat;
myTextField.text = "The quick brown fox jumped over the lazy dog.";
myTextField.border = true;
myTextField.x = 15;
myTextField.y = 5;
myTextField.rotation = 15;
addChild(myTextField);

// 텍스트 필드의 alpha 속성을 페이드할 새로운 Tween 객체를 만든다.

var fadeTween:Tween = new Tween(myTextField, "alpha", Strong.easeIn, 1, 0, 2, true);
fadeTween.addEventListener(TweenEvent.MOTION_FINISH, motionFinishHandler);

// 페이드 트윈을 위한 처리자. 트윈이 motionFinish 이벤트를 전달하면,
// 이 함수는 호출을 받아 트윈의 방향을 뒤집는다.
function motionFinishHandler(event:TweenEvent):void {
    Tween(event.currentTarget).yoyo();
}

결과

[Flash] http://liverwort.tistory.com/attachment/fk200000000001.swf


이 예제의 소스 코드를 내려받으라 :
embeddingfonts_section6_example1.zip (ZIP, 5K)


관련된 플래시 Quick Start들

저자에 대해

Peter deHaan은 여럿 중 특히 어도비의 Programming ActionScript 3.0 안내서와 ActionScript Language Reference 안내서를 제작하는 Platform Documentation 팀에서 일합니다. Peter는 플래시, 플렉스, 콜드퓨전 애플리케이션으로 작업하지는 않지만 Dance Dance Revolution 플레이를 즐깁니다. Peter가 드물게 업데이트하는 블로그를 http://blogs.adobe.com/pdehaan/http://blog.flexexamples.com/에서 볼 수 있습니다.

Posted by codeonwort
,