FLASHのお勉強　ーアクションスクリプトの実践的事始めー
(52) フォーム用コンボボックスの動的作成 　　200７/12/18

（actionscript3.0）
　本サイト「(51) フォーム用テキストフィールドの動的作成」で、入力チェック付テキストフィールドの作成について解説したが、本稿は、コンボボックスの作成である。　コンボボックスの項目、配置座標、大きさなどを指定するｓｗｆファイルと、それらを引数とするコンボボックス作成と選択された項目を返すクラスファイルの組み合わせで構成されるコンボボックスの作成スクリプトである。
　確認ボタンをクリックすると、選ばれている項目が表示用テキストフィールドに表示されるまでを作成する。
SAMPLE

ステージの準備
●400*200のステージを設定、背景色や枠を入れるかどうかなどは好みによる
●ライブラリーにコンポーネントウインドウからコンボボックス（ CombpBox ）をドラッグしドロップしておく
●選択された項目を取得し、確認するためのイベントボタンを画面右に配置し、インスタンス名を kakunin としておく
スクリプト
　ファイルの構成：　setupComboBox.fla(swf)　−　createComboBox.as
setupComboBox.flaファイル
import flash.text.*;
var $prompt:String ="お使いの回線を次の中から選択してください";
var cbItem =["光通信","ケーブル","ＡＤＳＬ","ダイヤルアップ"];
var cb1x:Number = 30;//コンボボックスのｘ座標
var cb1y:Number = 40;//ｙ座標
var cb1w:Number = 250;//幅
var cb1h:Number = 24;//高さ
var combo1:createComboBox = new createComboBox($prompt,cbItem,cb1x,cb1y,cb1w,cb1h);
addChild(combo1);

function confirm(event) {
        var cbSelected:String = combo1.itemSelected();
        display(cbSelected);
}
kakunin.addEventListener(MouseEvent.CLICK,confirm);

var tf:TextField = new TextField();
tf.text = "";
tf.border = true;
tf.x = 30;
tf.y = 150;
tf.width = 200;
tf.height = 24;
addChild(tf);

function display(cbSelected) {
        if (cbSelected) {
                tf.text = cbSelected;
        } else {
                tf.text = "何も選ばれていません";
        }
}
<説明>
●var $prompt:String =
　　コンボボックスに初期表示する文章を$promtと置く
●var cbItem =["光通信","ケーブル","ＡＤＳＬ","ダイヤルアップ"];
　　選択対象項目を配列（cbItem）で定義
●var combo1:createComboBox = new createComboBox($prompt,cbItem,cb1x,cb1y,cb1w,cb1h);
　　クラス(as)ファイルに$prompt以下の引数を渡し、コンボボックス combo1 を作成し、表示する（addChild(combo1)）
−−−−ここまでで、コンボボックスが作成される−−−−
●function confirm(event) {
　確認ボタンがクリックされたら以下を実行する関数
　　var cbSelected:String = combo1.itemSelected(); //　選択されている項目データを、クラスファイルから取得する
　　display(cbSelected);//　そのデータをdisplay関数に渡す
●var tf:TextField = new TextField();　以下は、
　確認ボタンがクリックされたら、選択された項目を表示するテキストフィールドを作成する
●function display(cbSelected) {
　選択された項目を表示する（選ばれていない時は、選ばれていない旨のメッセージを表示)

createComboBox.as ファイル

 
package {
        import fl.controls.ComboBox;
        import flash.events.*;
        import flash.display.Sprite;

        public class createComboBox extends Sprite {
                public function createComboBox(prompt:String,cb_item:Array,
                x:Number,y:Number,w:Number,h:Number) {
                        var n:Number = cb_item.length;
                        var cb:ComboBox=new ComboBox();
                        cb.setSize(w,h);
                        cb.x=x; cb.y=y;
                        cb.prompt = prompt;
                        for (var i:Number=0; i<n; i++) {
                                cb.addItem( {label:cb_item[i], data:i+1 } );
                        }
                        addChild(cb);
                        cb.addEventListener(Event.CHANGE, clickHandler);
                }
                var selectedLabel:String;
                function clickHandler(event:Event) {
                        selectedLabel = event.currentTarget.selectedItem.label.toString();
                }
                public function itemSelected():String {
                        return selectedLabel;
                }
        }
}
<説明>
●import　必要なパッケージの読み込み
●var n:Number = cb_item.length;
　　配列の長さ、すなわち、項目数
●var cb:ComboBox=new ComboBox();
　　コンボボックスのインスタンス（cb）作成
●prompt
　　初期にコンボボックス内に表示されるテキスト文
●cb.addItem( {label:cb_item[i], data:i+1 } );
　　コンボボックスのリストに配列で取得した項目を順次付け加える
　　data:i+1 でデータ番号を1からふっているが、今回はなくても良い
●cb.addEventListener(Event.CHANGE, clickHandler);
　　コンボボックスの選択項目が変わったら、関数 clickHandler を実行
●selectedLabel = event.currentTarget.selectedItem.label.toString();
　　選択されている項目をストリングに変換して、selectedLabel に取得する
●public function itemSelected():String { return selectedLabel; }
　　ｓｗｆ(fla）ファイルから参照されたときに選択されている項目データを返す
 
flashirohaサイト内　 Web全体　
HOME　　　お勉強総リスト