Flash の画面表示について
スケールモードを設定したい(Flash 6 以降)
ウインドウのサイズを調べたい(Flash 6 以降)
整列する位置を指定したい(Flash 6 以降)
フルスクリーンで表示したい
9 スライスの拡大/縮小を使用したい(Flash 8 以降)
ハードウェアスケーリングを使用したい(Flash 9 以降)
ウインドウのサイズを調べたい(Flash 6 以降)
整列する位置を指定したい(Flash 6 以降)
フルスクリーンで表示したい
9 スライスの拡大/縮小を使用したい(Flash 8 以降)
ハードウェアスケーリングを使用したい(Flash 9 以降)
スケールモードを設定したい(Flash 6 以降)
■スケールモードとは?
Flash には、 4 通りの拡大表示設定があります。右クリックメニューからは、『100 % 表示』と『すべて表示』の 2 種類が選択できます。どんな動作をするかはサンプルを開いて確認できます。
スケールモードを変更するには Stage.scaleMode プロパティに下の表にある文字列を設定します。
スケールモードを変更するには Stage.scaleMode プロパティに下の表にある文字列を設定します。
| 文字列 | 効果 |
| noScale | 100 % 表示 |
| showAll | すべて表示 |
| noBorder | 外が表示されないようアスペクト比を維持して表示 |
| exactFit | 上下左右がフィットするように表示 |
■外が表示されないようアスペクト比を維持して表示
| サンプル表示(別窓) |
サンプルをダウンロード
スケールモードを「外が表示されないように表示」に変更する
Stage.scaleMode = "noBorder";
■上下左右がフィットするように表示
| サンプル表示(別窓) |
サンプルをダウンロード
スケールモードを「上下左右がフィットするように表示」に変更する
Stage.scaleMode = "exactFit";
ウインドウのサイズを調べる
| サンプル表示(別窓) |
サンプルをダウンロード
■ウィンドウのサイズを調べる
ウィンドウの幅と高さを取得するには、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" に設定している場合にのみ動作します。
このイベントは、スケールモードを "noScale" に設定している場合にのみ動作します。
1.スケールモードを 100 % 表示にする
まず、スケールモードを "noScale" に設定します。
Flash Player のサイズを調べる
Stage.scaleMode = "noScale"; // 100 % 表示
2.コールバック関数登録用のオブジェクトを作成する
適当なオブジェクトを作成し、onResize というプロパティに、リサイズされたときに呼び出したい関数を代入します。
オブジェクトを作成する
Stage.scaleMode = "noScale"; // 100 % 表示
var obj = new Object ();
obj.onResize = function () {
trace("幅:" + Stage.width);
trace("高さ:" + Stage.height);
};
3.イベントリスナーに登録する
addListener() メソッドを使ってオブジェクトを登録すると、リサイズされるたびに関数が呼び出されるようになります。
オブジェクトを作成する
Stage.scaleMode = "noScale"; // 100 % 表示
var obj = new Object ();
obj.onResize = function () {
trace("幅:" + Stage.width);
trace("高さ:" + Stage.height);
};
Stage.addListener (obj); // イベントリスナーに登録
4.イベントリスナー登録を解除する
removeListener() メソッドを使うと登録を解除できます。
イベントリスナー登録を解除する
Stage.scaleMode = "noScale"; // 100 % 表示
var obj = new Object ();
obj.onResize = function () {
trace("幅:" + Stage.width);
trace("高さ:" + Stage.height);
};
Stage.addListener (obj);
Stage.removeListener (obj);
整列する位置を指定したい
| サンプル表示(別窓) |
サンプルをダウンロード
■ 整列する位置を指定する
スケールモードが "noScale" のときに、Flash Player のスクリーン画面のどこに整列して描画するかを指定するには、Stage.align プロパティを使用します。
下にある表から好きな文字列を代入します。
下にある表から好きな文字列を代入します。
| 整列する位置 | プロパティ値 |
| 左上 | "TL" |
| 上 | "T" |
| 右上 | "TR" |
| 左 | "L" |
| 中央 | "" |
| 右 | "R" |
| 左下 | "BL" |
| 下 | "B" |
| 右下 | "BR" |
左上に整列
Stage.scaleMode = "noScale"; // 100 % 表示
Stage.align = "TL"; // 整列する位置を設定
フルスクリーンで表示したい
| サンプル表示(別窓) |
サンプルをダウンロード
フルスクリーン表示には3通りの方法があります。
■ブラウザにて JavaScript を使用する
■スタンドアローンプレイヤーのフルスクリーン機能を使用する
■Flash Player のフルスクリーン表示機能を使用する(Flash 9 以降)
■ブラウザにて JavaScript を使用する
■スタンドアローンプレイヤーのフルスクリーン機能を使用する
■Flash Player のフルスクリーン表示機能を使用する(Flash 9 以降)
■ブラウザにて JavaScript を使用する
javascript を使ってフルスクリーン表示する例です。ブラウザでのみ動作します。ブラウザによっては動作しなかったり外側に枠が付いたりと挙動が違います。
下は test.swf ファイルをフルスクリーン表示するタグの記述例です。
下は 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 以降)
サンプルをダウンロード
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以降)
サンプルをダウンロード
■ 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 以降)
サンプルをダウンロード
■Flash のサイズが大きいと重い理由
Flash Player は、描画処理をすべて CPU だけで演算を行っています。(この記事を書いてるバージョン 9 時点の話です。)
画面の 1 ドットを描くコストを 1 としてみましょう。
[幅 400 高さ 300] の画面をすべて描くには、400 * 300 = 120000 ドットなので 120000 コストがかかります。
ではこの 2 倍の解像度である [幅 800 高さ 600] の画面をすべて描画したらどうなるでしょう。800 * 600 = 480000 ドットなので 480000 コストがかかります。
なんと解像度を 2 倍にすると 4 倍も処理負荷がかかります。
(注.他にもいろいろ複雑な計算を行うので単純に 4 倍という事はありません…)
最近のモニタサイズである [幅 1280 高さ 1024] だと 1280 * 1024 = 1310720 ドットなので 1310720 コストとなり約 11 倍相当の負荷となります。
これは、クロックが 2.0Ghzの CPU で快適に動かしているとしたらフルスクリーン表示にすると クロックが 200Mhz のヘボ CPU で動かしてるかのような遅さになります。
フルスクリーンのような巨大な画面サイズで Flash を表示する事はとても重い処理です。 そこで高速で表示できる方法を考えてみましょう。
1280 * 1024 の高解像度で描画処理を行うのではなく、 400 * 300 の低解像度の画面にいったんすべて描画してしまいビットマップ状態にします。その絵を、1回だけ拡大して 1280 * 1024 の高解像度サイズにしてみます。
→
これで低負荷で大きい画面を得る事が出来ますが、欠点もあります。それは、ドロー形式のものをラスタ形式に変換してから拡大表示するので、 ベクターグラフィックはすべてエッジが汚くなります。
この1回だけ拡大する処理の部分をビデオカード等の GPU に任せる事が出来ます。それが、ハードウェアスケーリングです。
画面の 1 ドットを描くコストを 1 としてみましょう。
[幅 400 高さ 300] の画面をすべて描くには、400 * 300 = 120000 ドットなので 120000 コストがかかります。
ではこの 2 倍の解像度である [幅 800 高さ 600] の画面をすべて描画したらどうなるでしょう。800 * 600 = 480000 ドットなので 480000 コストがかかります。
なんと解像度を 2 倍にすると 4 倍も処理負荷がかかります。
(注.他にもいろいろ複雑な計算を行うので単純に 4 倍という事はありません…)
最近のモニタサイズである [幅 1280 高さ 1024] だと 1280 * 1024 = 1310720 ドットなので 1310720 コストとなり約 11 倍相当の負荷となります。
これは、クロックが 2.0Ghzの CPU で快適に動かしているとしたらフルスクリーン表示にすると クロックが 200Mhz のヘボ CPU で動かしてるかのような遅さになります。
■高速で大きい画面サイズを得る方法を考えてみる
フルスクリーンのような巨大な画面サイズで Flash を表示する事はとても重い処理です。 そこで高速で表示できる方法を考えてみましょう。
1280 * 1024 の高解像度で描画処理を行うのではなく、 400 * 300 の低解像度の画面にいったんすべて描画してしまいビットマップ状態にします。その絵を、1回だけ拡大して 1280 * 1024 の高解像度サイズにしてみます。
→
これで低負荷で大きい画面を得る事が出来ますが、欠点もあります。それは、ドロー形式のものをラスタ形式に変換してから拡大表示するので、 ベクターグラフィックはすべてエッジが汚くなります。
■ハードウェアスケーリングとは?
この1回だけ拡大する処理の部分をビデオカード等の GPU に任せる事が出来ます。それが、ハードウェアスケーリングです。
もし、ユーザーがハードウェアアクセラレーションの設定を ON にしている場合は、 GPU で高速に処理されます。
OFF にしている場合は GPU が使われずに CPU だけで演算が行われます。しかしそれでも普通に表示するよりは早いです。
なおこの一連の処理は、自分で実装するわけではなくフルスクリーン表示時に自動的に行われます。
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";
}




