Flashゲーム講座＆ASサンプル集【Flash の画面表示について】

Flash の画面表示について

・	スケールモードを設定したい(Flash 6 以降)
・	ウインドウのサイズを調べたい(Flash 6 以降)
・	整列する位置を指定したい(Flash 6 以降)
・	フルスクリーンで表示したい
・	9 スライスの拡大/縮小を使用したい(Flash 8 以降)
・	ハードウェアスケーリングを使用したい(Flash 9 以降)

前のページに戻る

スケールモードを設定したい(Flash 6 以降)

■スケールモードとは？

Flash には、 4 通りの拡大表示設定があります。右クリックメニューからは、『100 % 表示』と『すべて表示』の 2 種類が選択できます。どんな動作をするかはサンプルを開いて確認できます。

スケールモードを変更するには Stage.scaleMode プロパティに下の表にある文字列を設定します。

文字列	効果
noScale	100 % 表示
showAll	すべて表示
noBorder	外が表示されないようアスペクト比を維持して表示
exactFit	上下左右がフィットするように表示

■100 % 表示

サンプル表示（別窓）

サンプルをダウンロード

stage_00_00_fla06_as1.fla Macromedia Flash MX ActionScript1.0

スケールモードを「 100% 表示」に変更する


Stage.scaleMode = "noScale";

■すべて表示

サンプル表示（別窓）

サンプルをダウンロード

stage_00_01_fla06_as1.fla Macromedia Flash MX ActionScript1.0

スケールモードを「すべて表示」に変更する


Stage.scaleMode = "showAll";

■外が表示されないようアスペクト比を維持して表示

サンプル表示（別窓）

サンプルをダウンロード

stage_00_02_fla06_as1.fla Macromedia Flash MX ActionScript1.0

スケールモードを「外が表示されないように表示」に変更する


Stage.scaleMode = "noBorder";

■上下左右がフィットするように表示

サンプル表示（別窓）

サンプルをダウンロード

stage_00_03_fla06_as1.fla Macromedia Flash MX ActionScript1.0

スケールモードを「上下左右がフィットするように表示」に変更する


Stage.scaleMode = "exactFit";

上に戻る

ウインドウのサイズを調べる

サンプル表示（別窓）

サンプルをダウンロード

stage_01_fla06_as1.fla Macromedia Flash MX ActionScript1.0

■ウィンドウのサイズを調べる

ウィンドウの幅と高さを取得するには、Stage.width プロパティと Stage.height プロパティを調べます。

■ ウィンドウ（クライアント領域）のサイズを調べる

スケールモードを "noScale" に設定している場合は、Flash が描画されているクライアント領域のサイズを取得できます。

Flash Player のクライアント領域のサイズを調べる


Stage.scaleMode = "noScale";	// 100 % 表示
var w = Stage.width;		// 縦
var h = Stage.height;		// 横

■ Flash のサイズを調べる

スケールモードを "exactFit" に設定している場合は、Flash のサイズを取得できます。

Flash Player のサイズを調べる


Stage.scaleMode = "exactFit";	// 上下左右フィット
var w = Stage.width;		// 縦
var h = Stage.height;		// 横

■ Flash Player がリサイズされたか監視する

ウィンドウのドラッグ等により、Flash Player のサイズが変更されたかを調べるには、onResize イベントを使用します。

このイベントは、スケールモードを "noScale" に設定している場合にのみ動作します。

１．スケールモードを 100 % 表示にする

まず、スケールモードを "noScale" に設定します。

Flash Player のサイズを調べる


Stage.scaleMode = "noScale";	// 100 % 表示

２．コールバック関数登録用のオブジェクトを作成する

適当なオブジェクトを作成し、onResize というプロパティに、リサイズされたときに呼び出したい関数を代入します。

オブジェクトを作成する


Stage.scaleMode = "noScale";	// 100 % 表示

var obj = new Object ();
obj.onResize = function () {
	trace("幅:" + Stage.width);
	trace("高さ:" + Stage.height);
};

３．イベントリスナーに登録する

addListener() メソッドを使ってオブジェクトを登録すると、リサイズされるたびに関数が呼び出されるようになります。

オブジェクトを作成する


Stage.scaleMode = "noScale";	// 100 % 表示

var obj = new Object ();
obj.onResize = function () {
	trace("幅:" + Stage.width);
	trace("高さ:" + Stage.height);
};

Stage.addListener (obj);	// イベントリスナーに登録

４．イベントリスナー登録を解除する

removeListener() メソッドを使うと登録を解除できます。

イベントリスナー登録を解除する


Stage.scaleMode = "noScale";	// 100 % 表示

var obj = new Object ();
obj.onResize = function () {
	trace("幅:" + Stage.width);
	trace("高さ:" + Stage.height);
};

Stage.addListener (obj);
Stage.removeListener (obj);

上に戻る

整列する位置を指定したい

サンプル表示（別窓）

サンプルをダウンロード

stage_02_fla06_as1.fla Macromedia Flash MX ActionScript1.0

■ 整列する位置を指定する

スケールモードが "noScale" のときに、Flash Player のスクリーン画面のどこに整列して描画するかを指定するには、Stage.align プロパティを使用します。

下にある表から好きな文字列を代入します。

整列する位置	プロパティ値
左上	"TL"
上	"T"
右上	"TR"
左	"L"
中央	""
右	"R"
左下	"BL"
下	"B"
右下	"BR"

左上に整列


Stage.scaleMode = "noScale";	// 100 % 表示
Stage.align = "TL";	// 整列する位置を設定

上に戻る

フルスクリーンで表示したい

サンプル表示（別窓）

サンプルをダウンロード

stage_03_00_fla05_as1.fla MacroMedia Flash 5

stage_03_01_fla05_as1.zip ZIP ファイル

フルスクリーン表示をするには以下の方法があります。

■フルフラッシュで表示する

■ブラウザにて JavaScript を使用する

■スタンドアローンプレイヤーのフルスクリーン機能を使用する

■Flash Player のフルスクリーン表示機能を使用する(Flash 9 以降)

■フルフラッシュで表示する

ブラウザのクライアント領域全体に Flash が表示されるようにします。

object タグと embed タグの width と height を 100 % に変更します。

body タグの margin をすべて 0px に変更します。

例) test.swf をフルフラッシュ表示する




<title>フルフラッシュ</title>
</head>

<body bgcolor="#ffffff" style="margin:0px;">

	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
		codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
		width="100%" height="100%" id="test" align="middle">

		<param name="allowScriptAccess" value="sameDomain" />
		<param name="allowFullScreen" value="false" />
		<param name="movie" value="test.swf" />
		<param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />
		<embed src="test.swf" quality="high" bgcolor="#ffffff" width="100%" height="100%" name="test" 
			align="middle" allowScriptAccess="sameDomain" allowFullScreen="false"
			type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_jp" />
	</object>

</body>
</html>

■ブラウザにて JavaScript を使用する

javascript を使ってフルスクリーン表示する例です。ブラウザでのみ動作します。ブラウザによっては動作しなかったり外側に枠が付いたりと挙動が違います。

下は test.swf ファイルをフルスクリーン表示するタグの記述例です。

例) test.swf をフルスクリーン表示する


<a href='javascript:window.open("test.swf","stage","fullscreen=yes")'>フルスクリーン表示</a>

Flash 側からウィンドウを閉じるには、以下のように JavaScript を呼び出します。

例) ウィンドウを閉じる


getURL ("javascript:window.close();");

■スタンドアローンプレイヤーのフルスクリーン機能を使用する

fscommand を使ってフルスクリーン表示を切り替える例です。スタンドアローンプレイヤーでのみ動作します。

例) フルスクリーン表示


fscommand ("fullscreen", "true");

例) ウインドウ表示


fscommand ("fullscreen", "false");

例) Flash を終了する


fscommand ("quit");

■Flash Player のフルスクリーン表示機能を使用する(Flash 9 以降)

サンプルをダウンロード

stage_03_02_fla09_as2.fla Adobe Flash CS3

Flash Player 9.0.28.0 からフルスクリーン表示がサポートされました。フルスクリーン表示にするためには、Stage.displayState プロパティを使用します。このプロパティに以下の表にある文字列を代入します。

状態	文字列
通常	"normal"
フルスクリーン	"fullScreen"

フルスクリーン表示の切り替えは、セキュリティの都合上ユーザーが意図せずに行われるべきではないという事で、必ずマウスイベント中か、キーボードイベント中に記述する必要があります。操作していないときにプロパティを変更しても何も起こりません。

ボタンが押されたらフルスクリーン表示に変更する


on (release) {
	Stage.displayState = "fullScreen";
}

ブラウザ用の Flash Player で動作させる場合は、HTMLタグの allowFullScreen という属性をすべてtrue に変更してください。

フルスクリーンを許可する(FlashCS3 のパブリッシュで書き出したタグの場合)


<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js.");
	} else {
		AC_FL_RunContent(
			（略）
			'allowFullScreen', 'true',
			（略）
			); //end AC code
	}
</script>
<noscript>
	<object （略）>
	（略）
	<param name="allowFullScreen" value="true" />
	（略）
	<embed （略） allowFullScreen="true" （略） />
	</object>
</noscript>

ブラウザ用の Flash Player でフルスクリーン表示している間は、キーボード操作を使用することができません。テキストフィールドなどの機能も使用できません。

フルスクリーン表示は、ハードウェアアクセラレーションを使って高速に表示する事が出来ます。詳しくはこちら。

上に戻る

9 スライスの拡大/縮小を使用したい(Flash8以降)

サンプルをダウンロード

stage_04_fla08_as1.fla Macromedia Flash 8 ActionScript1.0

■ 9 スライスの拡大/縮小とは？

下のような絵を描いたムービークリップを用意したとします。

図のように赤い部分を矩形として設定します。

この状態でムービークリップを拡大縮小すると、下のような絵のスケーリングが適用されます。

具体的には、
矩形の外側である左上、右上、左下、右下部分は拡縮しません。
矩形の外側である左と右部分は上下方向のみ拡縮します。
矩形の外側である上と下部分は左右方向のみ拡縮します。

用途としては、枠の太さを変えずにサイズを変更したいボタンやウィンドウのような物を表現するのに向いているでしょう。

後、回転を適用すると、効果が無くなります。

■ 9 スライスの拡大/縮小を設定する

ムービークリップに scale9Grid というプロパティがあるので Rectangle オブジェクトを渡して矩形を設定します。

ムービークリップ mc に 9 スライスの拡大/縮小を設定する(AS1.0)


mc.scale9Grid = new flash.geom.Rectangle(-25, -25, 50, 50);

ムービークリップ mc に 9 スライスの拡大/縮小を設定する(AS2.0)


import new flash.geom.Rectangle;
mc.scale9Grid = new Rectangle(-25, -25, 50, 50);

上に戻る

ハードウェアスケーリングを使用したい(Flash 9 以降)

サンプルをダウンロード

stage_05_fla09_as2.fla Adobe Flash CS3

■Flash のサイズが大きいほどと処理負荷は跳ね上がる

画面の 1 ドットを描くコストを１としてみます。

[幅 400 高さ 300] の画面をすべて描くには、400 * 300 = 120000 ドットなので 120000 コストがかかります。

ではこの 2 倍の解像度である [幅 800 高さ 600] の画面をすべて描画したらどうなるでしょう。

800 * 600 = 480000 ドットなので 480000 コストがかかります。

解像度を 2 倍にすると 4 倍も処理負荷がかかる事になります。(注.いろんな最適化が考えられるので単純に 4 倍という事はありません…)

モニタの解像度の１つである [幅 1280 高さ 1024] だと 1310720 コストとなり約 11 倍相当の負荷となります。

モニタの解像度の１つである [幅 1920 高さ 1200] だと 2304000 コストとなり約 19 倍相当の負荷となります。

解像度が大きくなるほど描画コストが跳ね上がる事がわかります。

■高速で大きい画面サイズを得る方法を考えてみる

フルスクリーンのような超巨大な画面サイズで Flash を表示する事はとても重い処理ですが、何とか巨大な画面サイズで高速で表示できる方法を考えてみます。

高解像度の状態で描画処理を行うのではなく、低解像度の状態でいったんすべて描画してしまい１枚の低解像度のビットマップにします。

その絵を、１回だけ拡大描画して高解像度のサイズにフィットさせます

→

こうする事で、

「低解像度の描画＋ビットマップ１枚を拡大描画」する程度の描画負荷で、大きい画面に表示する事が出来ます

欠点もあります。ドロー形式の素材をラスタ形式に変換してから拡大表示するので、ベクターグラフィックはすべてエッジが汚くなります。

ビットマップグラフィックは拡大され、ドットが荒く表示されます。

■ハードウェアスケーリングとは？

上記の一連の処理は自前で実装する事もできますが、ハードウェアスケーリングを使用すると同様の処理を自動的に行ってくれます。

ハードウェアスケーリングはフルスクリーン時のみ動作します。

ハードウェアスケーリングを使用すると。「 Flash が通常のサイズで描画したときの解像度の絵」を、ビデオカード等のハードウェアがモニタ一杯まで拡大して表示してくれます。

もし、ユーザーがハードウェアアクセラレーションの設定を ON にしている場合は、 GPU で高速に処理されます。

OFF にしている場合は GPU が使われずに CPU だけで演算が行われます。しかしそれでも普通に表示するよりは早いです。

■ハードウェアスケーリングを使用する

ハードウェアスケーリングを使用するには、Stage.fullScreenSourceRect プロパティを使用します。このプロパティにRect型のオブジェクトを渡して拡大したい矩形範囲を指定します。通常は、Flash のサイズを指定するといいでしょう。

このプロパティは、フルスクリーンではないときに設定する必要があります。

(x:0,y:0,w:100,h:200)の矩形サイズをフルスクリーン時にハードウェアスケーリング表示を行う(AS1.0)


mc.onPress = function(){
	Stage.displayState = "normal";
	Stage.fullScreenSourceRect = new flash.geom.Rectangle(0, 0, 100, 200);
	Stage.displayState = "fullScreen";
}

(x:0,y:0,w:100,h:200)の矩形サイズをフルスクリーン時にハードウェアスケーリング表示を行う(AS2.0)


import flash.geom.Rectangle;

mc.onPress = function(){
	Stage.displayState = "normal";
	Stage.fullScreenSourceRect = new Rectangle(0, 0, 100, 200);
	Stage.displayState = "fullScreen";
}

■ハードウェアスケーリングを使用しない

GPU を使用せずに CPU でフルスクリーン表示を行う場合は、Stage.fullScreenSourceRect プロパティに null を指定します。

このプロパティは、フルスクリーンではないときに設定する必要があります。

ハードウェアスケーリングを使用しない


mc.onPress = function(){
	Stage.displayState = "normal";
	Stage.fullScreenSourceRect = null;
	Stage.displayState = "fullScreen";
}

上に戻る

前のページに戻る