今日の残り時間を表示する時計の作り方

質問

はじめまして。学校の課題でFlashに取り組んでいるのですが、どうやってもうまくいかないので、よろしければ教えてください。
下記のページにある「残り時間表示時計」のように、「今日の残り時間を表示する」時計を作りたいのですが、どのようにすれば良いのでしょうか。できればテキストではなく、画像で表示したいと考えています。
http://web-mono.net/cl_c/index.htm
ActionScriptを習い始めたばかりの初心者なので、詳しく解説も頂ければ幸いです。ちなみに、学校で使っているのはFlash8です。
どうぞよろしくお願いします。

回答No.1

BlurFiltan

> はじめまして。

こちらこそ，はじめまして。

> 学校の課題でFlashに取り組んでいるのですが、

あの... 正直なのはよろしいのですが......，
このカテゴリ（Flash）では良いのか悪いのかよくわかりませんが（明記されていませんが），
課題やレポートの答えを聞くことは，ルール違反になっています。
某カテゴリでは，課題やレポートの答えを聞く質問が大量に削除されています。
したがって，課題の答えを教えるわけには行かないのです...（多分）。
また私も，
「課題を完成させること」 より
「課題を完成させるために調べたり考えたりすること」 が大切だと思います。
したがってこの回答は途中までのヒント的な回答です。
また，このスレッドは，ご質問ごと削除になる可能性は大です（？）。

あと，
私自身はFlashの学校へ通ったことはありませんから，
この回答は我流ガリガリで，順当法な模範解答ではない悪い回答の可能性があります。
その逆で，
実は先生も教えていない模範解答以上の部分があるかもしれません。
また，
もしFlashの学校へ通ったことがあったとしても，
「今まで習った範囲で解決する」という，その「範囲」がわかりません。
したがって，習った範囲を超えていて，先生に怪しまれる可能性があるということも，念頭に置いておいてください。
ですから，回答というより，参考意見として見ていただく方が良いと思います。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

サンプルで書かれている
http://web-mono.net/cl_c/index.htm　 のページの「残り時間表示時計」ですが，
表示が "分" までです。
"分" までだと今一つ動きを感じないので，"秒" まで表示させることとして以下を書きます。
また，

> できればテキストではなく、画像で表示したい

ということですが，
とりあえずテキストを表示させるということが作成や検証の第一目標です。
テキストを表示させることをメインに，
スクリプトを進化させながら順を追って説明します。

> 「今日の残り時間を表示する」時計を作りたいのですが、

最初にこの "今日の残り時間" の考え方ですが，
私は，"明日までの残り時間" と考えました。
明日の 0時0分0.000秒 と，今日の 24時0分0.000秒 は同じ時刻だからです。
この最初の考え方からして，行かれている学校とは違う考え方かもしれません。

まず，
Flash で新規ドキュメントを作成し，
ステージ上に「remainHour」というインスタンス名（変数名ではありません）のダイナミックテキストフィールドと，
「remainMinutes」というインスタンス名のダイナミックテキストフィールドと，
「remainSeconds」というインスタンス名のダイナミックテキストフィールドの３つを用意します。
テキストフィールドの文字の色は，黒など背景色とは違う色を設定しておいてください。
「remainHour」は「時」，「remainMinutes」は「分」，「remainSeconds」は「秒」を表示させるテキストフィールドです。

そして，
フレームに次のように書き，パブリッシュやプレビューすると，まず第一段階の完成です。

//////////////////////////////////////////////////////////////////////
// 目標時刻（日）の時刻オブジェクト goalDate を作成
var goalDate = new Date(2006, 11, 21);
//
// １フレーム進む時間ごとに毎回実行
this.onEnterFrame = function() {
// 現在の時刻オブジェクト nowDate を作成
nowDate = new Date();
// 差分の時刻オブジェクトの作成
remainDate = new Date(goalDate-nowDate);
// 残り時間（時）を表示
remainHour.text = ("0"+remainDate.getUTCHours()).substr(-2, 2);
// 残り時間（分）を表示
remainMinutes.text = ("0"+remainDate.getUTCMinutes()).substr(-2, 2);
// 残り時間（秒）を表示
remainSeconds.text = ("0"+remainDate.getUTCSeconds()).substr(-2, 2);
};
//////////////////////////////////////////////////////////////////////

今，この回答を書いている "今日" は，2006年12月20日です。
したがって明日は 2006年12月21日です。
ですから，時刻オブジェクトを作成するときの引数として，
「2006, 11, 21」 と書いておくと，
2006年12月21日の0時0分00.000秒の時刻オブジェクトが作成されます。
なぜ 「2006, 12, 21」 ではなくて 「2006, 11, 21」 なのかと言うと，
Flash も含め，プログラム全般での月は 0 から始まるからです。
１月は0，２月は1，３月は2，… 12月は11 です。
したがって， 「2006, 11, 21」 になります。
後はだいたい，コメント行（「//」が先頭に付いた行）に書いてある通りです。

substr(-2, 2)　とか言う物が登場していますが，
これも我流かもしれませんし，順当法かもしれません。
if文をなるべく使いたくないので，
２桁の桁合わせを文字列操作でしています。
先日，このご質問↓に回答するときに，ふと閃いた方法です。

「取得した時間の表示について。」
http://oshiete1.goo.ne.jp/qa2575992.html
　↑教えて！goo　　↓OKWave　（同じです）
http://okwave.jp/qa2575992.html

以上のものを見るとわかると思いますが，
上のままだと明日（2006年12月21日）以降は使えません。
2006年12月21日 に使おうと思えば１行目を，

// 目標時刻（日）の時刻オブジェクト goalDate を作成
var goalDate = new Date(2006, 11, 22);

2006年12月22日 に使おうと思えば１行目を，

// 目標時刻（日）の時刻オブジェクト goalDate を作成
var goalDate = new Date(2006, 11, 23);

と，毎日手動で変えて，パブリッシュしなおさなければならなくなります。
そこで次に考えるのが "明日" を求める方法になります。

上のスクリプトを次のように書き替えると，
「明日」がわかって更新なしで，ずっと使えるものができます。

//////////////////////////////////////////////////////////////////////
// 現在の時刻オブジェクト nowDate を作成
var nowDate = new Date();
// 現在の年を 変数 myYear に代入
var myYear = nowDate.getFullYear();
// 現在の月を 変数 myMonth に代入
var myMonth = nowDate.getMonth();
// 現在の日を 変数 myDate に代入
var myDate = nowDate.getDate();
// 目標時刻（日）の時刻オブジェクト goalDate を作成
var goalDate = new Date(myYear, myMonth, myDate+1);
//
// １フレーム進む時間ごとに毎回実行
this.onEnterFrame = function() {
// 現在の時刻オブジェクト nowDate を作成
nowDate = new Date();
// 差分の時刻オブジェクトの作成
remainDate = new Date(goalDate-nowDate);
// 残り時間（時）を表示
remainHour.text = ("0"+remainDate.getUTCHours()).substr(-2, 2);
// 残り時間（分）を表示
remainMinutes.text = ("0"+remainDate.getUTCMinutes()).substr(-2, 2);
// 残り時間（秒）を表示
remainSeconds.text = ("0"+remainDate.getUTCSeconds()).substr(-2, 2);
};
//////////////////////////////////////////////////////////////////////

最初のスクリプトが理解できれば，これも簡単に理解できるはずです。

// 現在の時刻オブジェクト nowDate を作成
var nowDate = new Date();

これで，今現在の時刻オブジェクトを作成しておいて，
「年」，「月」，「日」を取得し，

// 目標時刻（日）の時刻オブジェクト goalDate を作成
var goalDate = new Date(myYear, myMonth, myDate+1);

に入れているわけです。
手動で，
var goalDate = new Date(2006, 11, 21);
と書くところを，ActionScript にさせているだけで後は変わりません。

> テキストではなく、画像で表示したいと考えています。

これはたくさんの方法がありすぎます。
それに，普通の時計を習われたとき，すでに作成されたのではないでしょうか？
その普通の時計の方法で作るのがBESTだと思います。

１つの方法のヒントとしては，
私だったら，
各フレームごとに 0～10 が描いてある，10フレームあるムービークリップを１つ作成して，
コピペで増やして，

　ムービークリップ.gotoAndStop(フレーム数)

で動かすと思います。
フレーム数 の部分が難しいかもしれませんが，
Number() 関数や，substr() を使うと上とほぼ同様な感じで，if文なしでできますよ。
上の場合，「時」，「分」，「秒」の３つのテキストフィールドを用意しますが，ムービークリップは倍の数必要になります。
また，ActionScript の行も その表示させる部分のみ，２倍の行に増えますから，
上のスクリプトで行くと，全体で３行増えるだけだと思います。

> 使っているのはFlash8です。

Flash8 では ActionScript2.0 が使えますが，
上の例は，バキバキの ActionScript1.0 です。
Flash MX 以上だと，どれでも使用可能です。

結局，最後はヒントしか書いていませんが，あとは考えてみてください。
「課題を完成させること」 より
「課題を完成させるために調べたり考えたりすること」 が大切です。

お礼

BlurFiltanさま
ご丁寧にどうもありがとうございます。ご指摘の通りでお恥ずかしい限りです…期限まではまだ時間がありますので、教えて頂いたことを参考にして、じっくり考えてみます。
目標時間を明日の0時00分に設定する、というのは考えてもみませんでした。参考になるヒントをどうもありがとうございました。何とか自分の力で完成させたいと思います。

ここで質問を締め切らせて頂きます。目を通してくださった方々も、どうもありがとうございました。