플래시 액션스크립트 AS 폰트 임베디드 관련

 

 

=================================

=================================

=================================

 

 

 

출처: http://clack.tistory.com/205

 

swc 파일로 Font Embed 사용하기

회사 업무로 flash나 flash builder 에서 프로젝트를 진행하면서 폰트를 임베디드 해야할 경우가 대부분이다.

 

먼저 사용할 폰트를 flash 에서 라이브러리에서 오른쪽 버튼을 눌러 'New Font...' 메뉴를 선택하거나 라이브러리 메뉴중에 골라서 폰트를 추가해야 한다.

아래 이미지 처럼 사용하고자하는 폰트를 Family 항목에서 고르고 Style 를 선택한 후 사용하고자 하는 이름을 적어준다.

Character ranges 에서 한글을 사용할것인지 숫자, 특문, 영어를 사용할것인지에 따라 체크를 하면 

왼쪽편에 있는 Font 목록에 한개씩 추가된다.

 

 

 

폰트추가가 다 끝났다면 해당 폰트를 액션스크립트에서 사용할 수 있도록 Linkage를 걸어줘야 한다.

아래 이미지 처럼 ActionScript 탭을 누르고 Linkage 에서 Export for ActionScript 를 체크하면 자동으로 클래스 이름과 베이스 클래스를 적용해준다. 클래스 이름은 사용하기 좋은 이름으로 수정해도 된다.

 

 

 

모든 폰트들을 linkage 설정해주었다면 아래 이미지 처럼 Library에 AS Linkage 란에 클래스 이름이 적용된것을 볼 수 있다.

 

 

빌드옵션에서 swc 파일을 체크하여 swc 파일로 빌드를 하면된다.

생성된 swc 파일을 flash나 flash builder의 프로젝트에 Library path에 추가하자.

 

 

그 뒤 액션스크립트에서 사용하러면

 

 

사용하고자 하는 폰트를 담을 폰트형 변수를 선언하고

해당 폰트가 적용될 텍스트포멧형 변수도 선언한다.

public var ygo330: Font;

public var ygo330Tf: TextFormat;

 

선언된 변수에 폰트의 클래스 이름으로 생성을 하고 폰트가 적용되어질 텍스트 포멧도 생성을 한 뒤

텍스트폰트의 font 속성으로 폰트변수의 fontName을 대입해주면 해당 텍스트 포멧으로 입력된 폰트이름의 폰트를 사용 할 수 있게된다.

ygo330 = new YGO330();

ygo330Tf = new TextFormat();

ygo330Tf.font = ygo330.fontName;

ygo330Tf.bold = true;

 

이제 텍스트필드에 setTextFormat 하거나 디폴드텍스트포맷으로 해당 텍스트 포멧을 설정해주면 된다.

 

 

매번 할때마다 까먹곤 해서 정리해보았다. 

//202psj 추가 설명

 

텍스트 포맷을 설정할때 유의 할 점 

 

var textf:TextField = new TextField();

 

ygo330 = new YGO330();

ygo330Tf = new TextFormat();

ygo330Tf.font = ygo330.fontName;

ygo330Tf.bold = true;

 

texf.embedFonts = true;       //이것도 설정할수 있다면 (embedFonts있다면) true로 해주자

 

texf.setTextFormat(ygo330Tf ); //이것만 가지고 바로 적용이 안된다.

texf.defaultTextFormat = ygo330Tf ; //이와 같이 디폴트 텍스트 포맷도 같이 해주어야 한다.

 

다른 클래스 객체에도 defaultTextFormat 가 있다면 위와같이 해주자.

 

 

 

=================================

=================================

=================================

 

 

 

 

출처: http://blog.hansune.com/100

 

+ flex builder 에서 swf에 폰트 포함하여 사용하기.

embedFonts.as

?

package {     import flash.display.Sprite;     import flash.text.AntiAliasType;     import flash.text.Font;     import flash.text.TextField;     import flash.text.TextFieldAutoSize;     import flash.text.TextFormat;     public class embedFont extends Sprite     {         [Embed(source="../data/DINMed.TTF", fontName="dinMedium", embedAsCFF="false", mimeType="application/x-font-truetype")]         static public var dinMedium:Class;         public function embedFont()         {             var tm:TextFormat = new TextFormat();             tm.size = 48;             tm.font = "dinMedium";             tm.color = 0x000000;             var tf:TextField = new TextField();             tf.embedFonts = true;             tf.autoSize = TextFieldAutoSize.LEFT;             tf.antiAliasType = AntiAliasType.ADVANCED;             tf.defaultTextFormat = tm;             tf.text = "is this Din \nMedium font?";             addChild(tf);         }     } }

* embedAsCFF 속성을 플렉스 컴포넌트에서 리치텍스트필드를 사용하는 곳에 영향을 준다. 특히 Spark 콤포넌트는 값이 true 이여야 된다. 

+ swf 파일을 불러와서 폰트를 사용하는 방법
우선 아래처럼 라이브러리에 New font 로 원하는 폰트를 링크등록시킨후, swf 파일을 만든다.

 

 

그리고 코딩.

var loader:Loader = new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompLoadFont); loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOErr); var context:LoaderContext = new LoaderContext(); context.applicationDomain = ApplicationDomain.currentDomain; loader.load(new URLRequest("fonts.swf"), context);       function onCompLoadFont(e:Event):void {                var dinFontClass:Class = (e.currentTarget as LoaderInfo).applicationDomain.getDefinition("Din") as Class;           Font.registerFont(dinFontClass);           for each (var i:Font in Font.enumerateFonts(false))     {         trace("FONT :" ,i.fontName);     }           var dinfont:Font = Font.enumerateFonts(false)[0];           var tm:TextFormat = new TextFormat();     tm.size = 48;     tm.font = dinfont.fontName;     tm.color = 0x000000;           var tf:TextField = new TextField();     tf.embedFonts = true;     tf.autoSize = TextFieldAutoSize.LEFT;     tf.antiAliasType = AntiAliasType.ADVANCED;     tf.defaultTextFormat = tm;     tf.text = "How are you, today?";           addChild(tf);       } function onIOErr(e:IOErrorEvent):void {     trace(this, e.toString()); }

refer to :
http://easeyourdigitallife.blogspot.com/2007/06/flash-cs3-actionscript-3-example-using.html


+ 플래시 IDE 라이브러리에 등록된 폰트 바로 사용하기
위에 그림처럼 라이브러리에 등록된 폰트를 직접 사용하기

?

var dinClass:embedDin = new embedDin(); trace(dinClass is Font); var tm:TextFormat = new TextFormat(); tm.font = dinClass.fontName; tm.size = 50; var tf:TextField = new TextField(); tf.embedFonts = true; tf.defaultTextFormat = tm; tf.autoSize = TextFieldAutoSize.LEFT; tf.text = "IS Din?"; addChild(tf);

 

 

 

=================================

=================================

=================================

 

 

 

공부는 누가 모라해도 최신버전으로 해야한다고 생각한다.

이번에는 신버전인 CS5로 swf를 내보내고 폰트임베드 하는법을 적어 보겠다.

먼저 swf파일을 내보내는 법부터 알아보겠다.

 

상단 메뉴에서 Text -> Font Embedding 메뉴로 들어간다.

그럼 아래와 같은 창이 하나 뜰 것이다.

 

+ 모양으로 되어있는 Add new font 를 클릭한 후에 우측에 이름과 폰트를 선택 한다.

그 후에는 Character ranges 에서 사용할 목록을 선택한다..

전부 다 선택하면 용량이 커지기 때문에 사용할 부분만 선택해서 용량을 줄이는것이 좋다

전부 선택을 하였으면 상단에 ActionScript 탭으로 넘어간다.

 

ActionScript 탭에서는 딱히 할일이 없다 

맨 위쪽에 클래식을 선택해준후 액션스크립트로 내보내기를 클릭하고 확인 버튼을 누른다.

 

위와 같이 swf 파일로 내보내면 swf 파일은 완성이다.


이제 swf 파일을 가져다가 로드를 해서 사용하면 된다..

액션스크립트 코드는 위에 첨부파일에 첨부하였다.

이제 코드를 확인해 보겠다.

1. package
2. {
3.         import flash.display.Loader;
4.         import flash.display.Sprite;
5.         import flash.events.Event;
6.         import flash.events.IOErrorEvent;
7.         import flash.net.URLRequest;
8.         import flash.system.LoaderContext;
9.         import flash.text.Font;
10.         import flash.text.TextField;
11.         import flash.text.TextFieldAutoSize;
12.         import flash.text.TextFormat;
13.         import flash.utils.getDefinitionByName;
14.        
15.         public class FontEmbedTest001 extends Sprite
16.         {
17.                 private var _loader:Loader;
18.                
19.                 private var _font:Font;
20.                
21.                 private var _path:String = "../assets/swf/Arial.swf";  
22.                
23.                 private var _fontName:String;
24.                
25.                 public function FontEmbedTest001()
26.                 {
27.                         _loader = new Loader();
28.                         _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
29.                         _loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onError);
30.                        
31.                         _loader.load(new URLRequest(_path));
32.                        
33.                 }
34.                
35.                 private function onComplete(e:Event):void
36.                 {
37.                         var fontLib:Class = e.target.applicationDomain.getDefinition("Arial") as Class;
38.                         _font = new fontLib;
39.                         _fontName = _font.fontName;
40.                         Font.registerFont(fontLib);
41.                        
42.                         var tfFormat:TextFormat = new TextFormat(_fontName, 20);
43.                        
44.                         var contentTF:TextField = new TextField();
45.                         contentTF.textColor = 0xff1324;
46.                         contentTF.autoSize = TextFieldAutoSize.LEFT;
47.                         contentTF.selectable = false;
48.                         contentTF.defaultTextFormat = tfFormat;
49.                        
50.                         contentTF.embedFonts = true;
51.                         contentTF.text = "abcd";
52.                        
53.                         addChild(contentTF);
54.                 }
55.                
56.                 private function onError(e:IOErrorEvent):void
57.                 {
58.                        
59.                 }
60.                
61.                
62.         } // end class
63. } // end package
    
    위 코드를 확인해 보면 폰트 임베디드 하는 방법은 간단하다 
    
    swf 를 로드 한 후에 임베디드 해서 사용하면 된다.
    
    
     참고 사이트  :  http://blog.naver.com/jjjkyy/110089052354 
64.  

 

 

 

=================================

=================================

=================================

 

 

 

반응형

 

728x90

 

 

 

 

출처: http://oohoot.tistory.com/6

 

[AS3] 플래시 임베디드 폰트 사용하기 - Flash embedded font

플래시에서 깔끔한 폰트를 동적으로 사용하기 위해서는 여러가지 방법이 있습니다.
그중에 제가 자주 사용하는 방법을 소개하겠습니다.

우선 폰트만 가지고 있는 swf파일을 생성해야 합니다.
방법은 아래와 같습니다.

1. 먼저 Flash를 실행하고 새로운 문서를 하나 만듭니다.
그리고 사진과 같이 Library 탭에서 마우스 오른쪽 버튼을 클릭해 New Font를 선택합니다.

 

2. 아래와 같은 창이 뜨게 되면 클래스 이름을 입력하고 Embedded하고 싶은 폰트를 하나 선택해 줍니다.
Style 탭에서는 기울임을 쓸건지 볼드체를 쓸것인지 선택합니다. (이 설정은 임베디드후 쭉 유지되기 때문에 신중히 설정합니다.
Size 탭은 임베디드후에 코딩으로 변경이 가능하기 때문에 신경쓰지 않아도 됩니다.
그리고 Linkage 부분에서 Export for ActionScript를 선택해 이 폰트를 클래스화 시킵니다. (클래스 명은 임베디드 후 사용해야하기 때문에 꼭 기억해 둡니다. 위의 Name과 Class명과 swf의 파일명을 똑같이 정하면 사용하기 더 쉽습니다~)
다 되셨으면 OK를 클릭합니다.

 

3. 아래 사진과 같이 Library 탭에 등록이 되었으면 컴파일 시킵니다.

 

4. 컴파일을 하면 빈창이 뜨는데 그럼 임베디드 폰트를 사용하기위한 준비는 완료 된것입니다.

 

5. 이제 생성된 swf 파일을 앞으로 만들 swf파일에서 쉽게 접근가능한 경로에 위치시켜준 후 아래와 같은 코드로 임베디드를 시킵니다.

package

{

    import flash.system.LoaderContext;

    import flash.text.*;

    import flash.display.*;

    import flash.events.*;

    import flash.net.URLRequest;

    public class FontLoad extends Sprite {

        private
        var _loader: Loader;

        private
        var _font: Font;

        //생성한 폰트.swf 경로를 적어준다.

        private
        var _path: String = "Constantia.swf";

        private
        var _fontName: String;

        public
        function FontLoad() {

            _loader = new Loader();

            _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

            _loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onError);

            //폰트.swf를 로드한다.

            _loader.load(new URLRequest(_path), new LoaderContext(true));

        }

        private
        function onComplete(e: Event): void {

            //로드된 폰트.swf에서 폰트 Class를 가져온다.(getDefinition("폰트.swf에서 생성했던 클래스 명을 그대로 적어준다."))

            var fontLib: Class = e.target.applicationDomain.getDefinition("Constantia") as Class;

            _font = new fontLib;

            Font.registerFont(fontLib);

            //가져온 폰트 클래스에서 TextFormat에서 사용될 폰트명을 가져온다.

            _fontName = _font.fontName;

            //TextFormat을 하나 생성해서 위에서 가져온 폰트명과 임의의 사이즈를 넣어준다.

            var tfFormat: TextFormat = new TextFormat(_fontName, 20);

            //TextField를 생성하여 임베디드 폰트를 사용해 본다.

            var contentTF: TextField = new TextField();

            contentTF.textColor = 0x000000;

            contentTF.autoSize = TextFieldAutoSize.LEFT;

            contentTF.selectable = false;

            contentTF.defaultTextFormat = tfFormat; //위에 생성한 TextFormat을 기본포멧으로 지정한다.

            contentTF.embedFonts = true; //임베디드된 폰트를 사용하기 위함이다.

            contentTF.text = "Font Load Complete"; //지금 임베디드한 폰트는 영문 폰트이기 때문에 영문을 입력한다. 한글폰트는 한글 영어 전부 된다.

            addChild(contentTF);

        }

        private
        function onError(e: Event): void {}

    }

}

위처럼 작성해 테스트를 해보면 보다 깔끔하고 보기좋은 글자가 찍히는 것을 확인하실 수 있습니다.

 

 

 

=================================

=================================

=================================

 

 

 

출처: http://wooyaggo.tistory.com/54

기운 쭉 빠지는 순간이 아닐 수 없다.

다름아닌 폰트 임베딩 때문인데

매번 컴파일할때마다 폰트를 임베드 하기 때문에

개발속도가 느려져버리는건 당연하고 의욕도 떨어지고 짜증만 늘어난다.



자 그럼 이번에는 SWC 를 이용해서 폰트 임베등을 가볍게 하는 방법을 알아보자.

우선 새로운 fla 를 생성하고 (저장할 필요 없다.)

 

텍스트필드를 바탕에 하나 만들어준다.

 

그리고 Property 패널에 Embed 버튼을 선택해서 임베트할 Character-set 을 설정한다.

 

 

 

그리고 텍스트필드를 무비클립으로 생성해준다.

(한글이나 특수문자는 안되고 일반 변수명 작명하는 방법으로 네이밍한다. 때문에 한글폰트의 경우 네이밍을 잘 해야 혼동되지 않는다.)

 

그런다음 Library 패널에서 무비클립을 우클릭하여 나오는 메뉴중에서

Export SWC File 을 선택해서 swc 파일로 export 한다.

 

export 할 위치는 플래시의 컴퍼넌트 폴더여야 하며

보통 사용자폴더\AppData\Local\Adobe\Flash CS3\en\Configuration\Components\

로 되어 있다. 반드시 확인을 하자.

파일명은 한글로 해도 상관없다.

본인은 폰트만 따로 모아둘 요량으로 Fonts 라는 폴더를 따로 만들어 그안에 저장했다.

 

그런다음 컴퍼넌트 패널에서 우측의 쪼마난 메뉴에서 Reload 메뉴를 선택하자.

 

그러면 컴퍼넌트 패널이 업데이트 되면서 방금 export 한 폰트가 생성됐다.

이제 맑은 고딕이라는 폰트를 만드는 것은 성공이다.

이제 사용하는 법만 알면 된다.

 

이제 새로운 fla 를 생성해서

컴퍼넌트패널에서 생성된 폰트를 드래그하여 Library 창에 추가한다.

이게 끝이다.

이제 폰트가 embed 되어있는지 확인해볼 차례다.

액션창에 아래 소스를 넣어보자.

var fonts:Array = Font.enumerateFonts();

var font:Font;

for each(font in fonts)
     trace(font.fontName);

임베드한 폰트의 이름을 확인할 수 있을것이다.

자 그럼 사용을 직접 해보자.

우선 Library 에 있는 폰트 swc 를 지워서 깨끗하게 해놓은 다음에

역시 마찬가지로 액션창에 아래와 같이 써보자.

var txt:TextField = new TextField();
txt.defaultTextFormat = new TextFormat("맑은 고딕", 12);
//txt.embedFonts = true;
txt.text = "abcdef";

addChild(txt);

embedFonts 가 주석처리 되어 있기 때문에

아마 텍스트가 잘 보일것이다.

이번엔 주석을 풀고 다시 해보자.

var txt:TextField = new TextField();
txt.defaultTextFormat = new TextFormat("맑은 고딕", 12);
txt.embedFonts = true;
txt.text = "abcdef";

addChild(txt);

폰트가 임베드되어 있지 않기 때문에 텍스트가 보이지 않는다.

그러면 이제 컴퍼넌트 패널에서 폰트를 드래그하여

Library 에 추가한다음 다시 컴파일해보자.



이뿌게 Embed 되어 있는 폰트를 볼 수 있을것이다.

이제 폰트 때문에 짜증날일은 없을것이다.

많은 유저들에게 도움이 되었으면 좋겠다.

Tip

less..

폰트 타입이 Anti-alias for animation 이나 Anti-alias for readability 면 폰트명이 그대로 사용되지만 

Bitmap Text(no anti-alias) 로 셋팅되어 있다면 폰트명이 바뀐다.

테스트해본바로는 폰트명_폰트크기pt_st 라는 알수 없는 폰트명으로 되었다.

그래서 폰트명을 반드시 확인하고 사용해야할 것이다.

less..

도움 됐으면 리플 ↓ ㄱㄱ

 

 

=================================

=================================

=================================