経過日数のカウントアップ

質問

はじめて利用します。りょうといいます。

例えば会社の設立から現在にいたるまでの経過時間を
リアルタイムで表示するというものを、FLASHムービー内の最後に設置するというFLASHを作りたいのですが。

「日」「時」「分」を表示させます。
日付カウントダウン等のサンプルや解説は要所で見かける
のでが、カウントを加算していくものに関してはなかなか
サンプル等を発見できず、苦戦しておりました。

設立からのカウントアップですので、getdate等でできる
ものでもなく、どうしたらよいか迷っていました。

申し訳ありませんが、ご教授ねがいます。

回答No.3

noname#35109

＃１＆２です。
＃２の補足に書かれているスクリプトは，
カウントダウンのものです。

＃１でも書きましたとおり，
カウントアップの場合は，
期日を過ぎると勝手にカウントダウンするという可能性がないので，
カウントダウンより簡単です。

ですから if分岐 がまず不要ですね。
ついでに「〆切経過時間 ： 」こんなのも不要ですね。

したがって↓こうなります。

///////////////////////////////////////////////////////////////
function simekiri(mYear, mMonth, mDate, mHour, mMin, mSec) {
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = nowDate.getMonth()+1;
var datee = nowDate.getDate();
var hour = nowDate.getHours();
var minutes = nowDate.getMinutes();
var second = nowDate.getSeconds();
var ima = Date.UTC(year, month, datee, hour, minutes, second);
var kijitu = Date.UTC(mYear, mMonth, mDate, mHour, mMin, mSec);
var remainTime = (kijitu-ima)/1000;
// カウントアップを表示
remainTime *= -1;
var answer = Math.floor(remainTime/60/60/24)+"日 ";
answer += Math.floor(remainTime/60/60%24)+"時間 ";
answer += Math.floor(remainTime/60%60)+"分 ";
answer += Math.floor(remainTime%60)+"秒 ";
return answer;
}

this.onEnterFrame = function() {
txt = simekiri(2005, 1, 8, 3, 33, 0);
};
///////////////////////////////////////////////////////////////

こうすると，
シンプルに何をすれば良いのかが見やすくなりませんか。
ステージ上に 「txt」 という変数名のダイナミックテキストフィールドを置いて，
上のスクリプトをフレームに書くと無事動作しますね。

> ダイナミックテキストだと、時間が繰り上がるごとに
> 0～9の数字の字間がズレてしまい、見た目的（デザイン）に
> ちょっとよろしくないようです。
> また、09（時）05（分）のような二桁表示が
> できないのもちょっと問題にです。

それは，＃２の参考URLのリンク先に対処法が書いてあるでしょう。

　---引用---
> //取得した値の文字列の必要部分をsubstringで抜き出し、
> それぞれのインスタンス名がついたムービークリップが
> それを参照します。
>
> if (hour<10) {
> 　hour01.count = "0";
> 　hour02.count = substring(hour, 1, 1);
> 　} else {
> }
> if (minute<10) {
> 　minutes01.count = "0";
> 　minutes02.count = substring(minute, 1, 1);
> } else {
　　　…　以下省略　…

10未満だったら 0 を前につけて，
10以上だったらそのまま表示。

そういうことですよ。

上の通りにしてもかまいません。
しかしダラダラ長い if文 が私は嫌いなので，
もっと手早く，
10未満であろうと10以下であろうと，
強制的に 0 を前に付けて，下２桁を表示するという方法を取ります。

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

したがって，
補足に書かれている，

> また、09（時）05（分）のような二桁表示が
> できないのもちょっと問題にです。

に対する対処法入りスクリプトにするとこうなります↓。

///////////////////////////////////////////////////////////////////
function simekiri(mYear, mMonth, mDate, mHour, mMin, mSec) {
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = nowDate.getMonth()+1;
var datee = nowDate.getDate();
var hour = nowDate.getHours();
var minutes = nowDate.getMinutes();
var second = nowDate.getSeconds();
var ima = Date.UTC(year, month, datee, hour, minutes, second);
var kijitu = Date.UTC(mYear, mMonth, mDate, mHour, mMin, mSec);
var remainTime = (kijitu-ima)/1000;
// カウントアップを表示
remainTime *= -1;
var answer = Math.floor(remainTime/60/60/24)+"日 ";
answer += ("0"+Math.floor(remainTime/60/60%24)).substr(-2, 2)+"時間 ";
answer += ("0"+Math.floor(remainTime/60%60)).substr(-2, 2)+"分 ";
answer += ("0"+Math.floor(remainTime%60)).substr(-2, 2)+"秒 ";
return answer;
}

this.onEnterFrame = function() {
txt = simekiri(2005, 1, 8, 3, 33, 0);
};
///////////////////////////////////////////////////////////////////

これで，
ダイナミックテキストフィールドのフォントの種類を，
「MS-P明朝」 とかそういうプロポーショナルフォントではなく，
「_等幅」 という前にアンダースコア（ _ ）の付いたデバイスフォントにすると，
0～9の数字の字間がズレてしま"わず"、見た目的（デザイン）にちょっとよろしく "ある" 状態になりますね。

ダイナミックテキストで埋め込みフォントを使用しない場合は，
フォントの種類を限定しても無駄です。
見る環境にそのフォントがなければ，HTML と同じく，そのPCのデフォルトのフォントが表示されてしまいます。
したがって，フォントを埋め込まないダイナミックテキストを使用する場合は，
前にアンダースコアの付いた「デバイスフォント」を使用する方が良いです。

しかし，0～9までの数字くらいでしたら，
埋め込んでも大した容量にはなりません。

したがって，
Flash MX などの場合，
ダイナミックテキストのプロパティで好きなフォントを選んで，
「文字」ボタン（テキストオプションの編集）をクリックして，
「数字0～9」にチェックを入れて「OK」してフォントを埋め込んでも良いと思います。

Flash 8 の場合は，
ダイナミックテキストのプロパティで好きなフォントを選んで，
フォントのレンダリング方法を「アンチエイリアス（アニメーション優先）」を選ぶと，
「埋め込みをする必要があります。」
のようなダイアログがでてくるので，
「数字..0～9」（11文字） を選んでフォントを埋め込んでも良いと思います。

話が Flash からはずれますが，
選ぶフォントは P などが付かないフォント，
つまりプロポーショナルフォントでないフォントを選べば型くずれしません。

ただし，上のままだと「日」「時間」「分」「秒」は埋め込まれないため，
表示上その文字は飛んでしまいますけどね。

> こちらのスクリプトのどの辺にどうNo.2のものを組み合わせれば
> うまく機能するのでしょうか？

ここまでの説明でできませんか？
変数 txt に代入される値は，１つの連続した値になっています。

　var answer = Math.floor(remainTime/60/60/24)+"日 ";
　answer += ("0"+Math.floor(remainTime/60/60%24)).substr(-2, 2)+"時間 ";
　answer += ("0"+Math.floor(remainTime/60%60)).substr(-2, 2)+"分 ";
　answer += ("0"+Math.floor(remainTime%60)).substr(-2, 2)+"秒 ";

これをバラバラにして，
それぞれのムービークリップの変数 count に入れてやれば，
画像表示ができますよね。

あと，「日」はどうしようとされているのかわかりません。
どうしたいのかわかりませんが，
「日」も４桁くらいに合わせるのが良いのではないでしょうか？

まぁ，「日」に関しては考えてもらうとして，
＃２で書いた URL のように，
0～9 の画像が入った 10フレーム の ムービークリップ を１つ用意して，
それをコピペで６つにして横１列に配置し，
左から順に

「date01」，「date02」，「minutes01」，「minutes02」，「seconds01」，「seconds02」

というインスタンス名を付けます。
そして，スクリプトを次のようにするとほぼ完成です。

//////////////////////////////////////////////////////////////////////////////
function simekiri(mYear, mMonth, mDate, mHour, mMin, mSec) {
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = nowDate.getMonth()+1;
var datee = nowDate.getDate();
var hour = nowDate.getHours();
var minutes = nowDate.getMinutes();
var second = nowDate.getSeconds();
var ima = Date.UTC(year, month, datee, hour, minutes, second);
var kijitu = Date.UTC(mYear, mMonth, mDate, mHour, mMin, mSec);
var remainTime = (kijitu-ima)/1000;
// カウントアップを表示
remainTime *= -1;
var answer = Math.floor(remainTime/60/60/24)+"日 ";
answer += ("0"+Math.floor(remainTime/60/60%24)).substr(-2, 2)+"時間 ";
answer += ("0"+Math.floor(remainTime/60%60)).substr(-2, 2)+"分 ";
answer += ("0"+Math.floor(remainTime%60)).substr(-2, 2)+"秒 ";
date01.gotoAndStop(Number(("0"+Math.floor(remainTime/60/60%24)).substr(-2, 1))+1);
date02.gotoAndStop(Number(("0"+Math.floor(remainTime/60/60%24)).substr(-1, 1))+1);
minutes01.gotoAndStop(Number(("0"+Math.floor(remainTime/60%60)).substr(-2, 1))+1);
minutes02.gotoAndStop(Number(("0"+Math.floor(remainTime/60%60)).substr(-1, 1))+1);
seconds01.gotoAndStop(Number(("0"+Math.floor(remainTime%60)).substr(-2, 1))+1);
seconds02.gotoAndStop(Number(("0"+Math.floor(remainTime%60)).substr(-1, 1))+1);
return answer;
}

this.onEnterFrame = function() {
txt = simekiri(2005, 1, 8, 3, 33, 0);
};
//////////////////////////////////////////////////////////////////////////////

全てフレームで gotoAndStop を指示しましたから，
0～9 の画像が入った 10フレーム の ムービークリップ の中の，
ダラダラと無駄に長く，そして同じことを全てのフレームに書いてあるスクリプトは全て不要です。

つまり，＃２のURLに書いてある

> すべてのキーフレームにアクションスクリプトを記述します。
> stop();
>
> switch (count) {
> case "0" :
> gotoAndPlay(1);
> break;
> case "1" :
> gotoAndPlay(2);
> break;
> case "2" :
　… 長いので省略 …

この switch 文は全て不要です。
レイヤーごと削除してください。
また，_root（メインムービー）のフレームも１フレームのみでかまいません。
２フレーム以上にしてもかまいませんが，２フレーム以上にする必要は特にありません。

同様に「日」もどうすべきか考えてください。
「日」ができましたら，
「txt」という変数名のテキストフィールドは不要ですから削除してください。
また，

　var answer = Math.floor(remainTime/60/60/24)+"日 ";
　answer += ("0"+Math.floor(remainTime/60/60%24)).substr(-2, 2)+"時間 ";
　answer += ("0"+Math.floor(remainTime/60%60)).substr(-2, 2)+"分 ";
　answer += ("0"+Math.floor(remainTime%60)).substr(-2, 2)+"秒 ";

の部分も不要ですね。
これも削除してください。

お礼

お返事遅れまして、申し訳ありません。
本当に助かりました、無事納期に間に合う事ができました。

ろくにFLASHを勉強したわけでもないのに、
FLASHの仕事をやるはめになってしまい、正直泣きそうな状況でした（笑）

住所がわかっていれば菓子詰め等をお送りしたいところですが、
ネット上のやりとりでは現実干渉すべきではないと思い、
割愛させていただきます。

本当に助かりました、ありがとうございました。

回答No.2

noname#35109

＃１です。

補足に書かれていることは，
本来のご質問とまったく違う話になりますが。

画像系のご質問は，テキストだけでは説明しにくいです。
こちらを参考にしてみたください↓。

「ウィジェットの作り方 vol.02 デジタル時計を作ってみよう」
http://web.kabegami.com/kabegami/dt/widget_flash_making02.html

↑Flashでできるような簡単な画像を，
なぜ Photoshop等の画像作成ツール で作成するのか意味がわかりませんが，
画像の作成方法は除いて上記のような感じでできます。

補足

ご返答ありがとうございます。
参考にさせていただきました、しかし、
ダイナミックテキストだと、時間が繰り上がるごとに
0～9の数字の字間がズレてしまい、見た目的（デザイン）に
ちょっとよろしくないようです。
また、09（時）05（分）のような二桁表示が
できないのもちょっと問題にです。

No.1で教えていただいたアクションに、No.2で教えていた
だいたアクションを組込もうと思ったのですが、
どうしてもうまくいきません。（殆ど初心者なもので…）

function simekiri(mYear, mMonth, mDate, mHour, mMin, mSec) {
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = nowDate.getMonth()+1;
var datee = nowDate.getDate();
var hour = nowDate.getHours();
var minutes = nowDate.getMinutes();
var second = nowDate.getSeconds();
var ima = Date.UTC(year, month, datee, hour, minutes, second);
var kijitu = Date.UTC(mYear, mMonth, mDate, mHour, mMin, mSec);
var remainTime = (kijitu-ima)/1000; //秒
if (remainTime<=0) {
//時間が来たときの処理。実際にはムービー再生させるなど
remainTime *= -1;
var answer = "〆切経過時間 ： ";
answer += Math.floor(remainTime/60/60/24)+"日 ";
answer += Math.floor(remainTime/60/60%24)+"時間 ";
answer += Math.floor(remainTime/60%60)+"分 ";
answer += Math.floor(remainTime%60)+"秒 ";
return answer;
} else {
var answer = "〆切まであと、";
answer += Math.floor(remainTime/60/60/24)+"日 ";
answer += Math.floor(remainTime/60/60%24)+"時間 ";
answer += Math.floor(remainTime/60%60)+"分 ";
answer += Math.floor(remainTime%60)+"秒 ";
return answer;
}
}

this.onEnterFrame = function() {
txt = simekiri(2005, 1, 8, 3, 33, 0);
};

こちらのスクリプトのどの辺にどうNo.2のものを組み合わせれば
うまく機能するのでしょうか？
どうかご教授ねがいます。

回答No.1

noname#35109

カウントダウンもカウントアップも同じですよ。

というかですね，
カウントダウンするものは指定日などを越えた場合，
普通はカウントアップしてしまわないように何か工夫する必要があるのです。
一方，
カウントアップするものが指定日を越えることはないので，その点簡単です。

Flash既出Q＆A、Tips：AS Tips
「あと何日を表示する」
http://www.geocities.jp/myflashsouko/flash/index5.html#date-at

↑ここの
「・秒単位までカウントダウンする例」 は，

>> この例では、時間が過ぎたら、経過時間を表示している。

ということなのでそのまま使えますよ。

新規ドキュメントを作成して，
「txt」という変数名（インスタンス名ではありません）の，
横長なダイナミックテキストフィールドを作成し，
書かれているスクリプトをフレームに書くと，そのまま使えます。

ただし，
simekiri(2005, 1, 8, 3, 33, 0);
つまり，
2005年2月8日3時33分 からのカウントアップになっているため，
ここの数を調節したり，
他の表示されるものも調節する必要がありますが。

補足

ありがとうございます、参考にさせていただきます。
参考ページのサンプルを、流用して製作してみようと思ったのですが、
経過時間をテキストではなく、0～9までのグラフィックシンボル（画像）
で表示させたいのですがどういった設定をすればよろしいのでしょうか？