クリエイティブ初心者のためのFlash講座(20) ActionScriptを活用しデジタル時計を作成(その5) -htmlテキストを作る

前回までで、Dateオブジェクトから取り出しtrace()していた値を今回はhtmlテキストにしてテキストフィールドに表示する。Flashのテキストフィールドにhtmlを表示するには、前回紹介したとおり次のようにする。なおソースファイルはこちらからダウンロードできる。

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

ここからは、digitalwatch_03.flaの最後の行を改造していく。ソースファイルのASで最後の行に注目しよう。パッと見ただけでも、display_txtのhtmlを設定する部分がわかりにくい。このhtmlに修正を加えないと今回のコンテンツは完成しないので、まず、ここを分かりやすい内容にかえることから始めよう。

display_txt.htmlText ='2010.12.08 TUE 23:59.58'

※htmlTextでclassの指定に"（ダブルクォーテーション）を使用するが、htmlText全体も"で囲む必要がある。そこで、外側の"を'(シングルクォーテーション)にして、混乱しないようにした。"　と　'　は同じ意味を持ち、対に使用すれば、どちらが外側にあってもかまわない。

まず、いきなりdisplay_txt.htmlTextに代入するのではなく、変数を作ってそれを代入するように変更した。

display_txt.htmlText = htmlCode

当然、その前で上記の変数htmlCodeを作成しないといけないが、そこを複数行に分けてわかりやすくしてみよう。文字を連結するには、「+」記号を使用することは以前にも紹介しているが、ここでは、htmlを分割して、+でどんどん後ろに繋げていきたいと思う。ところで、A = A+B は、Aの値をA+Bに変更することを示しているが、もっと短く、A+=B　と置き換えることができる。

そこで、+=を使って、ダイナミックに変更したい値だけを見やすく書き換えてみた(※ソースファイル dw_test_06.fla)。この一連の命令の後、htmlCodeは、htmlTextプロパティに代入していた値と同じ内容になっている（最後のtrace()結果で確認してほしい）。

var htmlCode:String = ''
htmlCode += ''
htmlCode+= ''
htmlCode+= '2010' //年
htmlCode+= '.'
htmlCode+= '12' // 月
htmlCode+= '.'
htmlCode+= '08' // 日
htmlCode+= ' '
htmlCode += 'TUE' // 曜日
htmlCode += ' '
htmlCode += '23' // 時間
htmlCode += ':'
htmlCode +='59' // 分
htmlCode += '.'
htmlCode += '58' // 秒
htmlCode += ''
trace(htmlCode)

あとは、上記ASの具体的な数字の部分('2010'、'12'、'08'、'TUE'、'23'、'59'、'58')をDateオブジェクトから取り出した値に置き換えるだけだ。先頭部分で、nowというDateオブジェクトを作成し、year,month,date,day,hours,minutes,secondsに置き換えたものを作成した(※ソースファイル dw_test_07.fla)ので、見比べて欲しい。

直したスクリプト(実際にソースで確認すること)

表示する内容を更新する

最後に、ここまで作成したhtmlテキストは、すべてhtmlCodeに入っているので、display_txtのhtmlTextプロパティには、次のように設定する。(※ソース：digitalwatch_04.flaでは、内容を確認しやすいようにコメントを増やした)

display_txt.htmlText = htmlCode

この時点では、ひとつ問題がある。Dateオブジェクトの内容(日時データ)は、オブジェクトが作られた瞬間に設定されたままで、自動では更新されない。そこで、自動で更新するようにFlashのイベントを利用しよう(※ソースファイル digitalwatch_05.fla)。

Dateオブジェクトを作成するところ(var now:Date = new Date())から、html表示をするところ(display_txt.htmlText = htmlCode)までを挟むように次のスクリプトを追加する。

addEventListener(Event.ENTER_FRAME,function(){
var now:Date = new Date()
　　～
display_txt.htmlText = htmlCode
})

addEventListener()とは、Flashが備えているイベントにタイミングを合わせてfunction(=関数という)を実行する命令だ。この場合、Event.ENTER_FRAMEというタイミングに合わせて、その次の行から最後のhtmlTextへの代入までを実行している。ムービープレビューすると、秒のところが、変化するようになるはずだ。

とりあえず、動作するようにはなったが、あきらかに見た目がおかしく、まだ調整が必要な部分がある。それは以下のような箇所だ。

数字で表現されている曜日（2行目）をアルファベットにしたい。
時、分、秒など、1桁の時には、「0」を頭に付けたい。
フォントの有無にかかわらず同じ見た目を維持したい。でないと折り返しが発生したりして見苦しい。

1. と 2 .は、場合分けに使用するif文を活用することで解決できる。
3. は、Flashのフォントの埋め込み機能を利用すれば解決できる。

次回は、その解説をしていこう。

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