AS2 ランタイム共有用によるフォントの埋め込み

2008/12/22

こんにちは。きんくまです。

Player10が出ようともCS4が出ようとも、まだまだPlayer8対応な案件がよくあるきんくまです。

今回はAS2で、外部swfに埋め込まれているフォントの埋め込みについて調べたのでまとめて書いてみます。
といっても、こちらのエントリーやヘルプファイルをまとめたものなので、詳しくはこちらを参照してください。
情報ありがとうございますです。
TextField.embedFontsプロパティ – Flash : テクニカルノート
 apeirophobia: 特定の文字だけを埋め込んだフォントのランタイム共有方法(AS 2.0)

ちなみにAS3版では下記の情報がすごく参考になります。ソースファイルを落としてきて中身をみた方がよいと思います。
CS3版　フォントのダイナミックなローディング｜_level0.KAYAC

↓ここから説明です。
■利点
フォントだけを埋め込んだ外部swfを用意しておいて、本体のswfでそれをよみこみ、中のフォント情報だけを使うことができれば、本体のパブリッシュ時間をものすごく節約できる。

■方法
２つの方法があって、以下のようになります。
１. フォント情報全てを埋め込む方法
2. 一部の文字のみ埋め込む方法

■１. フォント情報全てを埋め込む方法　から説明します

フォント用の新規ファイルを作成します。
ライブラリパネルの右上のメニューから新規フォントを選択します。

メニューから書体を選びます。

名前の欄は半角英数で好きな用につけてください。※数字ではじめないようにすればＯＫだと思う。
ビットマップテキストのチェックボックスについては後述します。
ＯＫボタンを押して確定させます。
次に今作ったフォントを選択し右クリックから「リンケージ」をクリックしてリンケージプロパティのダイアログを出します。

「ランタイム共有用に書き出し」にチェックを入れたあと、URLの欄にhtmlから見たこのswfのパスを書きます。今回は、htmlと同階層という設定で、font_data.swfと入力しました。

それから、ここからが大事でダミーの空のムービークリップを作って同様の設定をしておきます。

ここでfont_data.swfをパブリッシュしておきます。

次に読み込み側の本体のmain.flaを新規作成します。

上のメニューから

ファイル→読み込み→外部ライブラリを開く

を選択して、さきほどのfont_data.flaを選択します。すると画面にfont_data.flaのライブラリパネルが表示されるので、main.fla側のライブラリパネルにドラッグします。

それから、ダミーで作っておいたdammyのMCをステージ上にドラッグします。場所はどこでも構いません。
この操作をしないとうまく「ランタイム共有」を認識してくれないようです。

main側にテキストフィールドsample_txtを作成して、スクリプトでこう書きます。

var tf:TextFormat = new TextFormat();
tf.font = "MSgothic"

sample_txt.embedFonts = true;
sample_txt.setNewTextFormat(tf);
sample_txt.text = "これで外部swfのフォントが読み込まれたよ";

重要なのは、tf.font = “MSgothic”と、sample_txt.embedFonts = true;　の部分です。
TextFormatのfontプロパティにリンケージしたときの識別子を入力します。
それからTextFieldのembedFontsプロパティをtrueにします。

これでパブリッシュすると外部フォントを読み込むことができます。

→ここまでのファイル一式です。

■ビットマップフォントについて
フォントを埋め込む場合に何の設定もしなければアウトライン情報が埋め込まれます。この場合、どんなサイズでも対応できるので非常によいのですが、難点はファイルサイズが非常に大きくなることです。１フォントあたり２から5MBくらいになったりすることがあります。たとえばMSゴシックやOsakaなどビットマップフォントの状態でもきれいに見えるものでしたら、そのまま使うことを検討してもよいと思います。
その場合フォントサイズがアウトラインに比べて非常に軽くなります。MSゴシックだと500Kbくらいです。

さきほどフォントの埋め込みをする際にビットマップテキストのチェックボックスがありましたが、あれを選択してフォントサイズを設定しておけば、ビットマップフォントととしてもつことができるようになります。この状態のファイル一式を下においておきます。

→ビットマップフォントの埋め込みの場合のファイル一式

次に
■2. 一部の文字のみ埋め込む方法
について説明します。ビットマップフォントでも軽くなるのですが、それでも重いといえば重いです。たとえば英数字のみしか使わない場合、他のフォント情報はいりません。なので、そういった場合の部分的に埋め込む方法です。

埋め込み用の新規ファイルを用意して、新規ムービークリップを作成します。その中にテキストフィールドを作成して、埋め込みたい書体を選びます。「埋め込み」ボタンを選択して、埋め込みたい文字を選択します。

Ctrlキーを押せば複数選択できます。部分的に加えたい文字は、下の入力欄にいれておきましょう。

それで、さきほどとおなじようにランタイム共有の設定をしてからパブリッシュします。
よみこみ側もさきほどと同じようにするのですが、変更するのがスクリプトの部分です。

var tf:TextFormat = new TextFormat();
tf.font = "ＭＳ ゴシック";

sample_txt.embedFonts = true;
sample_txt.setNewTextFormat(tf);
sample_txt.text = "abcdeあいうえお埋め込んでいない文字は表示できません";

TextFormatの代入しているものがリンケージしている識別子じゃなくて、書体名になっています。ここが変更点です。
それから、部分的に文字を埋め込んでいるので、サンプルのように埋め込んでいない文字を入力してもその文字は表示することができません。
それから注意点としては、フォントを使う前にライブラリパネルからステージに必ずドラッグしてどこかに置いておかないといけないことです。

あと、フォントの名前がコンフリクトして～という問題があるみたいなんですが、そちらはさきほどのapeirophobiaさんのサイトを参考にしてみてください。

一部を埋め込む場合のサンプル一式です。