FlexのちょっとしたTipsと講座(1)

FlashでActionScriptをちょっと触ったことがある程度の素人プログラマーが、Flexに挑戦してみた。最初は訳が分からなかったものの、コツが掴めればサクサクと進められたので、その軌跡を書き残そうと思う。

1. 開発環境

私はMacOSを使っているので、残念ながらFlashDevelopは使えず。FlexBuilderはどうも気が乗らなかったので、TextMateにプラグインを入れようと四苦八苦したものの、結局コンパイルは遅いし、初心者にとっては保管が弱いのは致命的だったので素直にFlexBuilderを使うことに。

ちなみになるべくmxmlは使わず、できるだけスクリプトで記述するように努めてみた。

これを





	<mx:Script>

	<![CDATA[

		import mx.controls.Image;

		

		public function init():void {

			var img:Image = new Image();

			img.source = "assets/img/test.png";

			addChild(img);

		}

		

	] ]>

	</mx:Script>

</mx:Application>

としている。こうすると長くなるけども、クラスの関係やaddChild() の意味など、Flexとは何かがよくわかるので。

2. LabelとSprite

試しになにか描画をしてみる。Flexでは変数の宣言は以下のようにして行う。

var label:Label = new Label();

Labelコントロールはリファレンスで "Label コントロールは、編集することのできない、単一行から成るテキストを表示します。複数行にわたる編集不可能なテキストのブロックを作成するには、Text コントロールを使用します。" とされています。

早速、お決まりのあれを表示させてみる。





	<mx:Script>

	<![CDATA[

		import mx.controls.Label;

		

		private function init():void {

			var label:Label = new Label();

			label.text = "Hello! World";

			

			this.addChild(label);

		}

		

	] ]>

	</mx:Script>

お決まりのあれ

これはmxmlで記述すると、こんな風になる。

以下、内のみ記述する。次に、Sprite を用いて円を描画してみる。先ほどのLabel の例の通りに書くと、

private function init():void {

	var sprite:Sprite = new Sprite();

	sprite.graphics.lineStyle(10, 0xFFFFFF);

	sprite.graphics.drawCircle(30, 30, 30);

	

	this.addChild(sprite);

}

となるが、これでは動かない。それだけならまだしも、コンパイル時にエラーをはかなければ、動作時にメッセージも何も表示してくれない。addChild() の引数はDisplayObject型である必要があるらしいが、実際にはUIComponent のサブクラスでなくてはならない。かといって一々UIComponent を継承したクラスを作成するのも手間なので、普段はこういった形で対応する。

import mx.core.UIComponent;private function init():void {

	var stage:UIComponent = new UIComponent();

	this.addChild(stage);

	

	var sprite:Sprite = new Sprite();

	sprite.graphics.lineStyle(10, 0xFFFFFF);

	sprite.graphics.drawCircle(30, 30, 30);

	

	stage.addChild(sprite);

}

Spriteで描画

3. Imageを描画する

import mx.controls.Image;private function init():void {

	var image:Image = new Image();

	image.source = "assets/img/myimage.jpeg";

	image.x = 30;

	image.y = 30;

	

	this.addChild(image);

}

画像を描画

たったこれだけですが、mxmlで書くと更に短くなる。

ただ、あくまでもスクリプトでやり通す方が良いでしょう。鏡面加工など細かいプログラムを書く際には、mxmlでは難しいですので。

ちなみに、画像やcss は以下のようにassetsディレクトリーに入れるのが慣例のようです。

assetsに入れるのが慣例

今回はこんなところで。