FLASH講座　ーアクションスクリプトの実践的事始めー
実務編
(4) xml データ読み込み型ショッピングカート（買い物かご）　
　ｘｍｌファイルデータの活用として、先に、スライドショーについて学びましたが、今回は、商品データを記述したｘｍｌ ファイルデータを使ったショッピングカート（買い物かご）についての講座です。　ｘｍｌ データのFLASHへの取り込みについては、「ｘｍｌ データを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製 ソフトダレスバッグ２WAY" code="C-68-M" price="￥30,975" 　　　　size="43*30*10(W*H*D)" weight="1500g" color="キャメル" material="牛革" note="ビジネスバッグから、カジュアルバックとしてまで使えるソフトな革のダレスバッグ２WAYタイプ"></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）として記述している。なお、ファイル名のｉｍｇのパスは、表示する
ｈｔｍｌ文書からのパスになる。
ステージの準備
　一つの商品について、画像（ｊｐｇやｓｗｆ）表示用ボックス（インスタンス名：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 １（_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を作成
呼び出すｘｍｌファイルを指定
空白部の無視
shohinDataを呼び出した後の処理（関数cartの実施）

配列の定義


配列sNodeの定義；ｘｍｌファイル属性データの項目名を配列に定義

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

以上のスクリプトを各ボタンインスタンスのscrptとして書き込む
リリースされたら
textbox1（商品番号)の記載内容をｐｃｏｄｅとする
combo0（コンボボックス0）の数値をpnumとする
ｈｔｍｌ文書記載の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)