時計の作り方【デジタル編】 / Flash Flower / フラッシュフラワー

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

---

---

デジタル時計にはとってもたくさんの作り方があります♪
最もポピュラーな方法は：ダイナミックテキストを利用する方法や、Math.floorコードを使っての各数字を10の位と1の位に分けて表示する方法になると思われます。
今回の作る方法ですとデジタル数字をいろいろなオリジナルアレンジが出来ます♪
例えば0〜9の数字をいろいろなフォントに変える他に、画像を利用してのアレンジ
そしてアクションを加えて動きを出すことも可能となっております。

こちら下にありますコードでデジタルフラッシュ時計を作りたいと思います。
こちらはMr Robert Lozyniakさんから送っていただきましたコードで、私がいままで作っていたデジタル時計コードとは違いますがとってもシンプルでスマートなコードとなっております♪
コードの説明は文章下で、そしてコード解読後は時分秒ともにオリジナルアレンジをしてみましょう♪

---

【アクションスクリプト3.0でのFlash時計プログラム】↓【1】〜【16】でフラッシュ時計完成です♪↓
＜＜Mr Robert Lozyniak DIGITAL CLOCK CODE＞＞
(〃⌒ー⌒〃)ゞThank you for Mr Robert Lozyniak♪
----------------------------------------(こちら点線の枠内がプログラムになります)
// script for a 24-hour digital clock
this.myclock.addEventListener(Event.ENTER_FRAME,nowClock);
function nowClock(event:Event):void {
// get current time
var now:Date = new Date();
var ss:Number = now.getSeconds();
var mm:Number = now.getMinutes();
var hh:Number = now.getHours();
// split up the numbers into digits
var s1:Number = ss%10;
var s10:Number = (ss-s1)/10;
var m1:Number = mm%10;
var m10:Number = (mm-m1)/10;
var h1:Number = hh%10;
var h10:Number = (hh-h1)/10;
// display digits
this.myclock.secondOnes.gotoAndStop(s1+1);
this.myclock.secondTens.gotoAndStop(s10+1);
this.myclock.minuteOnes.gotoAndStop(m1+1);
this.myclock.minuteTens.gotoAndStop(m10+1);
this.myclock.hourOnes.gotoAndStop(h1+1);
this.myclock.hourTens.gotoAndStop(h10+1);
}
----------------------------------------(こちら点線の枠内がプログラムになります)
＜↑こちらのアクションプログラムを利用しましてフラッシュ時計を作ってみたいと思います♪＞
コピペをしましたらアクションプログラム内の"自動フォーマット"をポチッと致しましょう♪"自動フォーマット"をクリックすると文章が綺麗に整って見やすくなります♪ Adobe Flash CS3利用時の時計作りプログラムです。
アクションスクリプト2.0を利用する場合はまたちょっと違う書き方になりますがこのページでは上の書き方でデジタル時計を作ってみたいと思います♪(〃⌒ー⌒〃)ゞ
この他にデジタル時計の作り方はたくさんありますので1つのコード方法として見ていただけると幸いです♪

【1】Flashソフトを起動致しましてから新規でActionScript3.0を開きます
新規作成Flashファイル(AS 3.0)をクリック。

【2】新規ページが表示されましたら上位ツールの中から"挿入"をクリックしまして"新規シンボル"を開きます。シンボルはデジタル数字と時計本体の2つを作りますのでまずはデジタル数字を作りたいと思います

【3】新規シンボルをクリックして現れるウィンドウの"名前"の所にsujiと記入してOKをクリック。
真ん中のワークスペースが真っ白になっておりますのでデジタル数字を描きたいと思います。
(この時に上位ツールの中から"表示"をクリックして"ルーラー"と"グリッド"の2つをONにしておくと
いろいろ見やすくなってとっても便利です♪)
デジタル数字はテキストツールで作りたいと思います。
ワークスペースの左ツールの中に"T"というテキストツールがありますのでこれをクリック致します。フォントや文字の大きさ・カラーなどを決めたらワークスペース中央のバツ印に数字の0を書きます。この時に数字をぴったりと中央に合わせておくときれいに整ってデジタル数字が表示されます。
例えば数字を書いた時の横幅が"20"、縦幅が"30"の場合などは
x座標が"-10"、y座標が"-15"という位置関係がワークスペースの左下にあるプロパティ値に書かれているとワークスペース中央にあるということになります。

【4】数字の0が出来ましたので、次に数字の1を書きたいと思います。
数字の0が書かれているワークスペースの上にレイヤーがあります。ここに新しくキーフレームを足したいと思いますのでフレーム1：黒い●ポチの1つ右の空フレームで右クリックをしてキーフレームの挿入をクリック致します。
フレーム2が出来上がったと思われます。そしてフレーム2のワークスペースの真ん中にも数字の0が書かれていると思います。
これはフレーム1がコピーされてフレーム2が出来上がっているのを意味しております。
フレーム2が出来上がりましたらフレーム2のワークスペース中央の数字0を数字の1に修正致します。

【5】数字の1を作った手順と同じように今度は数字の2、数字の3と作っていきます。
最終的に数字の9が出来上がるとこのシンボルは完成となります♪
・・・と、ここで注意したい点があります。
フレーム1に数字の0を作りました。そしてそのままキーフレームを足してそれぞれに数字の1.2.3.4.5.6.7.8.9と書いていきますと最終フレームは10となります。フレーム1に数字の0で、フレーム10に数字の9がくるということですのでなんとも複雑な感じがしますが、こんがらないように致しましょう。
※フレーム1に数字の1を書くという方法もあります♪こうするとフレーム9に数字の9がきますので気持ち的にもなんだかすっきり致します。この場合は数字の0はフレーム10にくるということになります。
この方法で数字を書いていった場合はプログラムコードの【+1】を消して【if関数】を付け加えると出来上がります。
コード説明が後ほどの文章に出てきますのでコードを理解してしまった後はいろんな記入方法にアレンジしてみましょう♪(〃⌒ー⌒〃)ゞ

【6】数字のキーフレームが出来上がりましたら、次にレイヤーを1つ足したいと思います。
ワークスペースの上側にレイヤー1、そして数字を記入したキーフレームが10個並んでいます。このワークスペースとレイヤー(フレーム)の間の中段ツール左側に"レイヤーの追加"という所がありますので、こちらをクリック致しましょう。

【7】レイヤーの追加をクリックすると、レイヤー1の上にレイヤー2が出来上がります。
レイヤー2は空白となっていますので、レイヤー2のフレーム1にキーフレームを挿入致します。キーフレームを挿入するとフレーム1に新しく白い○ポチが表示されます。（フレーム2にも白い○ポチはあります）
このフレーム1の白い○ポチをクリックしたらファンクションキーのF9を押します。
F9を押すとアクションフレームのウィンドウが出てくると思われます。
もし出てこない場合はファンクションキーではなく右クリックを押して、コマンドの中から"アクション"を選択するとアクションフレームが出てきます。F9はこの右クリックからアクションまでのショートカットキーの役目になっています。

【8】アクションフレームの中に stop(); と記入致します。
ストップアクションを記入するのは数字が自動で流れないように止めるコードになります。
このストップアクションが無い場合は数字が0〜9まで常に流れる時計になってしまいますので、一番はじめに数字を止めておきたいと思います。
これでsujiシンボルは完成となります。

【9】次に上位ツールの中から"挿入"をクリックしまして"新規シンボル"を開きます。新規シンボルをクリックして現れるウィンドウの"名前"の所にmyclockと記入してOKをクリック。
出てきたワークスペースの中にシンボルsujiを6個分持ってきたいと思います。ワークスペースの右側：ライブラリの中に先ほど作りましたsujiがありますので、sujiをドラッグしてワークスペースの中央まで持ってきます。
（フレーム1に数字の0を書いたのでドラッグしている間や設置した後は数字の0が表示されております）
このドラッグの行動を6個分するのですが、1個設置後は、コピーペーストでも大丈夫ですし、sujiシンボルをまたドラッグしてきても大丈夫です。ワークスペースの中央に6個並んだ状態を作りたいと思います。

【10】今度はこのsujiシンボルに各種インスタンス名をつけたいと思います。
設置したsujiシンボル6個のうち一番左のシンボルをクリックして、ワークスペースの下にあるプロパティの中、座標などが書いてある所の上に空白の部分があるかと思われます。ここに hourTens と記入致します。
hourTens と記入したシンボルの次は hourOnes と記入致します。
全部で6個ありますので左から順に
hourTens / hourOnes / minuteTens / minuteOnes / secondTens / secondOnes と記入致します。

【10】sujiとmyclockのシンボルが完成しましたので次にシーンに戻ります。
ワークスペースとレイヤーの中段ツールの中から"シーン1"をクリック致します。
そして戻ってきたシーンのワークスペース中央にライブラリの中から今度はmyclockをドラッグして持ってきます。このmyclockシンボルはsujiシンボルが6個並んでいる状態と思われます。
ワークスペースに設置したらインスタンス名の所にmyclockと記入致します。

【11】ここから先はプログラムの記入になります。ワークスペースの上側にレイヤー1と書かれている所があります、このワークスペースとレイヤー(フレーム)の間の中段ツール左側に"レイヤーの追加"という所がありますので、こちらをクリック致しましょう♪

【12】クリックすると"レイヤー2"が出てきたと思います、このレイヤー2の"1フレーム目"にプログラムを記入致します。レイヤー1の1フレーム目には黒い●ポチがあり、レイヤー2の1フレーム目には白い○ポチがついております♪
このレイヤー2の白い○ポチを1度クリックしたらそのままF9のファンクションキーをクリック致します。そうするとアクションフレームが出てきますのでこちらにプログラムを記入致します。

【13】プログラムはこのページの一番上にある点線で囲まれている英語の文章をそのままコピーペーストしてみましょう。アクションフレームにペーストされたら閉じるボタンをクリック致します。

【14】これで数字のみの時計ではありますが時間を読み取るプログラムと合わせて完成致しました♪きちんと動くかどうか試してみたいと思います♪

【15】上位ツールの中から"制御"をクリック致しまして、"ムービープレビュー(M)"をクリック致します。製作した時計が動いているウィンドウが表示されれば大丈夫です♪ 6つの数字がそれぞれ正常に動いていれば、ここからさらに枠や土台をプラスしたりドットやスラッシュなどの文字盤をプラスしたりとバリエーション豊富になります♪

【16】時計の基本的な作り方(オレンジフラワーの場合)は終了致しました♪お疲れ様でした♪
ここから下は12時間時計の作り方・コードの説明・特殊な時計・その他プログラム・オレンジフラワーのメモ帳と題しまして時計作りのお話しになります♪
興味があられます方はここから下もぜひです〜♪(〃⌒ー⌒〃)ゞ

【17】
上記で作りました時計は24時間時計タイプのデジタル時計となっておりましたが、
12時間時計タイプのデジタル時計も作ってみたいと思います。♪(〃⌒ー⌒〃)ゞ

例えば夕方5時30分30秒の場合は
24時間時計の表示は 17:30:30 となります。
12時間時計の表示は PM5:30:30 となります。
AMとPMでの午前午後表示、そして時表示に違いが出ています。

【18】シンボルsujiで数字の0〜9を書きましたので、ここにキーフレームをプラスして、
フレーム11に数字の10・フレーム12に数字の11を書きます。

【19】シンボルmyclockに6個並べたシンボルsujiがありますが、こちらは一番左に設置した hourTens を削除致します。全部で5個のシンボルを並べる形になります。
この時、5個並んでいるうちの一番左のシンボルのインスタンス名は hourOnes となっておりますが hour と書き換えておきます。

【20】ここで午前午後表示のための新しいシンボルを作りたいと思います。
"新規シンボル"の挿入でampmと記入して新しいワークスペースを表示致します。
ワークスペース中央にテキストツールを利用してAMと書きます、そしてキーフレームを1つ足しましてPMも作ります。sujiシンボルを作った時と同じように新しいレイヤー2を作りストップアクションも作っておきましょう♪

【21】新しいampmシンボルを作りましたのでmyclockシンボルの編集に戻りたいと思います。
myclockシンボルの5個並んでいるsujiシンボルの左にampmシンボルをドラッグしてきます。設置したシンボルのインスタンス名の所にはampmと記入致します。
これで12時間時計タイプのデジタル時計が完成致しました♪
24時間時計のコードをこちら下にあります12時間時計のコードに変更して時計の完成となります♪
＜＜Mr Robert Lozyniak DIGITAL CLOCK CODE＞＞
(〃⌒ー⌒〃)ゞThank you for Mr Robert Lozyniak♪
----------------------------------------(こちら点線の枠内がプログラムになります)
// script for a 12-hour digital clock
this.myclock.addEventListener(Event.ENTER_FRAME,nowClock);
function nowClock(event:Event):void {
// get current time
var now:Date = new Date();
var ss:Number = now.getSeconds();
var mm:Number = now.getMinutes();
var hh:Number = now.getHours();
// split up the numbers (seconds and minutes) into digits
var s1:Number = ss%10;
var s10:Number = (ss-s1)/10;
var m1:Number = mm%10;
var m10:Number = (mm-m1)/10;
// convert hour into 12-hour time
var h1:Number = hh%12;
var h12:Number = (hh-h1)/12;
// display digits
this.myclock.secondOnes.gotoAndStop(s1+1);
this.myclock.secondTens.gotoAndStop(s10+1);
this.myclock.minuteOnes.gotoAndStop(m1+1);
this.myclock.minuteTens.gotoAndStop(m10+1);
this.myclock.hour.gotoAndStop(h1+1);
this.myclock.ampm.gotoAndStop(h12+1);
}
----------------------------------------(こちら点線の枠内がプログラムになります)

【メモ帳】【24時間デジタル時計のコード説明】
（すぐ上にあるのは12時間時計のコードで24時間時計のコードはページ最上部の方になります。）
コード1行目はダブルスラッシュを使った文章の説明になっております。その他4行目・9行目・16行目もダブルスラッシュを使ったコード説明です。例えば1行目などは24デジタル時計のためのアクションスクリプトという説明などです♪
2行目・3行目はアクションスクリプト3.0を使った時計コードを意味しています、こちらを記入して5行目以降から各種日付やタイムを取得となります。
5行目に現時刻・6行目に現時刻の秒・7行目に現時刻の分・8行目に現時刻の時を取得しています。
10行目にパーセントを利用した取得方法が書かれています。
これは余りを算出する記入方法で、例えば現在時刻の秒が36秒だとします。ssが36ということになります。そして"36%10"というのは"36を10で割った余り"という計算表記になります。なので36秒の時はs1は6になるという文章です。
11行目はスラッシュを利用した取得方法が書かれています。
これは通常の割り算となっております。例えば現在時刻が36秒の時ssは36、そしてs1が6となりました。このまま代入すると(36-6)割る10となり、結果3という数字が出てきます。
つまりは数字の10の位と1の位を算出する計算方法となっておりまして、そのまま秒の算出の他、12行目・13行目は分の算出、14行目・15行目は時の算出となっております。
17行目はそれぞれのシンボル(キーフレーム移動)に数字を割り当てる表記となっております。
例えば36秒の時は秒の1の位は6です。secondOnesに秒の1の位を当てはめたいですので、secondOnesは秒の1の位プラス1のフレームに移動してそのままストップするという表記になります。 1をプラスしたフレームに移動するのは、数字の6を書いたフレームが7にあるためです。ですので秒の1の位が6の時はsecondOnesのフレーム7に移動致します。
以降、分と時のそれぞれ10の位と1の位のキーフレーム移動コードとなっております♪

一般的なデジタルフラッシュ時計はダイナミックテキストを利用した方法が多いと思われます。ダイナミックテキストを利用すると、今回0〜9までの数字を書きましたがこれを必要とせずに、現在時刻を取得してそのまま数字で表すという直接方式になります♪
実はダイナミックテキストを利用したほうがパーツもすっきり、コードもすっきりなのです♪
ですがオレンジフラワーは数字をちょこちょこ作るのが好きなので、こういったコードをよく利用したりしているのです♪
次回また書く時がありましたら読んでいただけると嬉しいです♪(〃⌒ー⌒〃)ゞ