PR

時計待ち受けを作ろう!

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

アナログ時計の素材を用意

 アナログ時計のサンプルファイルをこちらからダウンロード(http://www.thinkit.co.jp/images/article/144/3/14432.zip)してください(14432.zip/614 KB)。

 基本的な構成はデジタル時計と変わりません。メインとなるスクリプトは、ステージ外の左上に配置してある空のムービークリップの1フレーム目にすべて記述しています。

 アナログ時計を作成するにあたり、前ページのサンプルに少しアレンジを加えて、ベースを作成していきます。

 「長針」「短針」「秒針」オブジェクトを作成し、それぞれ、「tyoshin」「tanshin」「byoshin」というインスタンス名をつけます。そのほか、必要な部品などを配置して全体のバランスを調整します。

 注意点としては、オブジェクトをシンボル化し、オブジェクト配置する際の基準点に気をつけることです。各針のオブジェクトは、この基準点を中心に回転することとなります。

 次にデジタル時計のスクリプトに、アナログ時計を動かすための処理を追加していきます。

 アナログ時計は、「長針」「短針」「秒針」が時間に合わせて360度回転していきます。そのため、その時間の数値から角度を算出していきます。また、デジタル時計のスクリプト解説の通り、ムービークリップのプロパティを指定する場合は、ドットシンタックスで記述できます。具体的なスクリプトは下記の通りとなります。

_root.tanshin._rotation = Hours * 360 / 12 + Minutes * 360 / 12 / 60; // 短針(時)
_root.tyoshin._rotation = Minutes * 360 / 60; // 長針(分)
_root.byoshin._rotation = Seconds * 360 / 60; // 秒針

 時計の針の角度について簡単に解説します。

 まず、秒針と長針(分)は、実際の時計を見て分かるように、60秒、または、60分で360度回転します。つまり、1秒または1分は、360/60(6度)ということになります。10分であれば、360/60x10で60度の角度になります。

 短針(時)は、12時間で360度となるので、こちらも同じような計算を行い、1時は360/12(30度)となります。しかし、ここで実際の時計の動きをよく見てみると、短針は常に同じ角度のままではありません。例えば、時間が1:30の時には、1時と2時の間くらいに動いているはずです。この短針の動きを表現するため、さらに、「+ Minutes * 360 / 12 / 60」という数値をプラスさせています。これは短針(時)が1時から2時へ動く分の角度に長針(分)が1周する割合分を考慮して計算したものです。

 これでアナログ時計が動作するのを確認できます。

時計待ち受けのさらなる表現

 Flash Liteでの待ち受けコンテンツは、このように簡単に時間や日付を取得して表示させたり、アニメーションさせることができます。時間や日付以外にも、電波状態やバッテリー残量なども同じく「fscommand2()」関数で取得できます。

 今回のサンプルでは、Flash Liteの基本部分を把握してもらうため、表現やデザインなどを極力省いたシンプルな構成にしています。実際に作成する場合には、時計の文字の下に何か写真やイラストなどを配置するだけでも雰囲気ががらりと変わってきます。

 さらに、条件分岐などの処理を追加すると、時間帯によって朝・昼・夜という雰囲気を表現したり、月ごとに表示を変えれば季節感を表現することもできます。そのほか、毎回ランダムで色や背景などを変えたり、電波状況が悪くなったりバッテリーが無くなりそうな場合は、何か警告が出るようなデザインにすることもできます。

 このように、ただ単に時計を表示するだけではなく、アイデアと工夫次第でいろいろ表現を広げられるのが、Flash Liteの大きな魅力と言えます。

 次回は、簡単なゲームの作り方を解説していきます。

株式会社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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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