映像制作 eラーニングのことならビズバレー
文字サイズの変更 標準 
大きい
ホーム > スタッフブログ
スタッフブログ
k.takahashi
k.taguchi
j.hashimoto
j.katou
y.hotate
m.kawai
s_inomata
m_muraoka
ビズバレーは、東京都 千代田区で活動する、映像制作、DVD、eラーニングを扱う会社です。

今回は、Quad メソッドを使い、簡単な四角形を表示したいと思います。最近、Webやツール系のアプリケーションは、フラットデザインが流行っているため意外とQuadメソッドは役に立ちます。

まず、Starlingを起動するために前準備として、初期設定を行います。

Main.as

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageDisplayState;
	import flash.display.StageScaleMode;
	import starling.core.Starling;
	
	[SWF(frameRate="60", backgroundColor="#FFFFFF")]
	
	public class Main extends Sprite
	{
		private var starling:Starling;
		
		//コンストラクタ
		public function Main()
		{
			//初期設定
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
			stage.displayState = StageDisplayState.NORMAL;

			// 最初に表示するクラス, stageを指定
			starling = new Starling(MainState, stage);
			
			// 描画を開始
			starling.start();
		}
	}
}


MainState.as で、Quadメソッドを使い四角形を描きます。ここでは単純に、Quad(縦幅, 横幅, 色) を指定します。
new Quad(200, 200,0xFFFCC);

MainState.as
package
{
	import starling.display.Quad;
	import starling.display.Sprite;

	public class MainState extends Sprite
	{
		public var square:Quad;
	
		public function MainState()
		{

			square = new Quad(200, 200,0xFFFCC);
			addChild(square);

		}
	}
}

また、下記のようなパラメータを加えることで、表示位置など変えることができます。
square.x = 100;
square.y = 100;
square.alpha = 0.1;

さて、これをAIRシミュレーターで実行すると、縦横200pxの四角形がこのように表示されます。

20141006-1

ここでAIRシミュレーターとスマートフォン(Xperia UL)の表示を重ね比べてみると同じ200pxでも、だいぶ差があることが分かります。これは縦横のステージサイズと画素密度の差からくるものです。PCでFlashを表示するときは、ほとんど気にする必要はありませんでしたが、スマートフォンでは端末により縦横のサイズ、画素密度がバラバラのため、このような違いがでてくるため工夫が必要になります。

20141006-2

この違いの解決の仕方については別の機会に触れようと思います。