3.0と同じように[コンポーネント]が備わりました(図001)。本稿では、その中のユーザーインターフェイスコンポーネントの使い方についてかいつまんでご紹介します。[F7])、ComboBoxコンポーネントをステージにドラッグ&ドロップしたら、[プロパティ]パネルでインスタンス名(my_cb)を与えます(図002)。図002■ComboBoxコンポーネントのインスタンスに名前を与えるComboBoxインスタンスのドロップダウンリスト項目は、[プロパティ]パネルの[コンポーネントパラメーター]にある[アイテム]右の鉛筆アイコン(前掲図002右参照)で、[値]ダイアログボックスを開いて書き加えます。項目はダイアログボックス左上の[+]ボタンで加え、[-]ボタンで除きます。[label]がComboBoxの項目として示され、[data]は選択したときの値になります(図003)。はじめに選んでおく項目の値は、[プロパティ]パネルの[コンポーネントパラメーター]で[値]に入力しておきます(前掲図002)。図003■[値]ダイアログボックスでComboBoxの項目を加えるこれで、[プレビュー]([制御]メニュー)をすれば、コンボボックスとして、ドロップダウンリストから項目が選べるようになります。パブリッシュするとcomponentsというフォルダができて、必要なJavaScriptファイルが納められますので、このフォルダもサーバーにアップロードしてください。コンボボックスから選ばれた項目の値を調べるコンボボックスのドロップダウンリストから項目が選べるだけでは意味がありません。項目を選び変えたときに、その値を調べましょう。ステージにあるComboBoxインスタンス(my_cb)を選んでから、[ウィンドウ]メニューから[コードスニペット]を開きます([アクション]パネルの右上にも[コードスニペット]を開くボタンがあります)。Canvas]の中の[コンポーネント]内の[ユーザーインターフェイス]から[コンボボックス選択変更イベント]をダブルクリックするか、選んだうえでパネル左上の[現在のフレームに追加]ボタンをクリックします(図004)。図004■[コードスニペット]パネルから[コンボボックス選択変更イベント]を選ぶすると、新たな「Actions」レイヤーが追加され、ComboBoxコンポーネントインスタンス(my_cb)を置いたのと同じフレームに、つぎのようなJavaScriptコードが書き加えられます。コンボボックスで選ばれた項目が変わると、コンボボックスインスタンス名に"_change"を添えた関数(my_cb_change())が呼び出されます。関数本体には確認用のconsole.log()メソッドにより、選ばれた項目の値(evt.target.value)がブラウザのコンソールで確かめられます(図005)。コンボボックス選択変更イベントコンボボックスで選択値を変更すると、この関数が実行されます。この関数には独自のカスタムコードを追加できます。カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。true;}図005■コンボボックスから選んだ項目の値がコンソールに示される[コードスニペット]の[コンボボックス選択変更イベント]で与えられた前掲コードは、jQueryの.on()メソッドで、"change"イベントのリスナーに関数(my_cb_change)を加えて呼び出します(さらに、リスナー関数本体のthis参照がbind()メソッドで定められています)。if条件で確かめているプロパティ(my_cb_change_cbk)は、フレームループした場合に備えて、処理を一度だけ行わせるためのものです。インスタンスのテキストのスタイルを変える先に進む前に気になるのが、コンボボックスの項目の文字が、何かの間違いかと思えるほど小さいことです(図006)。これは、環境によるのかもしれません。テキストのスタイルを変えたい場合はあるでしょう。ActionScriptとは異なり、コンポーネントのプロパティで変えるのではないようです。図006■コンボボックスの項目の文字がありえないほど小さいコンポーネントインスタンスの[プロパティ]パネルを見ると、[コンポーネントパラメーター]に[クラス]という項目があります(前掲図002右)。これは、インスタンスのDOM要素にclass属性として与えられます(ComboBoxはデフォルトではui-combobox)。CSSで変えることができるのです。そこで、パブリッシュしたHTMLドキュメントのhead要素に、つぎのようなstyle要素の定めを加えます。src="https://code.createjs.com/createjs-2015.11.26.min.js"></script></head>これで、コンボボックスの項目の文字が、普通に見られる大きさになります。パブリッシュをし直すと、HTMLドキュメントは上書きされます。FLAファイルとは別の名前にしておく方がよいでしょう。コンボボックスで選ばれた値をテキスト入力フィールドに示すコンボボックスから選んだ項目の値を、別のコンポーネントに反映させましょう。ここでは、TextInputコンポーネントを使うことにします。[コンポーネント]パネルから、ComboBoxインスタンスと同じフレームにTextInuptインスタンスをドラッグ&ドロップします(前掲図001参照)。[プロパティ]パネルでインスタンス名(my_txt)を与えます。TextInuptインスタンスを選んだうえで、[コードスニペット]から[UIコントロールの値を設定]をダブルクリックします。すると、[アクション]パネルには、つぎのJavaScriptコードが書き加わるはずです。コメントは要りませんので、使うのはjQueryの.val()メソッドでTextInputインスタンス(my_txt)に値を定める1行です。任意のコントロールの値を設定するには、このコードスニペットを使用します。カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。カスタムコードを終了この1行をカットして(コメントは消して構いません)、[コンボボックス選択変更イベント]のコードの中につぎのようにペーストして、.val()メソッドに渡す値をconsole.log()の引数と同じ記述にします。すると、コンボボックスで選んだ項目の値が、テキスト入力フィールドに入るでしょう。CSSコンポーネントでCSSファイルを読み込むコンポーネントを新たに加えると、そのスタイルを定めたい場合も出てきます。前述03「インスタンスのテキストのスタイルを変える」では、HTMLドキュメントに<style>要素でCSSを書きました。CSSコンポーネントを使えば、パブリッシュのとき外部のCSSファイルが読み込めます。これなら、パブリッシュするファイルと名前の違うHTMLドキュメントを、別に用意しなくても済みます。[コンポーネント]パネルから、ComboBoxやTextInuptインスタンスと同じフレームにCSSコンポーネントをドラッグ&ドロップします。このインスタンスは見えませんので、ステージの外に置いて構いません(図008)。FLAファイルと同じ場所のassetsフォルダにCSSファイル(style.css)をつくって[*1]、つぎのようなスタイルを定めます(TextInputコンポーネントのデフォルトの[クラス]はui-textinput)。royalblue;}図008■ステージの外に置いたCSSコンポーネントのインスタンスCSSコンポーネントインスタンスを選んだら、[プロパティ]パネルで[コンポーネントパラメーター]の[ソース]にCSSファイルのパスを与えます(図009)。インスタンス名はつけなくても構いません。図009■[コンポーネントパラメーター]の[ソース]にCSSファイルのパスを与えるこれで、CSSファイルに書いたスタイルがふたつのコンポーネントインスタンスに適用され、文字の大きさや色が変わります(図009)。CSSコンポーネントインスタンスの[ソース]にassetsフォルダ以外のCSSファイルを与えると、assetsフォルダがつくられてCSSファイルはコピーされますので、サーバーにはassetsフォルダをアップロードしてください。CSSファイルを別の場所に置くと、パブリッシュしたときassetsフォルダがつくられて、その中にCSSファイルがコピーされます。サーバーにはこのassetsフォルダをアップロードしましょう。初めからassetsフォルダの中にCSSファイルを置いたとき、パブリッシュするとそのファイルが消えてしまう場合もあるようです。そのような環境では、CSSファイルを別の場所に置いてください。