Flashでカウントダウン~XXまであと・・
このカウントダウンのFlashについて簡単に説明します。
まず写真をIllustratorで取り込み、ライブトレースして、それをFlashの背景として使いました。ベクター画像ですから拡大してもぼやけません。←簡素化しました。
カウントダウンは、FlashのActionScriptで現在時間を取得し、ターゲットまでの時間との差を表示しています。
色んなサイトを参考にしてコピペしながら書きました。
以下がそのActionScriptです。1フレーム目の一番下のレイヤーに入れるといいでしょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
//勝手に先に進ませないため、右クリックメニューを制限する //ただし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ファイルを置いておきます。
以上ご参考にされて下さい。
スポンサーリンク
スポンサーリンク
凄いわかり易かったです!
参考flaまで用意していただいてありがとうございます。