２つのコンボボックスを連動させたいのですが

質問

はじめまして。
Flashを始めて間もない初心者です。
２つのコンボボックスA、BがありAで選択された項目をBにも反映させたいのですが、どうスクリプトを記述したらいいのか分かりません。
初心者でも分かるようにどなたかご教授していただけないでしょうか？
Flasｈ8 professionalを使用しています。
どうぞ宜しくお願いいたします。

回答No.1

DPE

連動させるデータの規模にもよって方法も違いますが、スクリプトだけでできる小規模の連動の例をご紹介します。
この作例はほんの一例です。ご希望の作品に合うように、いろいろ改良してみてください。

いきなり厳しいことを言うようですけれど、コンポーネントの制御は、Flash と ActionScript の基礎を一通り理解していることが前提になります。
ここでは全くのゼロからの解説はできませんので、Flash の操作・スクリプトの書き方・文法と用語・イベントの考え方などの基本につきましては、市販の解説書か解説サイト・ヘルプをご参考になさってください。

------------------------------------------------------------

ComboBox コンポーネントを配置しても、当然、中身は空っぽです。
表示する内容を設定するには、「パラメータ」パネルで編集する方法とスクリプトで設定する方法があります。
今回はスクリプトで設定します。

ComboBox ・ List ・ DataGrid などのリストタイプのコンポーネントは、配列変数と密接な関係があります。
配列変数とは、同じ名前で管理番号だけが違う、複数の変数の集まりです。
管理番号は 0 からの通し番号で付くので、一覧表の中から○番目の項目を選ぶ・・・など、表を処理するのに向いているというわけです。

ComboBox に表示する内容をスクリプトで設定するには、addItem メソッドで１つずつ項目を作る方法と、dataProvider というプロパティに配列変数を渡す方法があります。
今回は dataProvider を使います。

「 dataProvider に配列変数を渡すと ComboBox の表示内容を設定できる」のなら、Ａで選ばれた項目に対応する配列変数を覚えておいて、これをＢの dataProvider に渡すことでＡとＢを連動させることができるといえます。

とすると、まず、Ａで扱うデータを格納する配列変数が必要です。
更に、Ｂで扱うデータの配列変数が、Ａの項目だけ必要になります。
データの多さにげっそりしてしまいますが、ここは一つ我慢して、今回は全部スクリプトでデータを作ります。
始めに”小規模の”とお断りしたのは、こういう理由のためです。

------------------------------------------------------------

まずは作ってみることにしましょう。

「コンポーネント」パネル（表示されていない時は「ウィンドウ」メニュー→「コンポーネント」）の” User Interface ”カテゴリーにある ComboBox のシンボルを２回、ステージにドラッグします。
これで、ステージに ComboBox のインスタンスが２つ作られます。

２つのうち一方を選択した状態で、「プロパティ」パネルを見てください。
左上の方に” <インスタンス名> ”と書かれた項目があります。
ここに、何か名前を入力してください。この名前はスクリプトで使いますので、半角の英数字と” _ ”だけで付けます。
もう片方のインスタンスにも、同様に名前を付けてください。
ここでは仮に、” main ”と” sub ”と付けたとします。

以上で準備は完了です。
次はスクリプトを書きます。

********************************

２つの ComboBox のインスタンス” main ”と” sub ”が、ステージにあるとします。
” main ”で選択された項目に応じて” sub ”の項目を変化させるスクリプトは、次のようになります。
このスクリプトは、２つのインスタンスがあるタイムラインのフレームに設定してください。
この例では、メインのタイムラインのフレーム１に書きます。

なお、スクリプトの各行頭に全角のスペースが入っています。
このままコピーするとエラーになりますので、全て半角のスペースかタブに置き換えてください。
「アクション」パネルにある検索・置換機能を使うと簡単です。

　////////////////////////////////////////////////////////
　//subコンボボックスで扱うデータ
　////////////////////////////////////////////////////////

　//「鮮魚・魚卵加工品」のリスト
　fish = new Array();
　fish =
　[
　　{ label : "毛がにボイル" , price : 10000 } ,
　　{ label : "活ほたて" , price : 5000 } ,
　　{ label : "活車えび" , price : 3000 } ,
　　{ label : "明太子詰め合わせ" , price : 3000 } ,
　　{ label : "醤油漬いくら" , price : 5000 }
　];

　//「ビール」のリスト
　beer = new Array();
　beer =
　[
　　{ label : "一番搾り" , price : 3000 } ,
　　{ label : "スーパードライ" , price : 3000 } ,
　　{ label : "黒ラベル" , price : 3000 } ,
　　{ label : "ブラウマイスター" , price : 5000 } ,
　　{ label : "熟撰" , price : 5000 } ,
　　{ label : "ヱビスビール" , price : 5000 }
　];

　//「果物」のリスト
　fruit = new Array();
　fruit =
　[
　　{ label : "高級マスクメロン" , price : 10000 } ,
　　{ label : "白鳳桃" , price : 5000 } ,
　　{ label : "マスカット" , price : 3000 } ,
　　{ label : "ハウスみかん" , price : 3000 }
　];

　////////////////////////////////////////////////////////
　//mainコンボボックスで扱うデータ
　////////////////////////////////////////////////////////

　main_item = new Array();
　main_item =
　[
　　{ label : "鮮魚・魚卵加工品" , data_array : fish } ,
　　{ label : "ビール" , data_array : beer } ,
　　{ label : "果物" , data_array : fruit }
　];

　////////////////////////////////////////////////////////
　//各コンボボックスのセットアップ
　////////////////////////////////////////////////////////

　//mainコンボボックスにデータを表示し、
　//最初に選ばれている項目を”なし”にする
　main.dataProvider = main_item;
　main.selectedIndex = undefined;

　//リスナーの作成とmainコンボボックスが選択された時の処理を定義
　main_listener = new Object();
　main_listener.change = function( info:Object )
　{
　　var array_ref;

　　//選択された項目に設定されているdata_arrayの情報を取得
　　//data_arrayとは、subコンボボックスの項目にする配列変数のこと
　　array_ref = info.target.selectedItem.data_array;

　　//取得した配列変数をsubコンボボックスの項目に設定する
　　sub.dataProvider = array_ref;

　　//subコンボボックスの選択されている項目をリセット
　　sub.selectedIndex = undefined;
　};

　//mainコンボボックスのイベントリスナーを登録
　main.addEventListener( "change" , main_listener );

　/*******************************************/

　//subコンボボックスに最初のデータを表示し、
　//最初に選ばれている項目を”なし”にする
　sub.dataProvider = fish;
　sub.selectedIndex = undefined;

紙面の都合上、スクリプトの１つ１つを詳しく解説することはできません。
何をするスクリプトかは、スクリプト内のコメントをご参考になさってください。

********************************

ActionScript の配列変数は、中に仕切りを作って、同じ管理番号の変数でも更に細かくデータを管理できるようになっています。
仕切りで区切った部分を”フィールド”といいます。
フィールドの名前は、文法の範囲内であれば好きな名前を付けて構いません。

ただし、ComboBox の場合は１つだけ、フィールドの名前が決まっているところがあります。
dataProvider に配列変数を渡した時は、” label ”という名前を持つフィールドの値が表示する項目名に採用され、これ以外のフィールドの値は表示されなくなります。
” label ”フィールドがない場合は配列変数に含まれる全てのフィールドが表示されてしまいますので、ご注意ください。

なお、他のフィールドの値は表示されないだけで、データとしては残っています。
ですから、”項目に設定されているデータ”として、いつでも取り出して使うことができます。

********************************

一般にコンボボックスは、単に項目が表示されるだけでなく、項目を選んだ時に何かを実行する機能を持っているものです。
「何をするか」はものによって異なり、そのために必要な情報も違ってきます。

今回の件ですと、” main ”の機能は、項目を選んだ時に” sub ”の項目を変化させることです。
つまり、そのために各項目に持っておくべきデータとは” sub ”に渡す配列変数です。
上記のスクリプトでは、” main ”で扱うデータの中に、項目名の他にもう１つフィールド” data_array ”を用意して、” sub ”に表示するデータである配列変数を格納しています。

現在どの項目が選ばれているかを調べたり、選ばれている項目に設定されているデータを取り出す方法は、ComboBox コンポーネントの機能として提供されています。
この機能を利用して” main ”で選択されている項目を取得し、更に、そこに設定されている data_array の情報を取り出します。
こうして取り出した情報を” sub ”の dataProvider に渡せば、２つのコンボボックスを連動させることができます。

********************************

上記の作例ですと、” main ”の項目を選んだ時に” sub ”の内容が変化しますが、” sub ”の項目を選んだところで何も起きません。
ComboBox は何も指示しなければ、ただ項目を表示しているだけのものにすぎないのです。
” sub ”を選んだ時に何か仕事をさせるには、そのためのスクリプトも必要です。

例えば、先のスクリプトに

　//リスナーの作成とsubコンボボックスが選択された時の処理を定義
　sub_listener = new Object();
　sub_listener.change = function( info:Object )
　{
　　var item;

　　//選択された項目に設定されている情報を全て取得
　　item = info.target.selectedItem;

　　//取得した情報を「出力」パネルに表示
　　trace( "品名：" + item.label );
　　trace( "価格：" + item.price + "円\n" );
　};

　//subコンボボックスのイベントリスナーを登録
　sub.addEventListener( "change" , sub_listener );

↑このようなスクリプトを追加して、「ムービープレビュー」で確認してみてください。
” sub ”の項目を選ぶたびに各項目に設定されている情報を取得して、「出力」パネルに

　品名：毛がにボイル
　価格：10000円

というように表示されるようになります。

trace アクションは「ムービープレビュー」の時だけ使える、いわば開発中に使う確認のためのアクションです。
実際にホームページに掲載する場合などは、別の方法で表示を作成してください。

------------------------------------------------------------

ActionScript では、XML という言語で書かれたデータを読み込むことができます。
今回はスクリプトでデータを作れる範囲の小規模のコンボボックスでしたが、XML でデータを取得し、解析して配列変数を動的に作る設計にすると、もっと規模の大きなデータや複雑なデータを扱う作品も作れます。
XML はデータベースとやりとりするのに向いていることから、データベースと連動した商業用の Flash は実際にあります。

また、「データバインディング」という機能を利用して連動させる方法もあります。
Flash や ActionScript に慣れてきたら、研究してみてください。

長くなってすみませんでした。

補足

DPEさん
細かいところまで丁寧に教えて下さりありがとうございます。
コンポーネントについて説明されている書籍が見つからなくて困っていたので、大変助かりました。

また質問で申し訳ないのですが、二つのコンボボックスで表示されている値を足したものを別のコンボボックスに表示させるのは可能でしょうか？
例えば、Aのコンボボックスで1、Bのコンボボックスでは2と表示させて、別のコンボボックスCにはAとBの合計3を表示することは出来るのでしょうか？
AとBで表示されている値を取得して二つの合計分だけMCを動かしてという依頼が出たのですが、まだまだ未熟者なのでそれ自体が可能かどうかが分かりません。
ややこしいとは思いますが、どうかご教授下さいませ。
宜しくお願いいたします。