원문
http://www.adobe.com/devnet/flash/quickstart/embedding_fonts/
폰트 임베딩
애플리케이션에서 TextField에 폰트를 쓸 때, 플래시 플레이어는 같은 이름의 장치 폰트(사용자의 컴퓨터에 들어있는 폰트)를 찾는다. 만약 사용자의 시스템에서 그런 폰트를 찾지 못했다면, 또는 같은 이름의 조금이라도 다른 버전의 폰트를 가지고 있다면, 텍스트는 의도한 것과는 매우 다르게 표시될 것이다.
사용자가 올바른 폰트를 정확히 볼 수 있게 하기 위해 그 폰트를 애플리케이션의 SWF 파일에 끼워넣을 수 있다. 임베드된 폰트는 다음 이점들을 가진다 :
● 임베드된 폰트 문자는 anti-alias되고, 특히 큰 텍스트의 가장자리를 부드럽게 만들어준다.
● 임베드된 폰트를 사용한 텍스트를 돌릴 수 있다.
● 임베드된 폰트 텍스트는 투명 또는 반투명하게 만들 수 있다.
● 임베드된 폰트에 자간 CSS 스타일을 사용할 수 있다.
● 트루타입 폰트와 Type 1 Postscript 폰트를 포함해, 시스템에 설치된 거의 모든 폰트를 임베드할 수 있다.
임베드된 폰트 사용의 주 제약은 임베드된 폰트는 애플리케이션의 파일 크기 또는 다운로드 크기를 증가시킨다는 점이다.
플래시 애플리케이션에서 임베드 폰트에는 다음 것들을 포함해 많은 방법이 있다 :
● 스테이지의 동적 또는 입력 TextField의 font 또는 style 속성 설정과 임베드 버튼 클릭하기.
● 이 글에서 다룰, 폰트 심볼 만들고 참조하기.
● 이 글에서는 다루지 않는, 임베드된 폰트 심벌을 포함하는 런타임 공유 라이브러리 만들고 사용하기.
한상훈님께서 런타임 공유 폰트에 대한 글을 올리셨습니다 +_+
http://hangunsworld.com/blog/330
새로운 폰트 심벌 만들기
새로운 폰트 심벌을 만들려면, 라이브러리의 팝업 메뉴(라이브러리 패널의 오른쪽 위에 있는)에서 New Font를 선택한다. 이것은 폰트 심벌의 속성들을 기입할 수 있는, Font Symbol Properties 대화상자를 연다.
폰트 심벌 속성 설정하기
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 객체로 텍스트의 사이즈를 설정할 수 있다.
잠깐 : 라이브러리에서 심벌을 오른쪽 클릭하고 컨텍스트 메뉴에서 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로 설정한다.
다음 예제는 Font1이라는 linkage 클래스 이름을 가진 라이브러리의 폰트 심볼을 기반으로 새로운 폰트 인스턴스를 만든다. 그리고, 예제는 TextFormat 객체를 만들고 그것의 폰트 이름을 myFont 인스턴스의 fontName으로 설정한다.
예제
다음 예제는 새로운 Font, TextFormat, TextField 인스턴스를 만들고 TextField 인스턴스의 embedFonts 속성을 true로 설정한다.
잠깐 : 예제는 라이브러리에 Font1이라는 linkage 클래스를 가진 폰트 심벌을 필요로 한다.
// 문서의 라이브러리에 있는 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);
결과
이 예제의 소스 코드를 다운로드 하라 :
embeddingfonts_section4_example1.zip (ZIP, 8K)
향상된 anti-aliasing 설정하기
임베드된 폰트로 작업할 때, 텍스트 필드의 antiAliasType 속성에 flash.text.AntiAliasType 클래스의 값을 넣어서 anti-aliasing 타입을 normal 또는 advanced로 설정할 수 있다.
예제
다음 예제는 폰트 심벌의 새로운 인스턴스를 만들고, 텍스트 필드를 위해 임베드된 폰트를 사용 가능하게 하고, anti-alias 타입을 advanced로 설정한다.
잠깐 : 예제는 라이브러리에 Font1이라는 linkage 클래스를 가진 폰트 심벌을 필요로 한다.
// 문서의 라이브러리에 있는 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);
결과
이 예제의 소스 코드를 다운로드 하라 :
embeddingfonts_section5_example1.zip (ZIP, 5K)
예제
다음 예제는 새로운 텍스트 필드를 만들고 사용자가 폰트 임베드 여부, anti-aliasing 사용 여부, 텍스트 필드의 텍스트 크기를 선택하게 한다.
잠깐 : 예제는 라이브러리에 Font1이라는 linkage 클래스를 가진 폰트 심벌, 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);
}
결과
이 예제의 소스 코드를 다운로드 하라 :
embeddingfonts_section5_example2.zip (ZIP, 448K)
팁 : advanced anti-aliasing의 이점은 작은 폰트에서 나타난다. 이전 예제에서, 임베디드 폰트를 가능하게 하고, advanced anti-aliasing을 선택하고, 슬라이더에서 폰트 크기를 최하 값(8 포인트)로 설정해보라.
임베드된 폰트와 Tween 클래스를 사용한 페이딩 텍스트
라이브러리에 폰트 심벌이 있으니, 텍스트를 페이드하고 돌리고, 사용자의 컴퓨터에 없는 폰트를 사용할 수 있다.
다음 예제는 액션스크립트 3.0의 Tween 클래스를 사용해 페이드 인-아웃 되는 회전된 텍스트를 만드는 방법을 보여준다.
예제
다음 예제는 Tween 클래스를 사용해서 텍스트 필드의 alpha 속성을 조절한다.
잠깐 : 예제는 라이브러리에 Font1이라는 linkage 클래스를 가진 폰트 심벌을 필요로 한다.
// 요구되는 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();
}
결과
이 예제의 소스 코드를 다운로드 하라 :
embeddingfonts_section6_example1.zip (ZIP, 5K)
관련 있는 플래시 Quick Start들
- Embedding fonts
- Event handling
- Display list programming
- Creating a simple ActionScript 3.0 class
- Working with symbols and the Document class
- Animating with ActionScript in Flash
- Programming with arrays
- Making accessible user interfaces
저자에 대해
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/에서 볼 수 있습니다.
Trackback : http://liverwort.tistory.com/trackback/227
-
Subject Runtime font sharing.
2008/07/03 13:13
우선 공유하려는 폰트를 라이브러리에 등록하고, 아래 그림과 같이 설정한 다음 SWF을 퍼블리시 합니다. 이 SWF파일을 Loader 객체로 로드한 다음, 아래 코드를 사용하여 공유된 폰트를 등록, 사...
Prev
Rss Feed