2010年04月10日

ボタンコンポーネント

OOPから離れて、コンポーネントの勉強に移ります。

コンポーネント

これはParaFlaには無かった機能ですね。
AdobeFlashには、予め、FLVプレイヤーやら、スクローラー付きテキストなどの機能を簡単に使えるようにしてあるみたい。
これらをコンポーネントというようだ。

CS4を起動し、AS3.0で新規ドキュメントの作成
[ウィンドウ] → [コンポーネント]で、コンポーネントのパネルを表示する。

そこには、User Interface と Video に分かれている。
カラーピッカーもあるのか。
昔、パラフラでカラーピッカーを作ろうとしたことがあったんだけど、16進数のカラーコードからRGBの表示に変換して、座標を割り出すのに小数点の処理が上手くいかず断念したんだよね・・・。
こんなのがあるなら、もう一度挑戦してみようかなぁ。そのうち・・・ねw


さて、AS3.0コンポーネントリファレンスガイドを覗いてみる。

パッケージの欄をみると fl. で始まるクラスと、 flash. で始まるクラスがある。
このfl. で始まるクラスが、コンポーネントを使うときに使用できるメソッドやプロパティが含まれたクラスになる。


ボタンコンポーネント

では、試しにボタンコンポーネントを使って、トグルボタンを作ってみる。

[ウィンドウ] → [コンポーネント]で、コンポーネントのパネルを表示して、
Buttonをライブラリにドラッグ&ドロップする。

ライブラリにボタンシンボルとコンポーネントアセットフォルダが追加される。
ボタンのリンケージには fl.contronls.Button と書かれてある。


次にボタンを配置したいフレームにアクションスクリプトを書いていく。

//ボタンクラスをインポート
import fl.controls.Button;

//インスタンス生成
var btn:Button = new Button();

//ステージに配置(AS2.0のattachみたいな感じ)
addChild(btn);

ここでプレビューすると図のようになる。


サイズと座標指定
座標の基準点は左上で、ピクセル値で指定。
赤色が追加部分
//ボタンクラスをインポート
import fl.controls.Button;

//インスタンス生成
var btn:Button = new Button();

//サイズ指定(width, height)
btn.setSize(200, 60);

//座標(X, Y)
btn.move(50,20);

//ステージに配置(AS2.0のattachみたいな感じ)
addChild(btn);

button4.bmp


ボタンのテキストの編集
TextFormatを使って文字装飾を変更する。
プロパティは、AS3.0からアンダーバー( _ )が付かないので注意。
最後にButton.setStyle()メソッドで、作成したTextFormatを設定する。
Button.setStyle('スタイルプロパティ名',スタイルの値)
スタイルプロパティ名は "textFormat" にする。(大文字/小文字に注意)
下ように import を先に書いて、TextFormatはボタン設定より前に書くのがお作法のようだ。

//ボタンクラスをインポート
import fl.controls.Button;

//テキストフォーマットの作成
var format:TextFormat = new TextFormat();
format.font = "Arai"; //文字の種類
format.size = 20; //サイズ
format.bold = true; //太さ
format.color = 0xff5500; //色


//インスタンス生成
var btn:Button = new Button();

//サイズ指定(width, height)
btn.setSize(200, 60);

//座標(X, Y)
btn.move(50,20);

//ラベル設定
btn.label = "toggle"; //ボタンの表示名
btn.setStyle("textFormat", format);


//ステージに配置(AS2.0のattachみたいな感じ)
addChild(btn);

button5.bmp


ボタンの背景を変える
デフォルトの状態では、下の絵のように設定されている。
button6.bmp

これを、下の絵のように背景を変更してみる。
button7.bmp


まず、UP、OVER、DOWNの時の画像を3枚用意する。
新規でムービークリップを作成し、UP画像を配置。
リンケージをupImageにする。OVER、DOWNもそれぞれ作成する。
”定義されていない〜”といった警告が出るけど、たぶん無視でOK。(下の補足を参照)
button8.bmp

これらをボタンに適用するには、setStyle()を使う。
スタイルプロパティは、以下の通り。値はリンケージで書いた名前。
・UP → "upSkin"
・DOWN → "downSkin"
・OVER → "overSKkin"
//ボタンクラスをインポート
import fl.controls.Button;

//テキストフォーマットの作成
var format:TextFormat = new TextFormat();
format.font = "Arai"; //文字の種類
format.size = 20; //サイズ
format.bold = true; //太さ
format.color = 0xff5500; //色

//インスタンス生成
var btn:Button = new Button();

//サイズ指定(width, height)
btn.setSize(200, 60);

//座標(X, Y)
btn.move(50,20);

//ラベル設定
btn.label = "toggle"; //ボタンの表示名
btn.setStyle("textFormat", format);

//スキン設定
btn.setStyle("upSkin", new upImage());
btn.setStyle("overSkin", new overImage());
btn.setStyle("downSkin", new downImage());


//ステージに配置(AS2.0のattachみたいな感じ)
addChild(btn);

【補足】
AS3.0では、どうやらリンケージ識別子は使わないようだ。
カスタムクラスを作って、"基本クラス"ってのがスーパークラスになるみたい。
その作ったクラスが定義されてないから、警告が出るってことだと思う。
だから、setStyle()の値も、new演算子を使ってインスタンスを生成するということか。

挿絵画像を使う場合
これもsetStyle()を使う。
スタイルプロパティは、upIcon, overIcon, downIconとなり、背景を変える時と同じように設定する。
overなどで画像を変えない場合は"Icon"を使う。
//ボタンクラスをインポート
import fl.controls.Button;

//テキストフォーマットの作成
var format:TextFormat = new TextFormat();
format.font = "Arai"; //文字の種類
format.size = 20; //サイズ
format.bold = true; //太さ
format.color = 0xff5500; //色

//インスタンス生成
var btn:Button = new Button();

//サイズ指定(width, height)
btn.setSize(200, 60);

//座標(X, Y)
btn.move(50,20);

//ラベル設定
btn.label = "toggle"; //ボタンの表示名
btn.setStyle("textFormat", format);

btn.setStyle("upSkin", new upImage());
btn.setStyle("overSkin", new overImage());
btn.setStyle("downSkin", new downImage());


//アイコン設定
btn.setStyle("icon", new icon());


//ステージに配置(AS2.0のattachみたいな感じ)
addChild(btn);


アイコンと文字の位置を変更するには、labelPlacementプロパティで設定するが、このプロパティは、fl.control.ButtonLabelPlacement クラスで定義されている定数を使うので、このクラスをインポートしないといけない。
新しいクラスを使う度に付け足していくのは面倒なので、ワイルドカード(*)を使ってパッケージごとインポートする。
パブリッシュするときに、必要なクラスだけがインポートされるので、容量には関係しないらしい。
import fl.controls.*;

labelPlacementは、アイコン画像を基準に、ラベルの位置を調節する。
値は"top","right","bottom","left"のいずれかを指定。
デフォルトは"right"になっている模様。

//controlsパッケージをインポート
import fl.controls.*;


//テキストフォーマットの作成
var format:TextFormat = new TextFormat();
format.font = "Arai"; //文字の種類
format.size = 20; //サイズ
format.bold = true; //太さ
format.color = 0xff5500; //色

//インスタンス生成
var btn:Button = new Button();

//サイズ指定(width, height)
btn.setSize(200, 60);

//座標(X, Y)
btn.move(50,20);

//ラベル設定
btn.label = "toggle"; //ボタンの表示名
btn.setStyle("textFormat", format);

btn.setStyle("upSkin", new upImage());
btn.setStyle("overSkin", new overImage());
btn.setStyle("downSkin", new downImage());

//アイコン設定
btn.setStyle("icon", new icon());

//アイコンとテキストの位置設定
btn.labelPlacement = "left";


//ステージに配置(AS2.0のattachみたいな感じ)
addChild(btn);

button9.bmp


トグルボタン設定
トグルボタンにするには、toggleプロパティをtrueにする。
selectedプロパティで、初期設定を行う。いずれもBoolean値。
先に背景画像を指定したが、このままではselected=true(初期:falseの場合)の場合にデフォルト設定に戻るので、setStyle()で"selectedUpSkin","selectedOverSkin","selectedDownSkin"をそれぞれ設定する。

テキストを変更するには、イベントリスナーを使う。
toggle=trueにすると、ボタンを押されたときchangeイベントが送出されるので、イベントリスナーでこれをキャッチして、リスナー関数で処理する。
//controlsパッケージをインポート
import fl.controls.*;

//テキストフォーマットの作成
var format:TextFormat = new TextFormat();
format.font = "Arai"; //文字の種類
format.size = 20; //サイズ
format.bold = true; //太さ
format.color = 0xff5500; //色

//インスタンス生成
var btn:Button = new Button();

//サイズ指定(width, height)
btn.setSize(200, 60);

//座標(X, Y)
btn.move(50,20);

//トグルボタン設定
btn.toggle = true;
btn.selected = false;

//ラベル設定
btn.label = "toggle : " + btn.selected; //ボタンの表示名
btn.setStyle("textFormat", format);


//スキン設定
btn.setStyle("upSkin", new upImage());
btn.setStyle("overSkin", new overImage());
btn.setStyle("downSkin", new downImage());
btn.setStyle("selectedUpSkin", new upImage());
btn.setStyle("selectedOverSkin", new overImage());
btn.setStyle("selectedDownSkin", new downImage());


//アイコン設定
btn.setStyle("icon", new icon());

//アイコンとテキストの位置設定
btn.labelPlacement = "left";

//イベントリスナーの登録
btn.addEventListener(Event.CHANGE, f_toggle);


//ステージに配置(AS2.0のattachみたいな感じ)
addChild(btn);

//イベントを処理する関数を定義
function f_toggle(event:Event){
btn.label = "toggle : " + btn.selected;
}


ハンドカーソルにする
座標設定の後ろあたりに追加。
//ハンドカーソル設定
btn.useHandCursor = true;











Button_component.fla

なんというか・・・自分でボタン作ったほうが速い気がする。

posted by K at 18:45| Comment(0) | コンポーネント | このブログの読者になる | 更新情報をチェックする