Flashゲーム講座 & アクションスクリプトサンプル集


Flash の画面表示について



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

前のページに戻る



ステージのサイズを取得する

　
サンプル表示（別窓）

サンプルをダウンロード
stage_01_fla06_as1.flaMacromedia Flash MX ActionScript1.0
　


■ステージのサイズを取得する

　
ステージの幅と高さを取得するには、以下のプロパティを使用します。
　
プロパティ名 解説
Stage.width ステージの幅
Stage.height ステージの高さ
　
ステージの幅と高さを調べる

// ステージの幅を取得する
var stage_width  = Stage.width;

// ステージの高さを取得する
var stage_height = Stage.height;

// 出力テスト
trace("w:" + stage_width + " h:" + stage_height);
　
■クライアント領域のピクセルサイズを取得する
　
スケールモードを "noScale" に設定します。
　
この状態で、ステージの幅と高さを取得します。
　
クライアント領域のピクセルサイズを取得する

// ------------------------------------------------------------
// スケールモードを取得する
// ------------------------------------------------------------
var scale_mode = Stage.scaleMode;


// ------------------------------------------------------------
// クライアント領域のピクセルサイズを調べる
// ------------------------------------------------------------
// スケールモードを "noScale" に設定する
Stage.scaleMode = "noScale";

// ステージの幅を取得する
var stage_width  = Stage.width;

// ステージの高さを取得する
var stage_height = Stage.height;

// 出力テスト
trace("w:" + stage_width + " h:" + stage_height);


// ------------------------------------------------------------
// スケールモードを元に戻す
// ------------------------------------------------------------
Stage.scaleMode = scale_mode;
　
■ Flash のピクセルサイズを取得する
　
スケールモードを "exactFit" に設定します。
　
この状態で、ステージの幅と高さを取得します。
　
Flash のピクセルサイズを取得する

// ------------------------------------------------------------
// スケールモードを取得する
// ------------------------------------------------------------
var scale_mode = Stage.scaleMode;


// ------------------------------------------------------------
// Flash のピクセルサイズを取得する
// ------------------------------------------------------------
// スケールモードを "exactFit" に設定する
Stage.scaleMode = "exactFit";

// ステージの幅を取得する
var stage_width  = Stage.width;

// ステージの高さを取得する
var stage_height = Stage.height;

// 出力テスト
trace("w:" + stage_width + " h:" + stage_height);


// ------------------------------------------------------------
// スケールモードを元に戻す
// ------------------------------------------------------------
Stage.scaleMode = scale_mode;
　
　


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

　
Flash Player がリサイズされたか監視するには、ステージイベントリスナーを使用します。
　
イベントリスナーについて
　
イベントハンドラを使用すると、一人のハンドラーがイベント通知を得ることができます。
　
イベントリスナーを使用すると、複数のリスナーがイベント通知を得ることができます。
　
ステージイベントリスナーを使用すると、ステージ関係のイベント通知を知ることができます。
　
オブジェクトを作成する
　
オブジェクトを作成します。
　
このオブジェクトは、リスナーに相当します。
　
オブジェクト作成

// オブジェクトを作成
var listener = new Object();
　
オブジェクトに関数を登録する
　
オブジェクトに、以下のプロパティを追加します。
　
各プロパティには、コールバック関数を登録します。
　
プロパティ名 解説
onResize Flash Player がリサイズされるたびに実行されるイベント
　
オブジェクトに関数を登録

// オブジェクトを作成
var listener = new Object();

// Flash Player がリサイズされるたびに実行されるイベント
listener.onResize = function (){
	trace("Flash Player がリサイズされた");
};
　
onResize イベントについて
　
onResize イベントは、スケールモードが、"noScale" であるときのみ動作します。
　
スケールモードを "noScale" に設定する

// スケールモードを "noScale" に設定する
Stage.scaleMode = "noScale";
　
リスナーを登録する（リッスンを開始する）
　
システムにリスナーを登録するには、Stage.addListener() メソッドを使用します。
　
引数に、「コールバック関数をセットしたオブジェクト」を渡します。
　
これで、マウスの入力があるたびに、コールバック関数が実行されるようになります。
　
リッスンを開始する

// ------------------------------------------------------------
// スケールモードを "noScale" に設定する
// ------------------------------------------------------------
Stage.scaleMode = "noScale";


// ------------------------------------------------------------
// リスナー用オブジェクトを作成
// ------------------------------------------------------------
// オブジェクトを作成
var listener = new Object();


// ------------------------------------------------------------
// リスナーにコールバック関数を登録
// ------------------------------------------------------------
// Flash Player がリサイズされるたびに実行されるイベント
listener.onResize = function (){
	trace("w:" + Stage.width);
	trace("h:" + Stage.height);
};


// ------------------------------------------------------------
// システムにリスナーを登録
// ------------------------------------------------------------
// リスナーを登録（リッスンを開始する）
Stage.addListener( listener );
　
リスナーを除外する（リッスンを終了する）
　
イベント通知を止めたいときは、Stage.removeListener() メソッドを使用します。
　
引数に、「Stage.addListener() メソッドの引数で指定したオブジェクト」と同じものを渡します。
　
リッスンを終了する

// ------------------------------------------------------------
// スケールモードを "noScale" に設定する
// ------------------------------------------------------------
Stage.scaleMode = "noScale";


// ------------------------------------------------------------
// リスナー用オブジェクトを作成
// ------------------------------------------------------------
// オブジェクトを作成
var listener = new Object();


// ------------------------------------------------------------
// リスナーにコールバック関数を登録
// ------------------------------------------------------------
// Flash Player がリサイズされるたびに実行されるイベント
listener.onResize = function (){
	trace("w:" + Stage.width);
	trace("h:" + Stage.height);
};


// ------------------------------------------------------------
// システムにリスナーを登録
// ------------------------------------------------------------
// リスナーを登録（リッスンを開始する）
Stage.addListener( listener );

// リスナーを除外（リッスンを終了する）
Stage.removeListener( listener );
　
　
上に戻る



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

　
　


■スケールモードとは？

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

スケールモードを変更するには Stage.scaleMode プロパティに下の表にある文字列を設定します。
　
文字列 効果
noScale 100 % 表示
showAll すべて表示
noBorder 外が表示されないようアスペクト比を維持して表示
exactFit 上下左右がフィットするように表示
　



■100 % 表示

　
サンプル表示（別窓）

サンプルをダウンロード
stage_00_00_fla06_as1.flaMacromedia Flash MX ActionScript1.0
　
スケールモードを「 100% 表示」に変更する

Stage.scaleMode = "noScale";
　



■すべて表示

　
サンプル表示（別窓）

サンプルをダウンロード
stage_00_01_fla06_as1.flaMacromedia Flash MX ActionScript1.0
　
スケールモードを「すべて表示」に変更する

Stage.scaleMode = "showAll";
　



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

　
サンプル表示（別窓）

サンプルをダウンロード
stage_00_02_fla06_as1.flaMacromedia Flash MX ActionScript1.0
　
スケールモードを「外が表示されないように表示」に変更する

Stage.scaleMode = "noBorder";
　



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

　
サンプル表示（別窓）

サンプルをダウンロード
stage_00_03_fla06_as1.flaMacromedia Flash MX ActionScript1.0
　
スケールモードを「上下左右がフィットするように表示」に変更する

Stage.scaleMode = "exactFit";
　

上に戻る



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

　
サンプル表示（別窓）

サンプルをダウンロード
stage_02_fla06_as1.flaMacromedia 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.flaMacroMedia Flash 5 stage_03_01_fla05_as1.zipZIP ファイル
　


フルスクリーン表示をするには以下の方法があります。
　
■フルフラッシュで表示する
■ブラウザにて 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.flaAdobe 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.flaMacromedia 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.flaAdobe 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";
};
　

上に戻る


前のページに戻る