前回に引き続き、Flash CS3標準コンポーネントを、素直にコンポーネントウィンドウに入っている順番で上から使っていってみる。
ボタンは既にやったので、次はチェックボックス。GUI部品としてはボタンの変形ですな。ON・OFFが入れ替わるトグル形式になってるだけで、ほぼ一緒。
継承関係としても、LabelButtonのサブクラスだか、ボタンと一緒だ。
ふーむ、リファレンスによると、autoRepeatとtoggleが
てなわけで、特別に新たなメソッドやプロパティが設定されている訳でもなく。イベントなんかまるっきりLabelButtonと一緒。
では問題なしという事で、作ってみましょう。
えーと、ステージにチェックボックスコンポーネントを配置して、インスタンス名を付ける、"checkBox"…と、ActionScript3.0は識別子の大文字・小文字を区別するので、クラス名そのままんで頭だけ小文字にしたインスタンス名を付けても別ものと認識される。
とにかくAS3は名前を尋常じゃなく沢山つけていかないとスクリプト書けないので、早めに名前づけのルールを決めたいところだけど、未だに悩み中。
とりあえずのところは、そのまんまな名前を付けていくのが、あんまり考えなくてかつ統一感も出るのでよろしい。
以下は例によって、外部ActionScript"MainTimeline.as"に記述したドキュメントクラス。極力スクリプトは外部に置くのがよろしい。本体の使いづらさ満開のスクリプトエディタを使わずにすむからね。
//!-- UTF8
package {
import flash.display.MovieClip;
import fl.controls.CheckBox;
import flash.events.MouseEvent;
public class MainTimeline extends MovieClip {
public var checkBox:CheckBox;
function MainTimeline() {
checkBox.addEventListener( MouseEvent.CLICK, clickHandler );
}
private function clickHandler( e:MouseEvent ):void {
trace( e.target.selected );
}
}
}
ちなみに、このスクリプトの場合trace( e.target.selected );は、trace( checkBox.selected );でも同じ結果になるんだけど、checkBoxって書いちゃうと部品を決めて指定しちゃっているので、別の部品からイベントが送られてきた時に対応できない。
で、成果。鳶嶋工房 / User Interface / Terms / チェックボックス(check box)
うへぇ、CheckBoxで3時間もかかっちゃったよ。まだまだリハビリ中という感じだなぁ。
次はfl.controls.ColorPicker。fl.core.UIComponentを継承している。
例によって、インスタンス名はそのまんまな"colorPicker"でステージに配置。
しかしまーいちいち importしなきゃいけないのが面倒くさいね。といってとりあえず*で全部すませちゃうのもますます迷子になっちゃいそうでねぇ。
デフォルトでは、オーサリングツールで出てくるカラーピッカーみたいな感じのヤツが表示される。colorsプロパティで並べる色を設定できるので、適当な色を設定してみた。
//!-- UTF8
package {
import flash.display.MovieClip;
import fl.controls.ColorPicker;
import fl.events.ColorPickerEvent;
import flash.geom.ColorTransform;
import flash.display.Graphics;
public class MainTimeline extends MovieClip {
public var colorPicker:ColorPicker;
function MainTimeline() {
colorPicker.colors = [ 0, 0xff0000, 0x00ff00, 0x0000ff, 0xeeeeee, 0xffffff ];
colorPicker.addEventListener( ColorPickerEvent.CHANGE, changeHandler );
}
private function changeHandler( e:ColorPickerEvent ):void {
var aimColor:uint = e.target.selectedColor;
graphics.clear();
graphics.beginFill( aimColor );
graphics.drawRect( 100, 100, 200, 200 );
}
}
}で、成果。鳶嶋工房 / User Interface / Terms / カラーピッカー(color picker)
成果の方は、graphicsを使わずに、「着色してみる」で使ったColorTransform使ってみました。
そこで"0xff00ff"みたいなの(というか、実体はフツーの数字ですが)をRGBに分解する必要があるんですが、これを分解するためのプロパティみたいなものを探して、無駄に時間食ってしまいました。
どうもまともにビット演算やって分解するみたいです…プログラマだったらフツーに「ビットシフトしてマスクしてー」とやるとは思いますが、まさかデザイナーにそこを求めるとは思ってなかったので、完全に引っ掛かってしまいました。
↓こんなんです。
r = ( selectedColor >> 16 ) & 0xff;
g = ( selectedColor >> 8 ) & 0xff;
b = selectedColor & 0xff;完全にこんな感じ↓だと思い込んでたよ!
r = selectedColor.red;
g = selectedColor.green;
b = selectedColor.blue;まーアレですね、結局ColorPickerも3時間かかっているという…。極単純なコンポーネント相手に、どーなのこのペース!!
Σc ' _' ) < とびしまこーぼーはすろーらいふをおうえんしています $ σ_σ$ < たんにとろいわけではないのです
君らの親切めかした嘘が痛い。
次は、そこそこ大物、fl.controls.ComboBoxだっ。
とりあえず簡単にドロップダウンリスト(editable = false)として使うことを考えて、コンボボックス(editable = true)としてはまた次の機会に。
ステージに配置、インスタンス名を"dropdownList"とする。"comboBox"じゃないよっ、別もんだよっ。
リストの内容はオーサリングツール上のパラメータパネルのdataProviderを設定。labelとdataを持ったオブジェクトの配列を設定しているようだ。
[ { label:"ラベル", data:"" }, ....]てな感じの。
//!-- UTF8
package {
import flash.display.MovieClip;
import fl.controls.ComboBox;
import flash.events.Event;
public class MainTimeline extends MovieClip {
public var dropdownList:ComboBox;
function MainTimeline() {
dropdownList.addEventListener( Event.CHANGE, changeHandler );
}
private function changeHandler( e:Event ):void {
trace( e.target.selectedItem.data );
}
}
}
e.target.selectedItemを確認してみると、fl.data.SimpleCollectionItemが入っている。
これが何かと問われれば、ほぼ[ { label:"ラベル", data:"" }, ....]なんだけど、ちゃんとクラスとして定義したもの。
まぁアレですな、概ね構造体です。
Σc ' _' ) < アレ説明終わり? $ σ_σ$ <「これくらいみんな分かっているよね」という顔をして自分がよくわかってない事をごまかす技よ!
そーゆー技です。
次に進んでみよう。リストの内容をオーサリング環境で設定するだけでは固定したものしか出せないので、 ActionScriptで設定してみる。dataProviderというやつを使うといいみたい。中味はArrayとかのフツーの値じゃなくてfl.data.DataProviderという特別なオブジェクト。
カンでdropdownList.dataProvider = [ "labelA", "labelB" ];という感じに設定してみる。
「1067: 型 Array の値が、関連しない型 fl.data:DataProvider に暗黙で型変換されています。」
まーそうだろうとは思ったよっ!
さらにカンでdataProviderのコンストラクタにさっきのArrayを渡してみる。dropdownList.dataProvider = new DataProvider( [ "labelA", "labelB" ] );てな感じ。エラーは出ないけど、設定もされないな…ちっ。
オブジェクトのリストの渡してみたらどうだ?[ { label:"labelA" }, { label:"labelB" } ]…うーんダメだな。
…と、今思ったんだが、このdataProviderってMainTimelineのコンストラクタで設定してるから反映されてない気がする。
タイムライン上のフレームスクリプトでdataProviderを設定してみよう。…うわっ設定された。
なんだよっ、リファレンスに書いとけよ!!わかんねーだろ、こんな仕様。
もしかして、dataProviderのコンストラクタにリスト渡しても動いちゃう?…動くやん!! トレヴェルヤン!!、と「007ゴールデンアイ」フリークにしか通用しないような事を言ったところで、次の作戦だ。
と思ったけど、DataProviderはなかなか奥が深そうなので、次回に回す事にした。
今日はここまで。
2011-02-12