- ベストアンサー
カウントダウンバナーに毎日違う画像を表示させる方法
- カウントダウンバナーを作成する際に、開催日の5日前から毎日違う画像を表示させる方法を知りたいです。
- 既にカウントダウンと当日の画像表示はできているが、1日たつごとに違う画像を表示させるための設定方法を教えてください。
- 具体的な方法やサンプルページなど、参考になる情報を教えてください。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
まず， 開催日までの日数を算出します。 //////////////////////////////////////////////////// // 開催日(0時)のDeteオブジェクトを作成(例2008年8月12日) // ※月の数は １月=0，２月=1，３月=2，…，12月=11 kaisai = new Date(2008, 7, 12); // 今現在のDateオブジェクトの作成 ima = new Date(); // 開催日0時の絶対時（ミリ秒）を取得 kaisaiJi = kaisai.getTime(); // 今現在の絶対時（ミリ秒）を取得 imaJi = ima.getTime(); // 今現在から開催日までの日数を算出 nissuu = Math.ceil((kaisaiJi-imaJi)/(24*60*60*1000)); // [制御]→[ムービープレビュー]検証用 (不要) trace("あと "+nissuu+" 日"); //////////////////////////////////////////////////// Math.ceil は小数点以下切り上げです。 Math.ceil((kaisaiJi-imaJi)/(24*60*60*1000)); ↓意味↓ 切り上げ( (開催日までのミリ秒)÷(24×60×60×1000) ) ということです。 開催日まで 0.22369 日(つまり前日)でしたら 1 日ということになります。 開催日まで 4.59634 日でしたら 5 日ということになります。 これで変数 nissuu に今現在から開催日までの日数を取得できます。 今日が 2008年８月７日 だとすると 2008年８月12日 までは ５ 日なので， nissuu には 5 が代入されます。 この nissuu によって何かをすれば良いのです。 何をするのかは無数に方法があります。 大雑把に分けたとしても次のような方法が挙げられます。 ・タイムラインを動かす →gotoAndStop() ・ムービークリップのタイムラインを動かす →MovieClip.gotoAndStop()， ・画像入りムービークリップの表示・非表示を変える →MovieClip._visible プロパティ ・画像入りムービークリップの不透明度を変える →MovieClip._alpha プロパティ ・JPEGなどを外部からロードする →loadMovie() or MovieClip.loadMovie() ・同じくJPEGなどを外部からロードする →MovieClipLoader.loadClip() ・ライブラリからムービークリップを呼びだす →MovieClip.attachMovie() ・ライブラリからビットマップイメージを呼びだす →MovieClip.attachBitmap() ・全ての画像入りムービークリップをスライドさせる →MovieClip._x or MovieClip._y を変える ・HTMLレンダリングしたテキストフィールドに画像を表示 →TextFleld.htmlText = "<img>○○</img>"; ・ScrollPaneコンポーネントに画像を表示させる →ScrollPane クラス … などなど … このように大雑把に書いても，まだまだ方法はあります。 良い方法を選ぶか考えるかして，それに対応させるのが一番良いです。 仮に ・タイムラインを動かす →gotoAndStop() を選ぶとしたら， 例えば次のように書く方法も考えられます。 //////////////////////////////////////////////////// ～ 前述のため上は略 ～ // 今現在から開催日までの日数を算出 nissuu = Math.ceil((kaisaiJi-imaJi)/(24*60*60*1000)); // nissuu が 0 以上 で 5 以下の場合 if (nissuu>=0 && nissuu<=5) { // 55-nissuu フレームにジャンプ gotoAndStop(55-nissuu); } else { // それ以外はそのまま再生 play(); } //////////////////////////////////////////////////// 仮に今日が開催日である場合 nissuu は 0 ですから， 55-nissuu → 55-0 → 55 で， gotoAndStop(55); が実行されます。 仮に今日が開催日５日前である場合 nissuu は 5 ですから， 55-nissuu → 55-5 → 50 で， gotoAndStop(50); が実行されます。 仮に今日が開催日６日前である場合 nissuu は 6 ですから， 0 以上 で 5 以下ではないのでそのまま再生 play(); が実行されます。 しかし，この方法よりも ・画像入りムービークリップの表示・非表示を変える →MovieClip._visible プロパティ の方がお薦めかもしれません。 わざわざ _root のタイムラインごと ガサッ と移動させてしまうより， 表示させる画像を切り替える方が色々動きやすいと思います。 開催日用画像をムービークリップに変換して， 下のプロパティインスペクタより， 「gazou_mc0」 というインスタンス名を付けます。 開催日１日前用画像をムービークリップに変換して， 下のプロパティインスペクタより， 「gazou_mc1」 というインスタンス名を付けます。 開催日2日前用画像をムービークリップに変換して， 下のプロパティインスペクタより， 「gazou_mc2」 というインスタンス名を付けます。 … 略 … 開催日5日前用画像をムービークリップに変換して， 下のプロパティインスペクタより， 「gazou_mc5」 というインスタンス名を付けます。 そして， それら６枚の画像入りムービークリップがを置いたフレームに次のように書きます。 //////////////////////////////////////////////////// ～ 前述のため上は略 ～ // 今現在から開催日までの日数を算出 nissuu = Math.ceil((kaisaiJi-imaJi)/(24*60*60*1000)); // nissuu が 0 でない場合は if (nissuu != 0) { // gazou_mc0 を非表示 gazou_mc0._visible = false; } // nissuu が 1 でない場合は if (nissuu != 1) { // gazou_mc1 を非表示 gazou_mc1._visible = false; } // nissuu が 2 でない場合は if (nissuu != 2) { // gazou_mc2 を非表示 gazou_mc2._visible = false; } // nissuu が 3 でない場合は if (nissuu != 3) { // gazou_mc3 を非表示 gazou_mc3._visible = false; } // nissuu が 4 でない場合は if (nissuu != 4) { // gazou_mc4 を非表示 gazou_mc4._visible = false; } // nissuu が 5 でない場合は if (nissuu != 5) { // gazou_mc5 を非表示 gazou_mc5._visible = false; } //////////////////////////////////////////////////// このままでもかまいません↑。 書き方をもう少し変えるなら， 「for文」 と 「配列アクセス演算子（[]）」 を使って 次のように書くこともできます（同じことです）。 //////////////////////////////////////////////////// ～ 前述のため上は略 ～ // 今現在から開催日までの日数を算出 nissuu = Math.ceil((kaisaiJi-imaJi)/(24*60*60*1000)); // 変数 i を 0～5 で 1 ずつ加算してループ for (i=0; i<=5; i++) { // i が nissuu と等しくないときだけ if (i != nissuu) { // その gazou_mc を非表示にする this["gazou_mc"+i]._visible = false; } } //////////////////////////////////////////////////// > どなたか具体的な方法や、 > サンプルなどが記載されているページなど 普通はないでしょう。 こんなことを書いてたらキリがありません。 書いていたとしても１つか２つの方法しか示せません。 つまり， このようなものの説明を作成することが， 逆にサンプルやページ閲覧者の発想を乏しくさせる原因になる可能性があります。 （どうにでもなるものを，１つか２つの方法に縛りつけてしまう原因になるかもしれない。） （だからこの回答でも『方法は無数にある』を強調しておかなければなりません。） 逆に言うと， サンプルなどが記載されているページどこにでもあるでしょう。 「ある数」 を元に 「何かさせる（何らかの形で画像を表示させる）」 だけです。 何かをさせる方法など無数にあります。 画像を表示させたり動かしたりする説明ページがあれば， そのページの全てが 「サンプルなどが記載されているページ」 です。
お礼
早速詳しいご回答ありがとうございます。 私のような未熟な知識の者でも大変にわかりやすかったです。 質問の仕方についてもアドバイスいただきまして恐縮です。 以後注意いたします！ kaisai = new Date(2008, 7, *); ↑の*の部分を変更すれば、 各画像入りムービークリップを配置したフレームに飛ぶところまでできました！ ただ、表示されたムービークリップが点滅して表示されてしまうのです。 各ムービークリップにも stop(); を配置してみたのですが、関係なかったようです。 とても基本的なことを分かっていないのだと思います。。 大変恐縮なのですが、こちらについてもご教示いただけますでしょうか。 よろしくお願いいたします。
補足
すみません、「この回答へのお礼」のほうへ質問を入力してしまったので・・・こちらに再度同じ内容を入れさせていただきます。 早速詳しいご回答ありがとうございます。 私のような未熟な知識の者でも大変にわかりやすかったです。 質問の仕方についてもアドバイスいただきまして恐縮です。 以後注意いたします！ kaisai = new Date(2008, 7, *); ↑の*の部分を変更すれば、 各画像入りムービークリップを配置したフレームに飛ぶところまでできました！ ただ、表示されたムービークリップが点滅して表示されてしまうのです。 各ムービークリップにも stop(); を配置してみたのですが、関係なかったようです。 とても基本的なことを分かっていないのだと思います。。 大変恐縮なのですが、こちらについてもご教示いただけますでしょうか。 よろしくお願いいたします。