スマホサイト・アプリをつくろう。

ケータイFlashの待ち受けコンテンツの定番の一つにアナログ時計があります。
今回はアナログ時計の作り方について説明します。
　
時計の作り方は多くのActionScript関係の書籍に載っている定番スクリプトですが、
ケータイFlashの場合は少しActionScriptが異なります。
　
　

アナログ時計のしくみ

アナログ時計では時針・分針・秒針の３つのムービークリップをリアルタイムに動かします。
　
ケータイ端末での時刻の取得はfscommand2()関数で可能です。
PCのFlashと方法が異なりますので注意が必要です。

時（24時間単位）
fscommand2("GetTimeHours")
分
fscommand2("GetTimeMinutes")
秒
fscommand2("GetTimeSeconds")

　
針の角度はrotationプロパティで制御できます。
rotationは上の方向から時計回りに0から360までの数値で指定します。
　
毎フレーム実行してリアルタイムの動きをつけるのはフレームのループで可能です。
フレームレートは12fpsで作成していますが１秒に１回しか変化しませんので多少フレームレートを下げても問題ないでしょう。
　
　

SWFの作り方

　
１．準備作業
パブリッシュバージョンはFlashLite1.1にしておきます。
ステージサイズは240×240pxとします。
　
２．針を用意する
時分秒の針のシェイプを作成し、縦にした状態でレイヤーを分けて配置します。
整列パネルを使うと揃えやすいです。
　
３．針をムービークリップにして配置する
それぞれのシェイプをムービークリップに変換します。
その際、回転の中心にしたい場所を中心にしてシンボル化します。
「シンボルに変換」でムービークリップにする際に基準座標を選択できますので、中央下を選択します。
　
ActionScriptで制御しますのでそれぞれのムービークリップにインスタンス名をつけます。
ここでは時針を「hour_mc」、分針を「minute_mc」、秒針を「second_mc」としておきます。
→[図141]
　
また、それぞれの針のムービークリップの中心が画面中央になるように位置を移動しておきます。
　
４．背景を用意する
背景に新規レイヤーを作成して文字盤を用意します。
数字を入れたり、文字盤のデザインを調整したりします。
　
数字は特に動的に変更するものでもないので、埋め込みフォントを使った静止テキストなどで配置します。
→[図142]
　
５．アクションを設定する
アクショレイヤーを追加します。
フレームを一つ増やし、アクションレイヤーのみキーフレームにしておきます。
　
１フレーム目に以下アクションを記入します。

hour = fscommand2("GetTimeHours")%12;
minutes = fscommand2("GetTimeMinutes");
seconds = fscommand2("GetTimeSeconds");
tellTarget ("hour_mc") {
    _rotation = 360*(/:hour/12+/:minutes/720);
    _xscale = 100;
    _yscale = 100;
}
tellTarget ("minute_mc") {
    _rotation = 360*(/:minutes/60);
    _xscale = 100;
    _yscale = 100;
}
tellTarget ("second_mc") {
    _rotation = 360*(/:seconds/60);
    _xscale = 100;
    _yscale = 100;
}

→[図143]
・時針の向きは時刻÷12を計算し、それに分÷60÷12の値を加えたものを360倍します。
・時刻だけで計算してしまうと、時針が１時間ごとに進む、時計としておかしい動きになるので注意しましょう。
・_xscaleと_yscaleの補正については_rotationに応じて伸縮してしまうFlash 4 の不具合の対策です。
　
２フレーム目に以下アクションを記入します。

gotoAndPlay(1);

　
６．パブリッシュ
パブリッシュして動作確認します。
端末の時刻通りに針が動いているでしょうか？
　
swfのファイルサイズが100KBを超えないように注意しましょう。
素材や埋め込みフォントを減らすと解決できることが多いです。
　
　

実行例

実行例はこちらからご確認下さい。

→URLをメールで送る
http://ookura.tanikaze.com/Sample/post4223/
　
　

画面イメージ

サンプルファイル

sample4223.zip
上記サンプルのFlashファイル一式です。
　
　

最後に

以上のような手順で意外と簡単に作ることができます。
オリジナルのアナログ時計を作ってみてはいかがでしょうか。
　
　

参考書籍

Amazon.co.jp： 携帯Flashサイトデザイン入門―Flash Lite「1.0」「1.1」対応 (I・O BOOKS)- 諸星 拓也- 本
http://www.amazon.co.jp/dp/4777514056
→サイトデザインや各種待ち受けの作り方が書かれていて非常に参考になります。
　
　

参考URL

Flash時計を作る
http://www.geocities.jp/para_core/kouza/clock_typ.html
　
　

関連ページ

ケータイFlash関連の記事一覧