Flexコンポーネントには、graphicsプロパティがあり、このプロパティを通してコンポーネント上に図形などの各種描画を行うためのGraphicsオブジェクトにアクセスすることができます。

graphicsプロパティで図形描画を行う手順は、まず線や塗りつぶしなどの属性を設定し、それから図形描画APIを呼び出すことで、指定された属性で図形を描く、という流れです。

たとえば以下のmxmlは、「hellowという文字列のラベルを作成し、ラベルがクリックされたらラベルの左上から直線を引く」Flashのソースになります。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:Script>

		public function test():void {

			label1.graphics.lineStyle(1);
			label1.graphics.moveTo(0, 0);
			label1.graphics.lineTo(20, 20);

		}

	</mx:Script>

	<mx:Label id="label1" text="hellow" click="test()"/>

</mx:Application>

このサンプルでは、まずlineStyleで線の属性(太さ1ポイント、それ以外はデフォルト)を設定し、ラベルの右上端から(20,20)に向けて直線を引いています。

オブジェクトとして表示されるコンポーネントの多くはgraphicsプロパティを持っていて描画可能になっています。ただ、実際にFlashの中で描画を行う際は、Spriteなど描画内容を保持するためのコンポーネントを使うことになるでしょう。

上のサンプルを、「ラベルがクリックされたらSpriteオブジェクトを作成し、直線を描画、20,100の位置に配置」するよう変更してみましょう。ラベルがクリックされたときに実行されるイベント処理関数test()内の処理を、Spriteオブジェクトの生成と描画を行うよう書き換えます。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:Script>

		public function test():void {

			var sp:Sprite = new Sprite();

			sp.graphics.lineStyle(1);
			sp.graphics.moveTo(0, 0);
			sp.graphics.lineTo(20, 20);

			sp.x = 20;
			sp.y = 100;

			stage.addChild(sp);

		}

	</mx:Script>

	<mx:Label id="label1" text="hellow" click="test()"/>

</mx:Application>

ラベルをクリックすると、黒い斜線が引かれたSpriteが追加されるようになりました。さらに、塗りつぶし属性を指定して塗りつぶし図形を描いたり、複数のSprtiteを重ねて描画処理の優先順位を設定する、アルファ値を指定して半透明描画を行う、といったことも可能です。

GraphicsとSpriteを扱えるようになれば、ゲームのキャラクタを描いたり多彩な視覚効果を実現することもできるようになりますね。


創作プログラミングの街 > Flex(FLASH/AIR)実験室