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

質問

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

回答No.2

DPE

＃１です。

まず、ＡとＢのコンボボックスで選ばれたものの合計は、数値の演算であれば答えは常に１つではないでしょうか。
ＡとＢの合計をＣのコンボボックスに出力すること自体は可能ですが、項目が必ず１つに絞られるのであれば、Ｃをコンボボックスにしてもメリットがありません。
合計値を表示するだけで済むのなら、テキストフィールドなどでも充分です。

この話はとりあえず置いておきまして、ムービークリップを動かす件を整理しますと、

　・Ａを選んだ時、Ｂの内容が変わる
　・Ｂを選んだ時、ＡとＢで選択した値の合計でムービークリップが移動する

とのことで、よろしいでしょうか？

＃１の例では、main で扱うデータを管理している配列変数は、フィールドが２つしかありませんでした。
今度は項目名と sub に表示するための配列変数のほかに、 main の各項目に設定しておく値が必要です。
” label ”以外のフィールドは表示されないだけなので、他のフィールドを作れば１つの項目にいくつもの値を割り当てられますし、フィールドがいくつあっても全て同じ要領で取得することができます。

また、＃１の作例は、sub の項目を選んだ時には項目の内容を単に trace アクションで表示するというものでした。
今回は sub の項目を選択した時の処理を、

　・ main で選ばれている項目を見て、値を取得
　・自分（＝ sub ）の中で選ばれている項目を見て、値を取得
　・２つの合計を算出し、ムービークリップに反映させる

このような内容に変更します。

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

２つのコンボボックスでムービークリップを移動する・・・というのを、どのような場面で使うのかよく分からないのですが。
さしあたって、

　・ main コンボボックスで移動量の 10 の位を決める
　・ sub コンボボックスで移動量の１の位を決める
　・１の位の移動量を選択した時点でムービークリップを横に動かす

という例を考えます。

ステージに ComboBox コンポーネントのインスタンスを２つ配置し、インスタンス名を付けてください。
＃１と同様に” main ”と” sub ”とします。
もう１つ、動かすムービークリップをステージに配置して、これにもインスタンス名を付けます。
ここでは仮に” clip ”とします。

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

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

２つのコンボボックス” main ”と” sub ”で選択されている項目の合計でムービークリップ” clip ”を動かすスクリプトは、次のようになります。
このスクリプトは、メインのタイムラインのフレームに設定してください。

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）

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

　//「10」のリスト
　spd_1 = new Array();
　spd_1 =
　[
　　{ label : "1" , fig_1 : 1 },
　　{ label : "2" , fig_1 : 2 },
　　{ label : "3" , fig_1 : 3 },
　　{ label : "4" , fig_1 : 4 },
　　{ label : "5" , fig_1 : 5 }
　];

　//「20」のリスト
　spd_2 = new Array();
　spd_2 =
　[
　　{ label : "2" , fig_1 : 2 },
　　{ label : "4" , fig_1 : 4 },
　　{ label : "6" , fig_1 : 6 },
　　{ label : "8" , fig_1 : 8 }
　];

　//「30」のリスト
　spd_3 = new Array();
　spd_3 =
　[
　　{ label : "3" , fig_1 : 3 },
　　{ label : "6" , fig_1 : 6 },
　　{ label : "9" , fig_1 : 9 }
　];

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

　main_item = new Array();
　main_item =
　[
　　{ label : "10" , data_array : spd_1 , fig_10 : 10 },
　　{ label : "20" , data_array : spd_2 , fig_10 : 20 },
　　{ label : "30" , data_array : spd_3 , fig_10 : 30 }
　];

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

　　/*ここに、mainコンボボックスを選択した時の処理を書く*/

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

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

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

　　//選択されている項目に対応する移動量を取得
　　spd_10 = main.selectedItem.fig_10;
　　spd_1 = info.target.selectedItem.fig_1;

　　//２つの合計で移動量を決定
　　spd = spd_10 + spd_1;

　　//ムービークリップを動かす
　　clip._x += spd;
　};

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

main の項目が選択された時に sub の内容を書き換えるためのスクリプトは＃１と同じですので、省略させていただきました。
＃１のスクリプトの

　//mainコンボボックスにデータを表示
　main.dataProvider = main_item;
　　　　：
　　　　：
　//mainコンボボックスのイベントリスナーを登録
　main.addEventListener( "change" , main_listener );

↑この部分までを追加してください。
ただし、今回は都合により

　main.selectedIndex = undefined;

この１行をコメントにするか、削除してください。

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

この例では、sub のコンボボックスで何かを選択するたびに１回、ムービークリップが指定された移動量（ main と sub の合計）の分だけ右に移動します。

例えば、ムービークリップが常に動いていてコンボボックスではその速度を変化させるというような場合は、ムービークリップの動作は別のスクリプトを作る必要があります。
ムービークリップの動きを変数を使って作り、コンボボックスで求めた値をこの変数に代入すれば、コンボボックスでの選択を反映させることができます。

ポイントは、コンボボックスに設定するデータ（配列変数）の設計と、コンボボックスで選択されている項目からデータを取得する部分だと思います。
取得したデータをムービークリップにどのように反映させるかは、コンボボックスの制御とはまた別の問題です。

回答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を動かしてという依頼が出たのですが、まだまだ未熟者なのでそれ自体が可能かどうかが分かりません。
ややこしいとは思いますが、どうかご教授下さいませ。
宜しくお願いいたします。