D0805012 日産サイトのカーラインナップのFLASH
Name cosmo
Date 2008年05月01日 (木) 15時13分
Message はじめまして。
日産自動車のサイトのカーラインナップで使用されているFLASHについてわからないところがあるので教えて頂きたいのですが･･。

条件をボタンで選んでいき、最終的に、条件に合致する自動車を表示させているのですが、
この最終的に自動車を表示させるには、何か条件設定→値を返す･･のようなやり方で表示させているのでしょうか？
それとも、単純にプルダウンメニューの作り方で行なっているものなのでしょうか？

お手数お掛け致しますがご教授頂けますようお願い致します。
Home or Link http://www.nissan.co.jp/CARLINEUP/
Response 01
2008年05月02日 (金) 00時28分＞ joy　
cosmoさん、
今晩は。
この日産のサイトは、恐らく、サーバーサイドアプリケーションにdatabaseがあり、閲覧者が、選択するたびに、その選択情報を、CGI等に送りこみ、CGIが表示するための情報をFlashに返して来て、Flashが外部から該当JPG等を読み込んで、表示してるのではないかと推測します。そう簡単に、出来るものではないと思います。プロが時間掛けて、使ったように思えますが、他の識者の方々のご意見も聞いて下さい。

そうかと言って、Flashで絶対できないかというと、そうでもなく、簡単なものは、Flashだけでも可能です。

下に、閲覧者に回答を選択させ、その回答結果によって、読み込む外部JPGを変更する、非常に単純なサンプルを置いておきました。ざざーと作った程度のものなので、実用には、耐えれませんが、考え方の参考に、多少はなると思われます。

１）3フレームで作ってます。
２）1フレーム目は、オープニングのMCを置いてます。インスタンス名　open_mc　です。
３）2フレーム目は、YES/NOで回答させる質問を置いてます。更に、回答終了後の、ボタン処理をいれてます。ボタンのインスタンス名は、　choice_btn です。
４）3フレーム目は、回答結果に基づき、外部JPGを選択して、空のMC(インスタンス名　screen)に読み込むようにしてます。初期化するための、back_btnも置いてます。
５）以上で、準備が終了しましたので、scriptを記載しますが、

・第一フレームのscriptレイヤーに、

this.stop();

/*答えのyes及びnoともに、初期値は、falseとする*/
var a1yes:Boolean = false;//質問１に対する、YESの変数を、a1yesとして、初期値は、false
var a1no:Boolean = false;//質問1に対する、NOの変数を、a1noとして、初期値は、false

var a2yes:Boolean = false;//上と同様
var a2no:Boolean = false;


open_mc.onRelease = function():Void {//押されたら、次の　フレームに移動して、停止
nextFrame();
};

・第二フレームのscriptレイヤーに、

this.stop();//念のため

/*以下、各answerのyes、noを押したなら、自らを次のフレーム　に移動して、色を変え、変数を trueにする*/

a1_mc.yes_mc.onRelease = function():Void {//a1_mcの中に、入れ子で、yes_mcとno_mcを入れてますので、その、yes_mcが押されたらの意味です。
this.nextFrame();//yes_mcは2フレームからなり、第二フレームの色を青に変えてあります
a1yes = true;
a1_mc.no_mc.prevFrame();/*NOを押した後に、YESを押すこともあるので、そのときは、NOの色を元に戻し、且つ、変数を初期値に戻す*/
a1no = false;
};

a1_mc.no_mc.onRelease = function():Void {
this.nextFrame();
a1no = true;
a1_mc.yes_mc.prevFrame();/*逆に、YESを押した後に、NOを押すこともあるので、そのときは、YESの色を元に戻し、且つ、変数を初期値に戻す*/
a1yes = false;
};

a2_mc.yes_mc.onRelease = function():Void {
this.nextFrame();
a2yes = true;
a2_mc.no_mc.prevFrame();
a2no = false;
};


a2_mc.no_mc.onRelease = function():Void {
this.nextFrame();
a2no = true;
a2_mc.yes_mc.prevFrame();
a2yes = false;
};



choice_btn.onRelease = function():Void {//選択ボタンを押すと、次のフレームに移動して、停止
nextFrame();
moji_txt.text="This is your Choice !";//第三フレームに設置した、ダイナミックテキスト　インスタンス名　moji_txtに対して、文字を代入し、写真の上に表示されるので、色を、白に変更してます。
moji_txt.textColor=0xFFFFFF;
};

・第3フレームに、

this.stop();//念のため


/*以下、YES/NOの2の2乗なので、4通りの回答があります。回答に近い、写真JPGを選んで、ロードします*/
if (a1yes && a2yes) {//両方とも、yesなら、外部JPGの1.jpgを表示
screen.loadMovie("fotos/1.jpg");
} else if (a1yes && a2no) {//answer1がYESで、answer2がNOなら、3.jpgを表示、以下同様
screen.loadMovie("fotos/3.jpg");
} else if (a1no && a2yes) {
screen.loadMovie("fotos/0.jpg");
} else if (a1no && a2no) {
screen.loadMovie("fotos/2.jpg");
}

replay_btn.onRelease = function():Void {//最初に戻り、初期化する
gotoAndStop(1);
};

と記載してます。
尚、回答にぴったりの写真がないので、回答通りの写真表示になってませんが、ご了解下さい。

質問が2つで、選択肢が４つしかない、非常に単純なサンプルですが、高校の数学で勉強した、順列組合わせ（随分、前のような気がしますが・・・・）を駆使すれば、日産サイトの構築とまでは行かなくても、結構なものが作れるかもしれません。

頑張ってください。
 http://homepage2.nifty.com/joys/answers/choice/choice.html
Response 02
2008年05月02日 (金) 18時10分＞ cosmo　
joy様、早速の回答有難う御座いました。
なるほど。やっぱりそれ相当に創り込まれたWEBサイトなんですね。
そこまでの事は私には無理ですが、教えて頂いたプログラムを参考に研究して
何とか目指す近いところまで頑張って辿り着きたいと思います。

また解らないところがあったら質問させて下さい。

有難う御座いました。
このページの先頭へへ