wtpmj.com » Flashでカウントダウン～XXまであと・・

Flashでカウントダウン～XXまであと・・

2010 年 6 月 3 日コメントをどうぞコメント

このカウントダウンのFlashについて簡単に説明します。
~~まず写真をIllustratorで取り込み、ライブトレースして、それをFlashの背景として使いました。ベクター画像ですから拡大してもぼやけません。~~←簡素化しました。
カウントダウンは、FlashのActionScriptで現在時間を取得し、ターゲットまでの時間との差を表示しています。
色んなサイトを参考にしてコピペしながら書きました。

以下がそのActionScriptです。1フレーム目の一番下のレイヤーに入れるといいでしょう。

//勝手に先に進ませないため、右クリックメニューを制限する
//ただしPCの時間を進められたら先に進みます
Stage.showMenu = false;

//まず1つ目のフレームでストップさせる
this.stop();

this.onEnterFrame = function(){
//現在のローカル時間を取得(PCの時間に依存)
var today:Date = new Date();

//現在の年を取得
var currentYear = today.getFullYear();

//1970年1月1日0時から現在の現在時刻までのミリ秒を取得
var currentTime = today.getTime();

//現在の日付を取得
var tdays = today.getDate();

//ターゲットの年月日＋時間までのローカル時間取得
//※月は0から始まるので3月は2とする。例のターゲットは「2012/3/31 17:30」
var targetDate:Date = new Date(2012,2,31,17,30,0,0);

//1970年1月1日0時からターゲットのミリ秒を取得
var targetTime = targetDate.getTime();

//ターゲットのミリ秒から現在のミリ秒を引いた値が残りミリ秒
var timeLeft = targetTime - currentTime;

//残り時間のそれぞれm秒・秒・分・時・日を割り出す
var msec = Math.floor(timeLeft/10);
var sec = Math.floor(msec/100);
var min = Math.floor(sec/60);
var hrs = Math.floor(min/60);
var days = Math.floor(hrs/24);

//m秒が1桁なら2桁に変換
msec = string(msec % 100);
if(msec.length &lt; 2){
msec = &quot;0&quot; + msec;
}

//秒が1桁なら2桁に変換
sec = string(sec % 60);
if(sec.length &lt; 2){
sec = &quot;0&quot; + sec;
}

//分が1桁なら2桁に変換
min = string(min % 60);
if(min.length &lt; 2){
min = &quot;0&quot; + min;
}

//時が1桁なら2桁に変換
hrs = string(hrs % 24);
if(hrs.length &lt; 2){
hrs = &quot;0&quot; + hrs;
}

//日が1桁なら2桁に変換
days = string(days);
if(days.length &lt; 2){
days = &quot;0&quot; + days;
}

//全ての値が0になったら、カウントダウン終了で、2つ目のフレームへ移動しストップさせる(2フレーム目をカウント終了後の画面にする)
if(days &lt;= &quot;0&quot; &amp;&amp; hrs &lt;= &quot;00&quot; &amp;&amp; min &lt;= &quot;00&quot; &amp;&amp; sec &lt;= &quot;00&quot; &amp;&amp; msec &lt;= &quot;00&quot;){
gotoAndStop(2);
}

var counter_days:String = days;
var counter_hrs:String = hrs;
var counter_mins:String = min;
var counter_secs:String = sec;
//秒とm秒の間にドットを挿入
var counter_msecs:String = &quot;.&quot; + msec;

//ダイナミックテキストのインスタンス名にそれぞれを表示フィールドに配置する 「time_days」など
//テキストサイズは適当に調整すること フォントは「_ゴシック」などがベター
_root.time_days.text = counter_days;
_root.time_hrs.text = counter_hrs;
_root.time_mins.text = counter_mins;
_root.time_secs.text = counter_secs;
_root.time_msecs.text = counter_msecs;
}

//勝手に先に進ませないため、右クリックメニューを制限する

//ただしPCの時間を進められたら先に進みます

Stage.showMenu = false;

//まず1つ目のフレームでストップさせる

this.stop();

this.onEnterFrame = function(){

//現在のローカル時間を取得(PCの時間に依存)

var today:Date = new Date();

//現在の年を取得

var currentYear = today.getFullYear();

//1970年1月1日0時から現在の現在時刻までのミリ秒を取得

var currentTime = today.getTime();

//現在の日付を取得

var tdays = today.getDate();

//ターゲットの年月日＋時間までのローカル時間取得

//※月は0から始まるので3月は2とする。例のターゲットは「2012/3/31 17:30」

var targetDate:Date = new Date(2012,2,31,17,30,0,0);

//1970年1月1日0時からターゲットのミリ秒を取得

var targetTime = targetDate.getTime();

//ターゲットのミリ秒から現在のミリ秒を引いた値が残りミリ秒

var timeLeft = targetTime - currentTime;

//残り時間のそれぞれm秒・秒・分・時・日を割り出す

var msec = Math.floor(timeLeft/10);

var sec = Math.floor(msec/100);

var min = Math.floor(sec/60);

var hrs = Math.floor(min/60);

var days = Math.floor(hrs/24);

//m秒が1桁なら2桁に変換

msec = string(msec % 100);

if(msec.length < 2){

msec = "0" + msec;

}

//秒が1桁なら2桁に変換

sec = string(sec % 60);

if(sec.length < 2){

sec = "0" + sec;

}

//分が1桁なら2桁に変換

min = string(min % 60);

if(min.length < 2){

min = "0" + min;

}

//時が1桁なら2桁に変換

hrs = string(hrs % 24);

if(hrs.length < 2){

hrs = "0" + hrs;

}

//日が1桁なら2桁に変換

days = string(days);

if(days.length < 2){

days = "0" + days;

}

//全ての値が0になったら、カウントダウン終了で、2つ目のフレームへ移動しストップさせる(2フレーム目をカウント終了後の画面にする)

if(days <= "0" && hrs <= "00" && min <= "00" && sec <= "00" && msec <= "00"){

gotoAndStop(2);

}

var counter_days:String = days;

var counter_hrs:String = hrs;

var counter_mins:String = min;

var counter_secs:String = sec;

//秒とm秒の間にドットを挿入

var counter_msecs:String = "." + msec;

//ダイナミックテキストのインスタンス名にそれぞれを表示フィールドに配置する「time_days」など

//テキストサイズは適当に調整することフォントは「_ゴシック」などがベター

_root.time_days.text = counter_days;

_root.time_hrs.text = counter_hrs;

_root.time_mins.text = counter_mins;

_root.time_secs.text = counter_secs;

_root.time_msecs.text = counter_msecs;

}

あとは、表示フィールドにダイナミックテキストを配置し、それぞれのインスタンス名を「time_days」「time_hrs」「time_mins」「time_secs」「time_msecs」とします。前に「XXまであと・・」、それぞれの後ろに「日」「時間」「分」「秒」と文字を入れます。
これで表示されるかと。
そして、2フレーム目にカウントダウンが終わった後の画面を作ります。例えば、「5周年です。ありがとうございます！」みたいな。

分からない方のために、参考.flaファイルを置いておきます。

以上ご参考にされて下さい。

カテゴリー: ウェブサイト構築タグ: ActionScript, Flash

コメント (1) トラックバック (0) コメントをどうぞトラックバックURL

今坂優太郎

2013 年 1 月 25 日 11:04 | #1

返信 | 引用

凄いわかり易かったです！
参考flaまで用意していただいてありがとうございます。

トラックバックはまだありません。

海外で日本の書籍を、しかも安く読む方法 wtpmj.comスタートです!!

Flashでカウントダウン～XXまであと・・

カテゴリー

アーカイブ

ベストセラーなう！

最近のコメント

ブログロール

メタ情報

Flashでカウントダウン～XXまであと・・

カテゴリー

アーカイブ

ベストセラーなう！

最近のコメント

タグクラウド

ブログロール

メタ情報