時計の作り方【24時間時計と逆回転時計編】 / Flash Flower / フラッシュフラワー

アナログ時計の作り方 デジタル時計の作り方 時計のコンセプト帳
24時間時計の作り方 逆回転時計の作り方 時計の各部品素材 -----【アナログフラッシュ時計の作り方編】----- ＜時計の作り方＞文字を大きくされます方はこちらをどうぞ⇒BIGページ
Flash時計を作ってみよう〜♪をコンセプトのWebページ。
オレンジフラワーが思うFlash時計の作り方をちょこちょこ更新していけたらな♪というページです♪
プログラム・デザインともに個性はでるのですが、Flash時計を作る過程をメインに記述していきたいと思います♪ 時計の部品のページも合わせて読んでいただけると嬉しいです♪(〃⌒ー⌒〃)ゞ

---

---

こちら24時間時計と逆回転時計は同一ページです。(上下に分かれております)
作り方はアナログ時計の作り方の【17】以降で説明を致しておりまして、こちらでは出来上がりのサンプル設置とコード解説&時計説明を致しております。
数字の配置方法と角度設置方法、マグネット設置の方法などを以下で説明致しております。

【24時間時計AS3コード】
----------------------------------------
//イベントリスナーでイベントを監視する
this.myclock.addEventListener(Event.ENTER_FRAME,nowClock);
//時計を更新する関数の定義
function nowClock(event:Event):void {
//現在の時分秒を調べる
var now:Date = new Date();
var ss:Number = now.getSeconds();
var mm:Number = now.getMinutes();
var hh:Number = now.getHours();
//時刻の数値から針の角度を計算する
ss=ss * 360 / 60;
mm=mm * 360 / 60;
hh=hh * 360 / 24;
//角度の数値を針のインスタンスに適用する
this.myclock.second.rotation=ss;
this.myclock.minute.rotation = mm;
this.myclock.hour.rotation = hh;
}
----------------------------------------(こちら点線の枠内がプログラムになります)

＜＜TRUE CODE＞＞(〃⌒ー⌒〃)ゞThank you for Mr Robert Lozyniak♪
----------------------------------------(こちら点線の枠内がプログラムになります)
//イベントリスナーでイベントを監視する
this.myclock.addEventListener(Event.ENTER_FRAME,nowClock);
//時計を更新する関数の定義
function nowClock(event:Event):void {
//現在の時分秒を調べる
var now:Date = new Date();
var ss:Number = now.getSeconds();
var mm:Number = now.getMinutes();
var hh:Number = now.getHours();
//時刻の数値から針の角度を計算する
ss=ss * 360 / 60;
mm=mm * 360 / 60 + ss / 60;
hh=hh * 360 / 24 + mm / 24;
//角度の数値を針のインスタンスに適用する
this.myclock.second.rotation=ss;
this.myclock.minute.rotation = mm;
this.myclock.hour.rotation = hh;
}
----------------------------------------(こちら点線の枠内がプログラムになります)
＜TRUE CODE＞＜TRUE CODE＞は針の動き方に少々違いがあります。＜TRUE CODE＞の上側のコードですと秒針が1秒に6°計算、分針が1分に6°計算、時針が1時間に15°計算となっております。 この計算方法で針が進むと秒針が60秒間の動きをして垂直の位置に戻ってきた時に分針が6°カチッと進みます。そして分針が60分間の動きをして垂直の位置に戻ってきた時に時針が15°カチッと進みます。
1時間経つと15°進む時針ということは、例えば3時01分の時に時針は数字の3を示していて、3時59分の時も時針は数字の3を示しております。
＜TRUE CODE＞を使うと分針と時針の進み方がスムーズな動きをする計算方法となります、3時01分の時に時針は数字の3を示していて、3時59分の時には時針は数字の4より微妙に手前を示します。 同じように分針も60秒(1分)の間をじょじょに進みます。
この＜TRUE CODE＞のスムーズな進み方を選ぶか、1分間あるいは1時間ごとにカチッとなる進み方を選ぶかは個性が出るところであります。 しかし、24時間時計の時針に関してはカチッとなる方法をおすすめ致します。それはなぜかというと数字盤の作り方にもよりますが、各数字の間隔が12時間時計よりも約半分になるからです。 例えばスムーズな時針の計算で3時10分・3時20分・3時30分・3時40分・3時50分の場合は、3時と4時の間を時針が滞在することになります。 12時間時計ならば3時と4時の間に時針があっても間隔が広いため、現在時刻が3時何分かなのかということが分かりますが、24時間時計ですと3と4の間に滞在しているのが見にくい場合があります。 これは数字盤の作り方で解消することも出来ます。サンプルで設置した24時間時計は各数字が一列に円を描いていますが、この数字を1つずつずらして作る方法をとるとスムーズな時針の動きでも大丈夫です♪
数字盤の作り方や時計のデザインでコードをかえてみると良い感じになるかもしれません♪
(〃⌒ー⌒〃)ゞ
数字盤の作り方は下の逆回転時計AS3コードと合わせて解説してみたいと思います♪

---

【逆回転時計AS3コード】
----------------------------------------
//イベントリスナーでイベントを監視する
this.myclock.addEventListener(Event.ENTER_FRAME,nowClock);
//時計を更新する関数の定義
function nowClock(event:Event):void {
//現在の時分秒を調べる
var now:Date = new Date();
var ss:Number = now.getSeconds();
var mm:Number = now.getMinutes();
var hh:Number = now.getHours();
//時刻の数値から針の角度を計算する
ss=ss * 360 / -60;
mm=mm * 360 / -60;
hh=hh * 360 / -12 + mm / 12;
//角度の数値を針のインスタンスに適用する
this.myclock.second.rotation=ss;
this.myclock.minute.rotation = mm;
this.myclock.hour.rotation = hh;
}
----------------------------------------(こちら点線の枠内がプログラムになります)

＜＜TRUE CODE＞＞(〃⌒ー⌒〃)ゞThank you for Mr Robert Lozyniak♪
----------------------------------------(こちら点線の枠内がプログラムになります)
//イベントリスナーでイベントを監視する
this.myclock.addEventListener(Event.ENTER_FRAME,nowClock);
//時計を更新する関数の定義
function nowClock(event:Event):void {
//現在の時分秒を調べる
var now:Date = new Date();
var ss:Number = now.getSeconds();
var mm:Number = now.getMinutes();
var hh:Number = now.getHours();
//時刻の数値から針の角度を計算する
ss=ss * 360 / -60;
mm=mm * 360 / -60 + ss / 60;
hh=hh * 360 / -12 + mm / 12;
//角度の数値を針のインスタンスに適用する
this.myclock.second.rotation=ss;
this.myclock.minute.rotation = mm;
this.myclock.hour.rotation = hh;
}
----------------------------------------(こちら点線の枠内がプログラムになります)
＜TRUE CODE＞こちらの＜TRUE CODE＞も分針と時針の動きがスムーズになる計算コードです。
逆回転時計での数字の配置方法は通常の12時間時計の数字を入れ替えたものになります。
数字盤の作り方はまずテキストで各数字を作ります(画像でも問題ありません)。次に角度を決めます、各数字を垂直に使う場合はそのままでかまいませんが、サンプル時計のように角度をつける場合は 12が0°/そして順に30°ずつ向きを変えてみます。1が30°/2が60°/3が90°・・・といった感じになります。4〜8をサンプル時計のように逆計算の角度設置をするということもあります。 9〜11は、9が270°/10が300°/11が330°となっております♪
逆回転時計では、11が30°/10が60°/9が90°・・・という感じで12時間時計の数字盤がそのまま数字だけ変わったようになります
次に24時間時計での数字盤ですが0〜23までの数字24個、あるいは1〜24までの数字24個を作ります。そして、こちらは各15°計算で角度設置をしていきます。 各数字の間隔を決めるのが少々むずかしいところではあります。
・必要な数字だけを使いその他を記号やマークにする場合
・各数字を小さくして綺麗な間隔で整える場合
・各数字に段差あるいはずらしを入れて組み合わせる場合
・内円と外円で数字を2つに半分個する場合
その他いろいろな方法があると思いますが24時間時計の数字盤は多種多様で、文字盤に個性が出る時計かと思われます♪(〃⌒ー⌒〃)ゞ

数字の配置方法：マグネット設置の説明アナログ時計の作り方：メモ帳1を参照致しております。
ここでは１つのレイヤーに１２個の数字を配置する方法を書いていきたいと思います。 まず１２個の数字をテキストあるいは画像で設置します。これとは別のレイヤーに設置したい大きさの円形の線を書きます。そしてまた別のレイヤーを作りまして、これには６本の線を交差（縦・横・斜め３０度・斜め６０度・斜め１２０度・斜め１５０度）させます。 （24時間時計では１２本の線を交差（各１５度）となります）
この円形の線と６本の線を書いたレイヤー２つを重ねると円形の線の上に１２個の交差する部分が出来上がります。この交差する部分にマグネット設置を利用して１２個の数字を１つ１つくっつけていきます。そして最後に円形の線と６本の線のレイヤー２つを消して数字だけ残せば完成致します。