Home > Diary | Flash > [as3] AS3でフォントを埋め込むにはどうしたらいいのか? [flash]

[as3] AS3でフォントを埋め込むにはどうしたらいいのか? [flash]

Pocket

どうしてこのようなことになったのか?
まず最初に説明しておきます。

wonderfl build flash onlineでさまざまなソースを拝見して勉強させてもらってましたが、実際にローカル(オンライン上ではなく自分のPC上で)同じように動かしたい。
というのがきっかけです。

それで、一番印象深かったのが、

Generation Cluster with Twitter – wonderfl build flash online

なんです。
Twitterでの連動で、年齢を入れてつぶやくとハッシュタグをキーワードにして抽出します。そのファイルがXMLファイルでそれをFlashで解析して表示させるというおぉ!といわんばかりの作品なんです。
衝撃的でした。AS2でならできるだろうな。と当時の自分では思ってたのですが、実際にAS3でやるとなったらどうなるものやら。と思いながら今まで来ました。

それで、表示されていたのが、埋め込みフォントだったんです。
デバイスフォントじゃないことがわかり、こりゃどちらさまのフォント使ってるんだ?という疑問を持って、今日にいたります。w

みんな共通して使ってるimport文があります。
import com.bit101.components.*;
です。

さっそくGoogleさんで検索しました。
ありました。
そのフォントだけダウンロードしました。けど、駄目です。
com.bit101.componentsをすべてダウンロードして読みこませないといけません。w

ダウンロードしました。

さぁ、同じようにローカルで表示できるかな?とFlashDevelopで課題開始。(自分の中では課題なんです。w)

しっかし、ぜんぜん表示されない。エラーもはいてない。フォントが白なのか?だったら背景を黒にするか?そんな感じでやってましたが、ぜんぜん文字は表示されませんでした。

そして、埋め込みフォントについて調べました。
一番最初に試せれる基本的なソースがありました。
ActionScript3.0メモ – 文字列の表示
です。
ここでは、comic.ttfを使用しておりましたが、自分はpf_ronda_seven.ttfが使いたいので、変更してビルドしましたが、駄目でした。

また、AS3 で埋め込みフォントを使うテクニック – てっく煮ブログさんにもお世話になりました。

なんで?ということで、Twitterで呟きました。

http://twitter.com/xxxYukihiroxxx/status/13049585281

AS3で埋め込みフォントを試してて、デバイスフォントはちゃんと表示されますが、埋め込みフォントが表示されないんです。http://bit.ly/9Lj38E このサイトを参考にやってるんですけど、反映されない。ちなみにフォントは、pf_ronda_seven.ttfです。

その数分後、びっくりしました。
@flair4jpさんと@matsumosさんからの天の声!
本当に感謝です。ありがとうございました。

助言をいただき、調べました。
http://code.google.com/p/minimalcomps/

結果から言いますと、
//埋め込みフォント
[Embed(source=’pf_ronda_seven.ttf’, fontName=’PF Ronda Seven’, mimeType=’application/x-font’)]
private var embedFont:Class;


[Embed(source=”/assets/pf_ronda_seven.ttf”, embedAsCFF=”false”, fontName=”PF Ronda Seven”, mimeType=”application/x-font”)]
private var embedFont:Class;

にすることで、表示できました。

ここで注意。
fontNameというのがあります。
これは、PCが認識しているフォント名にしなければいけないこと。つまり、単純にファイル名ではなく、そのフォントの名前です。
今回の場合は、そのフォントのプロパティを見ればわかりました。
タイトルに書いてある通りに書くことです。スペースもいれて。

で、さらに、
embedAsCFFを追加して、falseにする。
これで表示されました。

Embedで指定する場合はEmbedにembedAsCFF=”false”を指定するだけでOK。

ちなみに自分の環境は
Flex 4.0.0 build.14159
FlashDevelop 3.1.0 RTM
Flash Player WIN 10,1,53,21
です。

あと、なんでもフォントが埋め込めるわけではないということ。

Web制作-Flash-ActionScript-ActionScript3-フォントを埋め込む- zkdesign-Archives

フォントの「ファイル」を指定して埋め込む

「システムフォント」としてインストールされているフォントと、ローカルディスクに置いた「フォントファイル」のどちらでも埋め込む事ができます。
ただし、対応しているフォントフォーマットは「TrueTypeフォント」のみで、OpenTypeやPostScriptフォントは埋め込む事ができません。ので、インストールされてるフォントの多くがOpenTypeな自分みたいな人にはほとんど使えない方法です。

感謝です。勉強になりました。

また、フォントを埋め込んだswfファイルを用意して埋め込む方法もあるみたいですね。

【結論】
AS2でやることはいいんだが、AS2の制作物をAS3に変換できる時間があれば絶対にやっておいたほうがいい。

Adobe Flash CS3 Professional を使ってますが、AS3でやる場合は、極力FlashDevelopを使ってます。
Adobeさんのイメージをリンゲージでactionscriptに書き出すというすごい便利な機能がありますが、こういう方法もあるという勉強もできるので、いろいろいじってみたいです。

で、今日はとりあえず成果物がありますが、明日にアップします。w

ありがとうございました。

From xxxYukihiroxxx

Pocket

Comments:1

オギー 11-01-10 (月) 14:00

はじめまして!
フォント埋め込み記事、とても参考になりました!
お陰さまで、私もオリジナルフォントを表示できました。
文字列が表示された出けですが、思わず感動しちゃいましたw

embedAsCFFなんて、パラメータがあったとは・・・。
まだ、よく分かってませんが、おいおい調べてみようと思います。
ありがとうございました!
後ほど、Twitterもフォローさせていただきますw

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.la-nouveau.mydns.jp/wordpress/wp-trackback.php?p=951
Listed below are links to weblogs that reference
[as3] AS3でフォントを埋め込むにはどうしたらいいのか? [flash] from La Thinking Motion.

Home > Diary | Flash > [as3] AS3でフォントを埋め込むにはどうしたらいいのか? [flash]

Search
Feeds

Return to page top