クリエイティブ初心者のためのFlash講座(16) ActionScriptを活用してデジタル時計を作成する(前編)

「FLash CS4」体験版ダウンロードはこちらから
 「Adobe CS4」購入はこちらから

前回、テキストフィールドに表示するActionScriptを紹介したが、今回はそれを利用して、デジタル時計を作成してみよう。サンプルファイルは、こちらからダウンロードできる。

今回のサンプルでは、特にソースファイルを指定する場合は「ソース：～.fla」と記してある。ソースファイルでは、特別なフォントを使用している。フォントが無い場合も見た目は異なるのだが開くことはできるようになっている。アラートが出たら、自分の好きなフォントを指定しなおしてほしい。

構成要素を考えよう

デジタル時計を作るには、どんなものが必要か考えよう。一番分かりやすいのは、目に見えるもの。それから考えてみると、まずはデジタル表示(時間・曜日など)だが、これは、前回覚えたテキストフィールドを活用し、フォントを指定すれば出来上がるはずだ。フォントは、フリーフォントからそれっぽいものを探した。各自、自由に探して見てほしい。そして、デザインしてみたのがこれだ。「ソース：digitalWatch_00.fla」

デザインしてみると具体的に次のようなものが必要だとわかる。

●年月日
●曜日
●時分秒

また、表示されるテキストフィールドには色をつけているが、これらを実現するにはActionScriptで以下の知識が必要だ。

1.テキストフィールドに内容を表示する方法
2.年月日を知る方法
3.時間を知る方法
4.曜日を知る方法
5.色を設定する方法

これまで、この連載で解説したのは1つ目の方法だけなので、2つ目以降はこれから学習していくことになる。

テキストフィールドに内容を表示する

テキストフィールドに内容を表示する方法は、前回、解説した通りだ。

テキストフィールドインスタンス名.text = "(内容)"

たとえば、デザイン通りに内容を表示するには、年月日、曜日、時分秒用に3つのテキストフィールドを用意しそれぞれにインスタンス名(年月日はyearMonthDay_txt、曜日はyoubi_txt、時分秒はhoursMinutesSeconds_txt)をつけた後で、次のようなActionScriptを使用する。このActionScriptをフレームに記述して実行してみよう。

yearMonthDay_txt.text = "2009.12.08" youbi_txt.text = "TUE" hoursMinutesSeconds_txt.text = "23:59.59"

すると次のようになるはずだ。

この時点で、ひとつ明らかな問題が発生している。テキストフィールドの中の文字は、最初のデザインでは何色かに分けていたのに、オーサリング段階で下図のように一色になってしまったのだ。まず、それを解決しよう。

1文字単位で色をつける

先ほどの問題の原因はシンプルだ。Flashのダイナミックテキストでは、色がテキストフィールド単位にしかつけられない。しかし、現在考えているものだと、文字単位に色を付けたいので、いくつか方法を考えてみよう。

1.テキストフィールドを色数の量だけ分割して作成する「ソース：digitalWatch_02.fla」

この方法は、これまでの知識だけで出来る方法だ。まず、色単位でテキストフィールドをあらかじめ分割しておく。それから、全てのテキストフィールドをActionScriptで操作できるように、ダイナミックテキストにしてからインスタンス名を作成し、テキストフィールドに内容を表示すると、スクリプトが図のように出てくる。この方法の欠点はスクリプトが長くなり、変更にも融通が利かないという部分だ。例えば、年を表現する「2009.」だけで、1色の部分をさらに細かく文字単位で変更したいと思っても、それを試すには、テキストフィールドをさらに分割するなど、手間がかかる。そこで、変更が容易で、なおかつ最初のデザインを実現する別の方法を考えてみる。

2.htmlで色指定して表示する

テキストフィールドには、htmlの表示が可能なので、fontタグが機能して色指定(カラー属性)やサイズ指定(size属性)が可能だとわかるはずだ。つまりActionScriptで色やサイズの変更に対応でき、テキストフィールドもひとつだけ用意すれば良いということがわかる。

「1.」の方法では、複数のテキストフィールドを作成し、個別にインスタンス名を割り振り、色を設定するなど手間をかけさえすれば実現可能だが、デザインを後から変更したいときに容易に試せない恐れがある。特に１文字単位のサイズや色変更には骨が折れるだろう。一方、「2.」の特徴は、あらたにhtmlを表示する技術を身につける必要こそあるが、新しい機能を学ぶことができるので表現の幅が広がり別のコンテンツにも役立ちそうだ。しかも、１文字単位の色やサイズ変更は、ActionScriptによるhtmlの変更で可能なので、より多くのパターンを試行錯誤できるだろう。そこで、次回は「htmlで色指定して表示する」という回避策に臨んでみよう。