FLASH講座 ーアクションスクリプトの実践的事始めー
実務編
(4) xml データ読み込み型ショッピングカート(
買い物かご 

 xmlファイルデータの活用として、先に、スライドショーについて学びましたが、今回は、商品データを記述したxml ファイルデータを使ったショッピングカート(買い物かご)についての講座です。 xml データのFLASHへの取り込みについては、「xml データをFLASHで活用」を参照下さい。

 ショッピングカートの商品説明の画像をFLASHムービーで表現するのも、商品によっては面白いのではないかと考えての試みです。 カートの主要部分は、汎用のCGI をそのまま使い、それにFLASHからjavascriptを介してデータを渡す方法をとりました。 したがって、注文処理以降ではFLASHの出番はなくなっています。 その部分は特にFLASHにする必要もないでしょう。
 以下に、商品確認画面のFLASH部分を表示します。 商品例は、ハンドバッグであり、最初の二つは、「ポルコロッソ」さんの手作り鞄(この例からは買い物できません)、もう一つは動画の例として「YouTube」からダウンロードしたものを使っています。 買い物かごに入れる…以降は、通常のショッピング用 cgi に飛ばしていますので、ここでは省略します。
XML ファイルの作成
 以下のような記述をテキストエディターで作成し、cart.xmlとして本ファイルと同じフォルダーにUTF-8形式で保存した。

<?xml version="1.0" encoding="UTF-8"?>
<Shohin>
<bag img="swf/bag1.swf" namae="HERZ製 ソフトダレスバッグ2WAY" code="C-68-M" price="¥30,975"     size="43*30*10(W*H*D)" weight="1500g" color="キャメル" material="牛革" note="ビジネスバッグから、カジュアルバックとしてまで使えるソフトな革のダレスバッグ2WAYタイプ"></bag>
<bag img="swf/bag2.swf" namae="HERZ製 20年後息子に譲りたい鞄" code="B-16" price="¥39,900" size="38*27*11(W*H*D)" weight="1900g" color="キャメル" material="牛革" note="タンニンなめしを使用し、ラティーゴと呼ばれる革を使用し革本来の持ち味を大切にしています"></bag>
<bag img="swf/bag3.swf" namae="VIVENTY HandBag" code="V-30" price="¥28,000" size="??*??*??(W*H*D)" weight="????g" color="白" material="牛革" note="このビデオは、YouTubeからDLしました"></bag>
</Shohin>


 ちょっと見にくいが、データはすべて属性(attribute)として記述している。なお、ファイル名のimgのパスは、表示する
html文書からのパスになる。
ステージの準備
 一つの商品について、画像(jpgやswf)表示用ボックス(インスタンス名:img0,img1,,,)を一つ、商品名などデータ表示用ダイナミックテキストボックス八個を配置し、各テキストボックスに「サイズ」などの項目名を静的テキストボックスで書く。 各テキストボックスのインスタンス名は、商品1についてはtextbox0,1,2,,,,,8、商品2については、textbox11,12,,,,18のようにする。 注文数をセレクトするためのコンボボックス(combo0,,,,)を、買い物かごに入れるボタン(btn0,,,,)を、それぞれ、コンポーネントウインドウからドラッグ&ドロップして配置する。
 これらの配置を、各商品ごとに行うが、最初に作成した商品のものをコピペし、インスタンス名を変更すればよい。 なお、 今回は、textboxなどの配置を静的に手作業で行ったが、商品数が膨大になるときはスクリプトで配置する必要が生じると思われる。
 コンポーネントComboBox、Buttonのパラメータの設定は、プロパティーインスペクターで以下のようにする。
  ComboBox: labels を 1,2,3,4,5(選べる商品数を設定する) rowCount を 5(クリックしたとき表示する数)とする
  Button: label を 買い物かごに入れる とする以外は初期設定のまま
スクリプト(Script)
FRAME 1(_rootに)
shohinData = new XML();
shohinData.load("cart.xml");
shohinData.ignoreWhite = true;
shohinData.onLoad = cart;

var code:Array = new Array();
var image:Array = new Array();
var num:Array = new Array();
var sNode:Array = new Array("namae", "code", "note", "size", "weight", "color", "material", "price");

function cart(ok) {
if (ok) {
rootNode = shohinData.firstChild;
total = rootNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = rootNode.childNodes[i].attributes.img;
for (k=0; k<8; k++) {
sN$ = sNode[k];
if (i == 0) {
textbox = _root["textbox"+k];
} else {
textbox = _root["textbox"+i+k];
}
textbox.text = rootNode.childNodes[i].attributes[sN$];
}
img = _root["img"+i];
img.loadMovie(image[i]);
}
}
}

インスタンスshohinDAtaを作成
呼び出すxmlファイルを指定
空白部の無視
shohinDataを呼び出した後の処理(関数cartの実施)

配列の定義


配列sNodeの定義;xmlファイル属性データの項目名を配列に定義

関数cart
もしロードが成功(OK)だったら
最初の子ノードをrootNodeと置く
rootNodeのデータ数(商品数)をtotalと置く
データの数だけ
属性img(ファイル名)を配列image[i]に定義する
ダイナミックテキストボックスの数だけ
k番目のテキストボックスのデータをsN$とする
i 番目の商品については
textboxをtextbox0. textbox1,,,,,とする
2番目以降の( i 番目の)商品については
textboxにtextbox21,textbox22,,,のように10の桁に i を付けたtextboxを割り付ける
textboxの内容に、rootNodeのi 番目の子ノードの属性データ(sN$)をそれぞれ割り付ける
インスタンスimg0,img1,,に
image[1],image[1],,,を表示させる
買い物かごに入れるボタンに(btn0の例)
on(release) {
pcode =_root.textbox1.text;
pnum= _root.combo0.value;
getURL("javascript:cartdata('"+pcode+"','"+pnum+"');");
}

以上のスクリプトを各ボタンインスタンスのscrptとして書き込む

リリースされたら
textbox1(商品番号)の記載内容をpcodeとする
combo0(コンボボックス0)の数値をpnumとする
html文書記載のjavascript:cartdata を実施(引数:pcode,pnum)
HTML文書(FLASHを表示している)

<head></head>
内に
<SCRIPT language="javascript">
<!--
function cartdata(pcode,pnum) {
document.myForm.code.value=pcode;
document.myForm.num.value=pnum;
document.myForm.submit();
}
//-->
</SCRIPT>

<body></body>内に
<FORM name="myForm" action="http://www.***.com///***.cgi" method="post">
<INPUT type="hidden" name="code" value="pcode">
<INPUT type="hidden" name="num" value="pnum">
</FORM>





FLASHから受け取った引数を適用し、body内に記載されているFORM(myForm)内容を、actionで指定されたURLにあるcgiに送信する







ショッピングカートcgi の在るところへパスを通す
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。
 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。 
  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                           (by Hiraoka)
HOME   Flash講座総リスト     flash アクションスクリプト 実務編 (5)