ActionScriptを活用しデジタル時計を作成する(完結編) -フォントの埋め込み

今回でデジタル時計を作成するチュートリアルは完結となる。せっかく作成したからには、見た目にもこだわりたいという人にとっては、必須のフォント埋め込みについて解説する。

フォントを埋め込む

CSSでフォント指定してあっても、ユーザーの環境にそのフォントがインストールされていなければ、違うフォントが使用されてしまい、自分の意図した見た目にはならない。そこで、Flashのフォントを埋め込む機能を利用して、フォントがない他の環境でも同じような見た目を再現しよう。フォントFlashファイルにを埋め込む方法には、テキストフィールドのタイプによって３つの方法がある。

• 静止テキストの場合、埋め込みは自動で行われる。この場合は、使用している文字のフォント情報だけを埋め込むため、使用する文字量だけファイルサイズが増える。
• ダイナミックテキスト、テキスト入力の場合、テキストフィールドへのフォント埋め込みインタフェースを使用する。この場合は、アルファベットだけ、数字だけ、指定した文字だけなどと、範囲の指定が細かくでき、これも使用する文字分だけファイルサイズが増える
• フォントをライブラリ内のシンボルとして作成。テキストフィールドのタイプはどれでも良いが、フォント1個をまるまる埋め込むため、使用しない文字のデータまで含んでしまい、無駄にファイルサイズが大きくなる。

表示する文字の種類が分かっている場合は、ファイルサイズを小さく抑えるために、2の方法を利用する。今回の時計ならば、数字と曜日を表すアルファベット数種を指定すれば良いだろう。フォントを埋め込みたいテキストフィールドを選択したらプロパティパネルで次の手順を実行しよう。

埋め込みたいフォントを指定

htmlを表示するテキストフィールドを選択してからプロパティパネルで「フォントファミリー」を埋め込みたいものにする。

種類を指定する

「文字の埋め込み」ダイアログを開いて、種類を選択する。たとえば、今回の例でいえば、数字すべて、.:、曜日に使用するアルファベットなので、数字すべては選択し、それ以外のものは「追加する文字を指定する」というフィールドに「.:SUNMONTUEWEDTURFRISAT」と入力していく。

SやNなど、重複しているものもあるが、特に気にしなくて良い。また、埋め込みを忘れた文字を指定した場合は、エラーではなく文字が表示されないだけでわかりにくいので、注意しよう。

注意事項だが、CSSでfont-familyを指定している場合はその属性を削除すること。

実際にソースファイル(digitalwatch_08.fla)を開いたらCSSの内容を確認してほしい。下にあるのが、フォントを埋め込んだコンテンツだ。

最後に、digitalwatch_08.flaを開くと、フォントが無い旨のアラートが出るかもしれない。これは、私の環境にしかないフォントをFlashで使用しているためだが、編集作業自体は「キャンセル」を押せば問題無く続行できる。「OK」を押してしまうと、使用フォントが入れ替わってしまうので、注意しよう。フォントをインストールしたい場合は、「LiquidCrystal」というフリーフォントを検索してみてほしい。

今回で、デジタル時計を作成するひと通りのチュートリアルは終了だ。全部で7回になってしまったが、半分以上が基本的な解説に終始した。デジタル時計ならではの仕組みはDateオブジェクトを使用するところくらいで、その他のテクニックはまったくことなるコンテンツ制作でも役立つ知識となるはずだ。次回は、これまでの過程のおさらいに加えて、作成したデジタルウォッチをWebで公開する方法を解説しよう。

伊藤のりゆき(NORI)
有限会社トゴル・カンパニー代表。ロクナナワークショップ講師。Flashアクセシビリティを得意とし、ライターとしてFlash関連書籍や雑誌記事の執筆を行うほか、AdobeTVでも解説。共著の「ActionScript3.0辞典」が発売中。また、先頃、写真家として初の写真集「Snap or Nothing写真集」(iTunes AppStoreにて)が発売された。内容のリクエストはTwitter(nori_togoru)まで。