2010年03月15日

アナログ時計の作り方

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎週1ネタピックアップしてお届けするこのコーナーチャッピー

さて、第22回の今日は、Dateクラスを使用してアナログ時計を作ります。

アナログ時計の作り方


ぴかぴか(新しい)完成ぴかぴか(新しい)






1新規ファイル(AS3.0)を開きます。
 ステージサイズを変更します。
 今回は「200」×「200」pxとします。

2文字盤」「秒針」「短針」「長針」の4つの素材をそれぞれ準備します。
analogue_parts

3秒針」「短針」「長針」をそれぞれムービークリップシンボルに変換し、下記の通りインスタンス名をつけます。
 秒針⇒second_mc
 短針⇒hour_mc
 長針⇒minute_mc

4同一のレイヤーにパーツを配置します。
analoguewatch

5新規にレイヤーを追加し、下記のスクリプトを記述します。

Script_Sample

(補足・・・)
【針の回転角度】
秒針は1秒間に360(度)÷60=6度回転
よって
 ⇒現在の秒×(360÷60)

長針は1分間に360(度)÷60=6度回転
よって
 ⇒現在の分×(360÷60)

短針は1時間に360(度)÷12=30度回転
1時間に1回しか動かないのでは針の動きが不自然なので、

これに、1分間に30(短針1時間あたりの回転角度)÷60=0.5度回転する動きを加えます。

よって
 ⇒現在の時×(360÷12)+現在の分×(30÷60)

と、なります。



(2010年3月27日追記)
記述するActionScriptについてですが、

var date = new Date();

ではなく、

var date:Date = new Date();

と、型指定した方がよいとあの方にご指摘を受けましたひらめき

きちんと型指定をした方が、Flash Player上におけるActionScriptの処理パフォーマンスが高まるぴかぴか(新しい)とのことです。
大変失礼いたしました〜あせあせ(飛び散る汗)

で、あの方がどなたかと申しますと、m-Schoolでも何度も講師をしていただいたことのある、あの野中文雄氏です目あせあせ(飛び散る汗)

見ていただけてるとは恐縮ですあせあせ(飛び散る汗)
大変有り難いご指摘ありがとうございましたわーい(嬉しい顔)ぴかぴか(新しい)
posted by チャッピー at 12:00
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック