サンプルダウンロード
PDRファイル・CSFファイル・SWFファイル在中
「digital.zip」 10.2 KB (10,540 バイト)

デジタル時計 作成方法解説

ParaDraw Ver.0.3a4 で作成した絵を，Suzuka Ver.0.6.5 で動作させています。
ホームページのアクセサリに使う場合は，面積をとるアナログ時計より小さく四角くできるデジタル時計の方が使い勝手が良いかもしれません。というわけで作ってみました。絵は「アクアなボタン」の超発展編という感じです。

このサンプルの場合は，数字に文字ではなく，ParaDraw で作成した絵を使用しています。その数字の絵をSuzukaで１つのスプライトにまとめて，ActionScript でスプライトのフレームを動かすことによって表示を変えています。

スプライト内のフレーム番号と数字とは１つずつずらして入れています。

そして，取得した時刻や分の数によって，スプライト内のフレームを gotoAndStop させています。

_root のタイムラインの フレーム1 のスクリプト。

this.onEnterFrame = function() { // 現在の時刻オブジェクト now を作成 now = new Date(); // 変数 h に時刻を取得 h = now.getHours(); // 変数 m に分を取得 m = now.getMinutes(); // // AM/PM に関して ＆ h の補正 if (h<12) { this.ap.gotoAndStop(1); } else { this.ap.gotoAndStop(2); h -= 12; } // 変数 ji に "0" に h を足した文字列を代入（桁合わせ） ji = "0"+h; // h1 と h2 をそれぞれのフレームに進める this.h1.gotoAndStop(Number(ji.substr(-2, 1))+1); this.h2.gotoAndStop(Number(ji.substr(-1, 1))+1); // 変数 hun に "0" に m を足した文字列を代入（桁合わせ） hun = "0"+m; // m1 と m2 をそれぞれのフレームに進める this.m1.gotoAndStop(Number(hun.substr(-2, 1))+1); this.m2.gotoAndStop(Number(hun.substr(-1, 1))+1); }; // 即onEnterFrameを実行 this.onEnterFrame();

アナログ時計同様，図画工作の時間の後は，算数の時間という感じです。
算数と言っても少し頭を使う算数ですが，なぜそういう式になるのかは，じっくりと考えればわかると思います（おそらく）。

---2007年7月1日-----
初回アップ 

---2007年12月15日---
スクリプトを一部修正

---2008年5月6日---
スクリプトを一部修正