時計待ち受けを作ろう!

2008年10月15日(水)
古本 光司

Flash Liteで時計待ち受けコンテンツ

 携帯の大きな特徴の1つでもあり、人気の高いコンテンツとして、待ち受け画像が挙げられると思います。待ち受け画像は通常の1枚画像だけではなく、Flashを用いたものも多く存在します。

 待ち受け画像をFlashで作成することにより、時計や日付を表示させるアニメーションが可能となります。つまり、待ち受け画像に何らかの動作を付け加えることができるので、より表現の幅を広げたものを作ることができます。

 今回は、Flash Liteで時計待ち受けを制作してみましょう。まずは簡単に、待ち受けの画面内に時計と日付が表示されるだけのシンプルなデジタル時計について説明します。

時計待ち受けの準備作業

 それでは、デジタル時計の待ち受けの作成方法を解説するにあたり、まずはこちらからサンプルをダウンロード(http://www.thinkit.co.jp/images/article/144/3/14431.zip)してください(14431.zip/606 KB)。

 はじめに、図1のようにステージにはダイナミックテキストのみを配置していきます。

 ここで注意する点としては、PC版のFlash制作時にはダイナミックテキストにインスタンス名を割り振ることができますが、Flash Liteではそれを行うことができません。そのため、時計が表示されるダイナミックテキストには「dateTxt」、日付が表示されるダイナミックテキストには「timeTxt」という変数を指定していきます。

 また、時計を表示させるためループ処理を行う必要があります。こちらもPC版のFlash制作時では「enterFrame」ですが、Flash Liteでは対応していないので、フレームを利用してループ処理を行う必要があります。

 そこで、Flash Liteのコンテンツでよく使われるのが、空のムービークリップです。1つスクリプト動作用に空のムービーリップを作成し、その中のタイムラインで2フレームを確保します。1フレームのみ時計と日付を表示する処理を記述することで、1フレーム→2フレーム→1フレーム…という感じでループアニメーションされることになるので、1フレームに記述されている時計と日付を表示させるためのスクリプト処理が繰り返し実行させることになります。

 厳密な説明をしていくと、上記の処理では完全なループ処理ではありません。毎回1フレームは何もスクリプトが実行しない時間が生まれてしまいます。ただ、今回の場合に関しては、最も頻度が高く表示が更新される個所が秒の数値部分となります。フレームレートが10fpsとしても、その誤差は単純計算で0.1秒ということになるので、それほど気にする必要はありません。もし、厳密なループ処理が必要であれば、1フレーム目と2フレーム目にcall()関数などを利用して同じ処理を記述した方が良い場合もあります。

 さて、これでデジタル時計の待ち受けを作成するための準備は一通り完了となります。

 次に、時間と日付の情報を取得し、それらを表示させるスクリプトの解説をします。

株式会社24-7

Webディレクター/Flashクリエイター。1995年に初めてインターネットの世界に触れ、1999年に独学で個人サイトの運営を始める。その後、本格的にWeb業界へと転身し、クリエイター、ディレクター、プランナー、講師業務、セミナーなど幅広く従事。また、個人的にもパブリッシャーとして活動中。より効果の高いWebの活用術を日々勉強中。『いざ高みへ!』1ka2ka.com:http://1ka2ka.com/ 株式会社24-7:http://www.24-7.co.jp/

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

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

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

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