FlexでFlashコンテンツを作ろう

2008年7月16日(水)
高橋 義博

簡単に現在の時刻を表示する

 では、現在の時刻を表示するActionScriptを説明していきます。

 図3の「toLocaleTimeString()による時刻表示」に書かれている「var now:Date = new Date();」ですが、Dateクラスを利用して現在の日時・時刻を取得している個所になります。「toLocaleTimeString()」を利用すると「00:00:00 AM」という形式で現在の時刻を取得することができますので、この値をラベルに表示しています。この時刻表示全体は、「nowTime()」という名前で設定されていて、タイマー機能「startTimer()」で1秒ごとに表示が更新されます。「実行ボタン」からブラウザでデジタル時計の動作を確認することができます。

 しかし、「toLocaleTimeString()」を利用すると表示形式「00:00:00 AM」を変更することができないため、「時」「分」「秒」を別々に取得して、「00時00分00秒」と表示も試してみたいと思います。

時刻の表示形式をカスタマイズ

 「時」「分」「秒」を別々に取得する方法ですが、図3の「時刻の表示形式をカスタマイズ」のActionScriptの記述にありますように、「.getHours()」「.getMinutes()」「.getSeconds()」と指定することにより、「時」「分」「秒」を取得することができます。記述も分かりやすい英語ですので、意味も理解しやすいと思います。

 取得した「時」「分」「秒」の値は、ぞれぞれ「hour」「min」「sec」という変数(値を格納する入れ物)に入っています。その値をラベルに表示するのですが、「+」を利用して変数と文字を連結して表示させています。この方法を利用すると、ご自身で好きな時刻の表示形式を作成することができます。

 このように、コンポーネントとActionScriptを組み合わせて、Flex Builder 3ではFlashコンテンツを作成していきます。図3に書かれているMXMLファイル(simpleDigitalClock.mxml)は、こちらからダウンロード(http://www.thinkit.co.jp/images/article/102/3/10232.zip)することができます(10232.zip/0.719 KB)。

 次回は、いよいよAIRコンテンツ作成の説明をしていきます。お楽しみに!

制御機器メーカーでソフト開発やWebマスターの業務を経て、2007年からフリーランスとして、Webサイト制作、Flashコンテンツ制作を行っている。また、WebスクールでWebデザイン、Flash制作の講師などを担当し、経験を生かして幅広い指導を行っている。

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています