[AS3] FlexSDK3とFlexSDK4でのFont Embed, TextFieldとTextLayoutFramework

2011/07/10

埋め込み方法の違いなどのまとめ

■FlexSDK 3.x とFlex SDK 4.x
Flex SDK 3.x >> Minimum Player version 9.0.124

Flex SDK 4.x >> Minimum Player version 10.0
4.5は10.2からになってた

■TextFieldとText Layout Framework

TextField	Text Layout Framework
データが軽くてすむ。普通のやり方だと動的に縦組ができない。（静止テキストは可能）取り扱いが楽。 Player 9.0 higher フォントの埋め込みは非CFF	データが若干重い。縦組ができる。取り扱いが面倒。 Player 10.0 higher。フォントの埋め込みは要 CFF

CFFとはCompact Font Formatのことで、従来の埋め込み方法よりもデータが軽くなるとか。
>> Compact Font Format

Text Layout Framework (TFL)については、
>> http://labs.adobe.com/technologies/textlayout/

上のページからリンクされているPDFを読むと、どんなもんで、どんなことがやれることがわかってよいです。
Text Layout Framework Overview(pdf)

そんで、さきほどのPDFと下記ページにあるDownload examples.を落としてきてやり方をみると、
かなりできるようになるのではないかと。
Text Layout Framework(Adobe Open Source)

フォントの埋め込み方法については
>> Embedded fonts and the Text Layout Framework

縦書き方法は「にゃあプロジェクト」さんに書いてありました。どうもです。
[TLF] TextLayoutFrameworkだ！ (1)

Flex SDK 3.x での埋め込み。TextFieldよう

package
{
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	[SWF(width="400", height="400",frameRate="30",backgroundColor="0xffffff")]
	public class SDK3Test extends Sprite
	{
		[Embed(source='A-OTF-FutoGoB101Pro-Bold.otf',
        	   fontName='MyFutogo',
			   fontWeight="Bold",
        	   mimeType='application/x-font'
     	)]
		private var _myFontClass:Class;
		
		public function SDK3Test()
		{
			var textfield:TextField = new TextField();
			var textFormat:TextFormat = new TextFormat();
			textFormat.font = "MyFutogo";
			textFormat.size = 21;
			textfield.autoSize = TextFieldAutoSize.LEFT;
			textfield.defaultTextFormat = textFormat;
			textfield.text = "Hello embed font!";
			textfield.embedFonts = true;
			addChild(textfield);
			textfield.x = 30;
			textfield.y = 30;
		}
	}
}

EmbedのところがfontName, fontWeightを指定するところに注目

SDK 4.x でフォント埋め込みTextFieldよう

package
{
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	
	[SWF(width="400", height="400",frameRate="30",backgroundColor="0xffffff")]
	public class SDK4Test extends Sprite
	{
		//Unicode Range Basic Latin
		[Embed(source='A-OTF-FutoGoB101Pro-Bold.otf',
			   fontFamily = "MyFutogo", 
			   embedAsCFF = "false",
			   unicodeRange = "U+0020-002F,U+0030-0039,U+003A-0040,U+0041-005A,U+005B-0060,U+0061-007A,U+007B-007E",
        	   mimeType='application/x-font'
     	)]
		private var _myFontClass:Class;
		
		public function SDK4Test()
		{
			var textfield:TextField = new TextField();
			var textFormat:TextFormat = new TextFormat();
			textFormat.font = "MyFutogo";
			textFormat.size = 21;
			textfield.autoSize = TextFieldAutoSize.LEFT;
			textfield.defaultTextFormat = textFormat;
			textfield.embedFonts = true;
			textfield.text = "Hello embed font!";
			addChild(textfield);
			textfield.x = 30;
			textfield.y = 30;
		}
	}
}

fontName→fontFamilyに変更。fontWeightがなし。
embedAsCFFを追加してfalseに。
unicodeRangeを指定可能

SDK 4.x でフォント埋め込みTLFよう

package
{
	import flash.display.Sprite;
	import flash.geom.Rectangle;
	import flash.text.engine.FontLookup;
	import flash.text.engine.RenderingMode;
	import flash.text.engine.TextLine;
	
	import flashx.textLayout.factory.StringTextLineFactory;
	import flashx.textLayout.formats.TextLayoutFormat;
	
	[SWF(width="400", height="400",frameRate="30",backgroundColor="0xffffff")]
	public class SDK4CFF extends Sprite
	{
		//Unicode Range Basic Latin
		[Embed(source='A-OTF-FutoGoB101Pro-Bold.otf',
			   fontFamily = "MyFutogo", 
			   embedAsCFF = "true",
			   unicodeRange = "U+0020-002F,U+0030-0039,U+003A-0040,U+0041-005A,U+005B-0060,U+0061-007A,U+007B-007E",
        	   mimeType='application/x-font'
     	)]
		private var _myFontClass:Class;
		
		public function SDK4CFF()
		{
			var cf:TextLayoutFormat = new TextLayoutFormat();
			cf.fontSize = 21;
			cf.fontFamily = "MyFutogo";
			cf.fontLookup = FontLookup.EMBEDDED_CFF;
			cf.renderingMode = RenderingMode.CFF;
			var factory:StringTextLineFactory = new StringTextLineFactory();
			factory.text = "Hello embed font!";
			factory.compositionBounds = new Rectangle(30, 30, 200, 50);
			factory.spanFormat = cf;
			factory.textFlowFormat = cf;
			factory.createTextLines(onTextLineCreated);
		}
		
		private function onTextLineCreated(tl:TextLine):void
		{
			addChild(tl);
		}
	}
}

embedAsCFFをtrueにする。

と、これでFlexでフォントを埋め込む方法がわかってよかった。