FLASH上で日数カウントダウン

質問

以前、FLASH上で日数カウントダウンの質問がありましたが、
http://okweb.jp/kotaeru.php3?q=863385
これは、日付まででした。
どなたか、時間（秒まで）まで表示させる方法（カウントダウンなので、秒の所が、リアルタイムで減っていく様に）をご存知でしたらお教え願います。
よろしくお願いいたします。

回答No.3

DPE · ベストアンサー

○日というような日本語での表示しか頭になかったので、10 の位の０を非表示にするスクリプトをご紹介したのですが。
デジタル形式なら、０であろうと２桁で揃えて表示された方が、確かに見栄えはいいですよね。失礼いたしました。

＃２でも書きました通り、_visible というプロパティを操作すると、ムービークリップの表示・非表示を切り替えることができます。
_visible を false にしても、見えないだけでムービークリップはステージに存在はしていますので、_visible を true に戻すと、再び表示されるようになります。

＃２のスクリプトでは、

　//10の位が０の時は表示しない
　if( temp == 0 )
　{
　　dd._visible = false;
　}
　else
　{
　　dd._visible = true;
　　dd.gotoAndStop( temp + 1 );
　}

この箇所で _visible を操作しています。
_visible は、最初は true になっています。10 の位が０でも表示するのであれば、if 文で temp の値が０かどうかを判断したり、_visible を書き換えたりせずに、単に

　dd.gotoAndStop( temp + 1 );

だけで済みます。

表示部分のスクリプトをまとめますと、

　//画像で数字を表示できるようにする
　with( _root.display_clip )
　{
　　/*日数を２桁で表示*/

　　//10の位の算出と表示
　　temp = Math.floor( _root.event_date / 10 );
　　dd.gotoAndStop( temp + 1 );

　　//１の位の算出と表示
　　d.gotoAndStop( ( _root.event_date % 10 ) + 1 );
　}

となります。
時間や分・秒を表示するスクリプトも、同じ要領で変更してください。

お礼

長い間、お付き合いして頂きありがとうございました。無事、自分がしたい事が達成できました。本当にDPEさんは、親切な方でなんとお礼を言ったらいいのか・・・。本当にありがとうございました。DPEさんは、凄く親切な方でした。

回答No.2

DPE

まず、イベント当日もしくは過ぎているかどうかの判断ですが。
＃１にも書きました通り、eventUTC と todayUTC の差を見て、０の時はイベント当日、マイナスであれば既に過ぎていると判断できます。この条件の時に、フレームを移動して違う画面を表示したり、あるいは、今までカウントを表示していた部分に「終了しました」などのお知らせを表示しておく、といった処理になると思います。
日数の計算は、date_cnt というムービークリップが存在している限り、常に実行されます。
date_cnt は removeMovieClip というアクションで削除することができます。日数の計算が不要になったら、ムービークリップごと削除してください。

ムービーの内容や作り方にもよりますけれど、簡単なところで、ムービークリップを使った表示の切り替え方法をご紹介します。

日数の表示部分を、ムービークリップで作ります。
「挿入」→「新規シンボル」で、新しいムービークリップシンボルを作ります。
このシンボルのフレーム１に日数の表示を、フレーム２に「このイベントは終了しました」といった、終了後に表示したいメッセージ画面などを作ります。

シンボルができたら、ステージにこれのインスタンスを配置し、インスタンス名を付けます。ここでは仮に、display_clip という名前だとします。
（インスタンス名は、Flash MX 以降をお使いであれば、「プロパティ」パネルの左上の部分に名前を入力するところがあります）
ステージに配置したこのムービークリップを選択して、次のようなスクリプトを書きます。
（コピーする場合は、各行頭の全角のスペースを、全て半角のスペースかタブに置き換えてください）

　//最初はフレーム１を表示しておく
　onClipEvent(load)
　{
　　this.stop();
　}

複数のフレームからできているムービークリップは、何も指示しなければ、ステージにある間、常に先のフレームが再生されていってしまいます。
load というイベントは、ムービークリップがステージに登場した、その時１回だけ発生します。この点を利用して、最初の１回だけ、このムービークリップをフレーム１で止めておくようにします。

次に、当日または日にちが過ぎている場合の処理を入れます。
＃１でご紹介したスクリプトの、1970 年 1 月 1 日から今日までの時間を出している箇所の次に、以下のようなスクリプトを追加してください。

　//イベント当日または終了のチェック
　if( ( eventUTC - todayUTC ) <= 0 )
　{
　　//「終了のお知らせ」を表示し、日数カウント用のムービークリップを削除する
　　_root.display_clip.gotoAndStop( 2 );
　　removeMovieClip( _root.date_cnt );
　}

普段は日数を表示しますが、イベントの当日・過ぎている場合は終了のメッセージに変わります。
ご紹介した方法ではメッセージが変わるだけですが、例えば、上記の _root.display_clip.gotoAndStop( 2 ); の代わりにメインのフレームを移動して、別のコンテンツを表示するといったこともできます。
要するに、イベント当日・過ぎた後に何をするか、どんな表示をするかの問題だと思います。

-------------------

画像でのカウントの表示も可能です。
まず、数字のムービークリップを作ります。
数字の画像を０～９まで用意して、フレーム１から１フレームに１つずつ、０から順に数字の画像を配置します。
このムービークリップでは、例えば「１」を表示したい時は、フレーム２を表示してタイムラインを止めておけばいいことになります。
つまり、gotoAndStop( 表示する数字 + 1 ); で、任意の数字を表示できます。

先述の display_clip のフレーム１で、日数の表示を行っています。
このフレーム１を、ダイナミックテキストに代わって、作った数字のムービークリップを使って表示部分を作ります。
数字のムービークリップは１桁分しか表示できませんので、表示する桁の数だけ配置しておく必要があります。
３桁以上になるのは日数だけですが、大抵は２桁くらいで充分だと思います。ここではとりあえず２桁として考えますが、100 日以上先のイベントであれば、３桁必要です。

先の display_clip と同様に、配置した数字のムービークリップに、それぞれ名前を付けます。
ここでは仮に、日数の 10 の位を表示するインスタンスを dd 、１の位を d とし、以下同様に、時間を hh ・ h 、分を mm ・ m 、秒を ss ・ s という名前にします。
数字のムービークリップは、カウントの表示用ムービークリップ display_clip の子にあたります。
一方、日数を計算する date_cnt と、計算した結果が入っている変数は _root 階層にあります。
数字と date_cnt は違う階層にありますから、date_cnt で実行されている処理の中から数字のムービークリップを操作するには、数字のムービークリップまでのターゲットパス（階層の指定）が必要です。

＃１のスクリプトでは、イベントまでの日数・時間・分・秒を、それぞれ変数に入れています。この変数を元にして、各数字のムービークリップのフレームを操作します。
最終的な日数・時間に直した数値は、全て 10 進法２桁の数値で入っています。
10 進法の特徴を考えますと、10 の位とは 10 で割った時の商、１の位は 10 で割った時の余りといえます。
10 の位は整数で答えがほしいので、＃１でも出てきました、Math.floor で割り算の答えの小数点以下を切り捨てます。割り算の余りを求める時は、剰余を求める演算子 % を使います。

＃１で、イベントまでの時間を換算する計算の後に、次のようなスクリプトを追加してください。
紙面の都合上、日数の表示処理スクリプトのみのご紹介とさせていただきました。
時間・分・秒も、変数やインスタンス名が違うだけで、全く同じ考え方で表示できます。 dd と d の部分を hh や h 、_root.event_date の部分を _root.event_hour などに変更して追加ください。

　//画像で数字を表示できるようにする
　with( _root.display_clip )
　{
　　/*日数を２桁で表示*/

　　//10の位を算出
　　temp = Math.floor( _root.event_date / 10 );
　　//10の位が０の時は表示しない
　　if( temp == 0 )
　　{
　　　dd._visible = false;
　　}
　　else
　　{
　　　dd._visible = true;
　　　dd.gotoAndStop( temp + 1 );
　　}
　　//１の位の算出と表示
　　d.gotoAndStop( ( _root.event_date % 10 ) + 1 );
　}

例えば１日前だった場合、01 日では不自然だと思います。
_visible というプロパティはムービークリップの表示・非表示を決めるもので、true で表示、false で非表示になります。
同じインスタンスが持っている変数やインスタンスを多数操作したい時、いちいちターゲットパスを付けて指定するのは大変です。 with アクションは、この手間を省くものです。

今回は、１の位は０であっても表示されてしまいます。
「０日」などの表示が気になる場合は、上記の計算をする前に、event_date が０だった場合は dd ・ d を表示しない（ _visible を両方とも false にする）といった判断をいれるといいでしょう。

ここでご紹介した方法はほんの一例です。
ご希望に合わせて、いろいろと改造してみてください。
度々長くなりましてすみませんでした。

お礼

お早いご回答ありがとうございます。本当、助かります。平日は、仕事がありますので休日トライしてみたいと思います。無事出来ましたらまたご報告いたします。ありがとうございました。

補足

ありがとうございました。なんとか出来ました。もし、よければ0が表示される仕方も教えて頂けませんでしょうか。今回のは、0表示の部分が消えて左に詰める仕様（例えは、1：8：4）になっていますが、見ていると違和感があるので、00：00：00になるまでは、そのまま0を表示する方法（例えば、01：08：04）をお教えねがいませんでしょうか。いろいろ試しましたが、うまくいきませんでした。これで最後にしたいと思いますので宜しくお願い致します。

回答No.1

DPE

その質問の＃２で回答した者です。
指定の日（イベント開催日、と仮定します）までの時間をミリ秒で取得し、これを目的の単位に直す、という考え方はそのまま使えます。
今回は表示をリアルタイムに更新したいとのことですから、同じ処理をムービークリップの enterFrame イベントを利用して、定期的に実行させてはいかがでしょう。

ここでは仮に、date_cnt という名前の空のムービークリップを作り、このムービークリップの enterFrame イベントを借りることにします。
ムービーの他の部分に支障がなければ、_root.onEnterFrame = function ・・・として、_root の enterFrame イベントを利用することもできます。
とりあえず、イベントの開催日を 2005 年４月１日午後５時 30 分０秒としますと、スクリプトは大体、次のようになります。このスクリプトはメインのタイムラインの、フレームに設定してください。
（↓各行頭に全角のスペースが入っています。コピーして利用する際はご注意ください）

　//ダミーのムービークリップを作る
　_root.createEmptyMovieClip( "date_cnt" , 0 );

　//イベントまでの日数を秒単位で計算
　date_cnt.onEnterFrame = function()
　{
　　//Date オブジェクトを生成
　　date_obj = new Date();

　　//現在の日付および時刻を取得
　　yy = date_obj.getFullYear();
　　mm = date_obj.getMonth();
　　dd = date_obj.getDate();
　　hour = date_obj.getHours();
　　min = date_obj.getMinutes();
　　sec = date_obj.getSeconds();

　　//1970年1月1日からイベントまでの時間をミリ秒で取得
　　eventUTC = Date.UTC( 2005 , 4 - 1 , 1 , 17 , 30 , 0 );

　　//1970年1月1日から今日までの時間をミリ秒で取得
　　todayUTC = Date.UTC( yy , mm , dd , hour , min , sec );

　　//イベントまでの時間を秒単位に直す
　　remain = eventUTC - todayUTC;
　　_root.event_date = Math.floor( remain / 86400 / 1000 );
　　remain -= _root.event_date * 86400 * 1000;
　　_root.event_hour = Math.floor( remain / 3600 / 1000 );
　　remain -= _root.event_hour * 3600 * 1000;
　　_root.event_min = Math.floor( remain / 60 / 1000 );
　　_root.event_sec = Math.floor(( remain - _root.event_min * 60 * 1000 ) / 1000 );
　};

計算がややこしいですけれど、何をしているかといいますと。
イベントまでの時間はミリ秒で返ってきます。この中から、まず、１日＝ 24 時間＝ 60 x 60 x 24 x 1000 ミリ秒がいくつ取れるかを計算します。
イベントまでの時間は常に変化していますから、上記の計算では、整数で割り切れず小数点以下の商になる確率の方が高いです。そこで、Math.floor を使って、商の小数点以下を切り捨てます。
remain という変数には、最初はイベントまでの時間が入っています。この中から、先の計算で得られた日数を再びミリ秒に直して差し引き、変数の値を更新します。これで、remain には 24 時間に満たない端数の時間（単位はミリ秒）が残ります。
その残りから、次は１時間（ = 60 x 60 x 1000 ミリ秒）がどれだけあるかを計算し、同様に整数で商を求めます。
この答えをミリ秒に直して、更に remain から差し引くと、残るは分と秒になります。
この作業を繰り返して、最終的にイベントまであと○日○時間○分○秒、という形で表示できるようにしています。

上記のスクリプトでは、event_date ・ event_hour ・ event_min ・ event_sec という変数に、イベント開催日までの日数と時間が入ります。これらの変数は _root 階層に定義されます。
前回はムービークリップを利用する必要がありませんでしたので、変数のターゲットパスはあまり問題になりませんでした。
今回は表示をリアルタイムで更新するために、ムービークリップを利用しています。ダイナミックテキストで結果を表示する際は、計算の結果を保持する変数が定義されている階層にご注意ください。

秒単位での計算ですから、現在の時刻やイベント開催日時も、秒の単位まで取得・指定するようにしましょう。
時刻を省いた場合は０時０分０秒が基準となるため、カウントが正しくなくなってしまいます。

なお、イベント当日やイベントが終わった後ですと、イベントまでの時間が０やマイナスになるなど、表示が不自然になります。
上記のスクリプトでは省略していますが、当日あるいはイベントの日が既に過ぎているかどうかを判断する処理も必要になるかと思います。
変数 eventUTC と todayUTC の差分が０以下であれば、イベント当日またはイベント開催日が過ぎている、と判断することができます。

お礼

早速のご回答ありがとうございました。
まだ、初心者でございますので、出来るかどうかわかりませんが、教わった通り実行してみたいと思います。成功いたしましたら、ご報告申し上げます。
本当にありがとうございました。

補足

出来ました。ありがとうございます。まことに申し訳ございませんが、イベント当日と過ぎてからの処理はどのようにすれば、良いでしょうか。それから、数字の表示をテキストではなく、画像（０から９の画像）で表示することは、可能でしょうか。もしよければお教え願いませんでしょうか。宜しくお願い致します。