インターンの堀口です。最近ほんと寒くなりましたね。

前回に引き続き今回もコンポーネントネタですが、今回はFlashIDEにある
「コンパイルされたクリップに変換」
という機能をつかってちょっぴり得をした気分に浸りませんか?
 

さて、いきなりですが
ラベルつきのボタンを作る必要があるとします。

こんなのです。
 

labelButton.swf



このボタンは
1フレーム目に通常の状態の絵
2フレーム目にマウスオーバー時の絵
その2フレームにかかって、文字を表示するTextFieldが配置されている(インスタンス名:textField)

pori_2_1.png


このような構成のムービークリップです。
(今回はButtonシンボルと呼びます)

このラベルつきボタン君ですが、以下の特徴があります。

対象の制作物中での使用頻度が高い
ラベルの文字は固定ではない。

こんな時、ちまちま一個ずつ作ってたら大変です。

普通はクラスを書いて使い回し出来るようにするかとは思うのです。
Button.as

 

package  {
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.text.TextField;

	public class Button extends MovieClip{
		
		//ボタン上のラベルの文字列を保管しておくプロパティ
		private var _label:String = 'ラベル';
		
		public function Button() {
			stop();
			mouseChildren = false;
			
			//マウスオーバーで2フレーム目に移動
			addEventListener(MouseEvent.MOUSE_OVER, function():void {
				gotoAndStop(2);
			});
			//マウスアウトで1フレーム目に戻る
			addEventListener(MouseEvent.MOUSE_OUT, function():void {
				gotoAndStop(1);
			});
		}

		public function set label(value:String):void {
			_label = value;
			
			// labelプロパティを変更するとtextFieldの文字も変更するようにする。
			textField.text = _label;
		}
		public function get label():String { return _label; }
	}
}

 


こんな感じでButton.asを書いて、Buttonシンボル>リンケージ>クラスにこのButtonクラスを指定すれば、プログラム上からボタンを大量生産できますよね。
もちろん、lebelプロパティをいじればテキストだって異なるButtonが作れます。
しかも配置も大好きなプログラム上で行えますね!

こんな感じです。

var button:Button = new Button();
button.label = 'ラベル';
button.x = 20;
button.y = 30;
addChild(button);



ー>位置指定とか、よけいめんどくさいYO!

これではかわいそうなので
Button.asに一行だけ追加して、出来る奴に生まれ変わってもらいましょう。

labelのsetterの上に以下の一文を追加します。
[Inspectable(defaultValue = "ラベル", name = "label", type = 'String' )]

		[Inspectable(defaultValue = "ラベル", name = "label", type = 'String' )]
		public function set label(value:String):void {
			_label = value;
			
			// labelプロパティを変更するとtextFieldの文字も変更するようにする。
			textField.text = _label;
		}


何をしているかは結果を見ればわかると思うので、先に進みます。

そしたらIDEに戻って、ライブラリ上のButtonシンボルを右クリック>コンパイルされたクリップへ変換

pori_2_2.png



なにかがライブラリに追加されたかと思いますが、これをステージに持ってくると
ボタンとして使えます。だから何?って言われそうですが、こいつの本気はこんなもんじゃないです。

pori_2_3.png



選択している状態でパラメータパネルを開いて下さい、何やら見覚えがある感じの文字列が見えますね
これを編集すると、、、、

pori_2-4.png


!!!


もう好きなだけステージに配置して使っちゃって下さい。
#IDE上で表示が崩れる事がありますが、パブリッシュすればなおります。

平気そうなら、元のButtonシンボルは削除するか、リンケージを解除して下さい。
コンパイル時にコンフリクトします。

それでは!快適コンパイルされたクリップ生活を!

#今回はコンパイルされたクリップに変換しましたが、同様のメニューでSWCファイル書き出しを選ぶと、他のflaでもコンポーネントとして使えるようになります。

HTML5飯