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

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

前回、テキストフィールドにhtmlを表示してデジタル時計を制作していくという方針を決定した。今回はいよいよ実践していこう。サンプルファイルは、こちらからダウンロードできる。

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

Flashのテキストフィールドは、素のテキスト(文字列)以外にも、htmlを指定することで、表示内容を調整することができる。その基本的な方法は、次の通りだ。

テキストフィールドインスタンス.htmlText = "(html文書)"

すこし、テストしてみよう。「ソース：firstHtml.fla」

1.ステージにfirstHtml_txtというテキストフィールドを作成する。

次のアクションスクリプトを記述する。

firstHtml_txt.htmlText = "トゴル"

「トゴル」という文字が赤く表示されただろうか。この方法で、デジタル時計に色を付けられるという目処がつくはずだ。しかし、このfontという古いタグを使用する方法は、違和感があるかもしれない。そこでもうひと工夫してみよう。

テキストフィールドにスタイルシートを適用する

Flashのテキストフィールドは、htmlを表示可能だが、同時にスタイルシート(※「Flash CS4」で使用できるスタイルシートのバージョンはCSS1まで。なお現在Webで主流として使用されているCSS2.1と比べれば未対応のスタイルが多いので、注意が必要)も適用できる。当然、色指定もCSSで可能だ。以下のの手順でCSS対応を行った。

1.テキストフィールドをdisplay_txtに統合

3個あったテキストフィールドを1個に統合し、画面いっぱいのサイズで新たなテキストフィールド(ダイナミックテキスト、インスタンス名「display_txt」)を作成しておく。

2.テキスト表示部分をCSS対応のhtmlに書き換える

display_txtに代入するhtmlテキストには、CSSに対応するようにclass属性などを付加する必要がある。そのため、テキストフィールドへ代入するActionScriptは次のようになる。

(修正前)

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

(修正後)

2010.12.08 TUE 23:59.58

3.上記htmlを見ながら、class属性などに対応するCSSを作成する。

CSS

p{text-align:right;font-family:LiquidCrystal,Arial,Helvetica;}
.year{color:#CBFF00;font-size:20;}
.y2m{color:#CBFF00;font-size:20;}
.month{color:#99FF00;font-size:40;}
.m2d{color:#99FF00;font-size:20;}
.date{color:#65FF00;font-size:30;}
.day{color:#00CC33;font-size:18;}
.hours{color:#FF00D9;font-size:80;}
.h2m{color:#FF00D9;font-size:80;}
.minutes{color:#00CBFF;font-size:80;}
.m2s{color:#00CBFF;font-size:80;}
.seconds{color:#FFFF32;font-size:80;}

上記の色やサイズを指定したCSSは編集しやすいようにテキストフィールド(ダイナミック、インスタンス名「css_txt」)を作成してそこに入れておく。また、1行目のfont-familyに指定したフォントは、すくなくとも開発環境にインストールされている必要があるので注意しよう。

左がステージいっぱいに広げて配置したdisplay_txt、右がCSSを格納しておくcss_txtだ。

4.CSSをテキストフィールドに適用

テキストフィールドにCSSを適用する場合は、styleSheetプロパティを使用しよう。次のActionScript(フレームに記述)でテキストフィールド「display_txt」のstyleSheetプロパティにcss_txtの内容から解析したCSSを適用する。