Stage クラスについて
・ | Flash の画質を設定する |
・ | Flash のクライアントウィンドウの幅と高さを調べる |
・ | Flash のフレームレートを設定する |
・ | Flash の整列する位置を設定する |
・ | Flash のスケールモードを設定する |
・ | Flash をフルスクリーンモードにする |
・ | ハードウェアスケーリングを使用する |
Flash の画質を設定する
サンプルをダウンロード
■Flash の画質を設定する
Flash の画質を変更するには stage のプロパティである quality を変更します。下の表にある定数か文字で指定すると画質を変更できます。
Adobe AIR の場合、画質は 画質高 と 画質最高 のみ選択できます。
定数 | 文字 | 効果 |
StageQuality.LOW | "low" | 画質低 |
StageQuality.MEDIUM | "medium" | 画質中 |
StageQuality.HIGH | "high" | 画質高 |
StageQuality.BEST | "best" | 画質最高 |
なし | "autolow" | 画質低 → 高 (スペックにより自動変更) |
なし | "autohigh" | 画質高 → 低 (スペックにより自動変更) |
設定例です。どれか1行を記述します。
画質を設定する
stage.quality = StageQuality.LOW; // 画質を低に変更する
stage.quality = StageQuality.MEDIUM; // 画質を中に変更する
stage.quality = StageQuality.HIGH; // 画質を高に変更する
stage.quality = StageQuality.BEST; // 画質を最高に変更する
stage.quality = "autolow"; // 画質低に変更、スペックが高ければ自動的に高に変更
stage.quality = "autohigh"; // 画質高に変更、スペックが低ければ自動的に低に変更
■Flash の画質の違い(FlashPlayer8以降の場合)
画質の設定によるグラフィックの変化は以下の通りです。
■画質『低』
・ベクターグラフィックにアンチエイリアスがかかりません。
・ビットマップグラフィックにスムージングがかかりません。
・ビットマップグラフィックにスムージングがかかりません。
■画質『中』
・ベクターグラフィックに軽くアンチエイリアスがかかります。
・スムージングにチェックが入っているビットマップグラフィックは補正されます。
・スムージングにチェックが入っているビットマップグラフィックは補正されます。
■画質『高』
・ベクターグラフィックに完全にアンチエイリアスがかかります。
・スムージングにチェックが入っているビットマップグラフィックは補正されます。
・スムージングにチェックが入っているビットマップグラフィックは補正されます。
■画質『最高』
・ベクターグラフィックに完全にアンチエイリアスがかかります。
・スムージングにチェックが入っているビットマップグラフィックは補正されます。
さらに100%より低いスケールサイズで表示されるときは別アルゴリズムで補正されます。
・スムージングにチェックが入っているビットマップグラフィックは補正されます。
さらに100%より低いスケールサイズで表示されるときは別アルゴリズムで補正されます。
■画質『低→高』
・はじめは画質低です。処理に余裕がある場合は自動的に画質高に切り替わります。
■画質『高→低』
・はじめは画質高です。処理に余裕がない場合は自動的に画質低に切り替わります。
Flash のクライアントウィンドウの幅と高さを調べる
サンプルを別ウィンドウで開く |
サンプルをダウンロード
■クライアント領域の幅と高さを取得する
「Flash が表示されているクライアント領域」の幅と高さを調べるには、 stage のプロパティである stageWidth と stageHeight から取得します。
クライアント領域の幅と高さを取得する
var w : int = stage.stageWidth; // Flash の幅
var h : int = stage.stageHeight; // Flash の高さ
■クライアント領域が変更されたか調べる
ブラウザのウィンドウ枠が変化して、「Flash の表示サイズが変更された」か調べるには Event.RESIZE イベントを使用します。
このイベントは、スケールモードが、StageScaleMode.NO_SCALE のときのみ動作します。
リサイズされたときにクライアント領域の幅と高さを取得する
// スケールモードを「100 % 表示」に設定
stage.scaleMode = StageScaleMode.NO_SCALE;
// リサイズされたときに呼び出されるイベント
stage.addEventListener(Event.RESIZE, function (e:Event):void{
var w : int = stage.stageWidth;
var h : int = stage.stageHeight;
});
Flash のフレームレートを設定する
サンプルをダウンロード
■フレームレートを取得する
「パブリッシュ設定」で設定したフレームレートを取得するには、 stage のプロパティである frameRate から取得します。
フレームレートを取得する
var fps : Number = stage.frameRate;
■フレームレートを変更する
frameRate に数値を代入するとフレームレートを変更する事ができます。
フレームレートを変更する
stage.frameRate = 30;
Flash の整列する位置を設定する
サンプルをダウンロード
■整列する位置を設定する
Flash のスケールモードが『100%』のときに、Flash で設定したステージサイズが実際のクライアント領域のサイズと違う場合、
どこを基準として吸着させるかを指定する事ができます。
stage に align というプロパティがあるので下の表にある定数を指定します。
定数 | 文字 | 垂直方向 | 水平方向 |
StageAlign.TOP_LEFT | "TL" | 上 | 左 |
StageAlign.TOP | "T" | 上 | 中央 |
StageAlign.TOP_RIGHT | "TR" | 上 | 右 |
StageAlign.LEFT | "L" | 中央 | 左 |
なし | "" | 中央 | 中央 |
StageAlign.RIGHT | "R" | 中央 | 右 |
StageAlign.BOTTOM_LEFT | "BL" | 下 | 左 |
StageAlign.BOTTOM | "B" | 下 | 中央 |
StageAlign.BOTTOM_RIGHT | "BR" | 下 | 右 |
設定例です。
左上に整列する
// 100%表示
stage.scaleMode = StageScaleMode.NO_SCALE;
// 左上指定
stage.align = StageAlign.TOP_LEFT;
右に整列する
// 100%表示
stage.scaleMode = StageScaleMode.NO_SCALE;
// 右指定
stage.align = StageAlign.RIGHT;
中央に整列する
// 100%表示
stage.scaleMode = StageScaleMode.NO_SCALE;
// 中央指定
stage.align = "";
Flash のスケールモードを設定する
サンプルを別ウィンドウで開く |
サンプルをダウンロード
■スケールモードを設定する
Flash の表示の種類であるスケールモードを設定するには、 stage のプロパティである scaleModeを使用します。
以下の表の定数を指定します。
定数 | 文字 | 効果 |
StageScaleMode.EXACT_FIT | "exactFit" | 縦横比を変えてフィット |
StageScaleMode.NO_BORDER | "noBorder" | 縦横比を変えずにフィット |
StageScaleMode.NO_SCALE | "noScale" | 100% 表示 |
StageScaleMode.SHOW_ALL | "showAll" | すべて表示 |
使用例です。
縦横比を変えてフィットさせる
stage.scaleMode = StageScaleMode.EXACT_FIT;
縦横比を変えずにフィットさせる
stage.scaleMode = StageScaleMode.NO_BORDER;
100% 表示にする
stage.scaleMode = StageScaleMode.NO_SCALE;
すべて表示にする
stage.scaleMode = StageScaleMode.SHOW_ALL;
Flash をフルスクリーンモードにする
サンプルをダウンロード
■フルスクリーンモード
Flash をフルスクリーン表示に変更するには stage のプロパティである displayState に下の表にある定数を指定します。
定数 | 文字 | 効果 |
StageDisplayState.NORMAL | "normal" | 通常モードで起動する |
StageDisplayState.FULL_SCREEN | "fullScreen" | フルスクリーンで起動する |
設定例です。
通常モードで起動する
stage.displayState = StageDisplayState.NORMAL;
フルスクリーンで起動する
stage.displayState = StageDisplayState.FULL_SCREEN;
■フルスクリーンの設定が可能なタイミング
フルスクリーン表示の切り替えは、セキュリティの都合上必ずマウスイベント中か、キーボードイベント中に記述する必要があります。
ユーザーが操作していないときにフルスクリーンに切り替える事はできません。
マウスが押されたらフルスクリーン表示に変更する
// マウスが押されたときに実行されるイベント
stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownFunc);
// マウスが押されたときに実行される関数
function MouseDownFunc(e:MouseEvent):void{
// フルスクリーンに変更
stage.displayState = StageDisplayState.FULL_SCREEN;
}
■ブラウザ実行時にフルスクリーン表示に必要な設定
ブラウザ用の Flash Player で動作させる場合は、HTMLタグの allowFullScreen という属性をすべて true に変更します。
この属性が false の場合、エラーとなります。
フルスクリーンを許可する(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>
Adobe Flash CS3 に付属しているスタンドアローンプレイヤーで動作させる場合は、最新の修正アップデートパッチを当てないと動作しません。
■フルスクリーン時のキーボード操作について
■Flash Player 9 以前のブラウザ版プレイヤー
キーボード操作を使用することができません。テキストフィールドなどの入力機能は動作しません。
■Flash Player 10 以降のブラウザ版プレイヤー
以下のキーのみ入力を受け付けます。テキストフィールドなどの入力機能は動作しません。
キー | プロパティ |
Arrow Up | Keyboard.UP |
Arrow Down | Keyboard.DOWN |
Arrow Left | Keyboard.LEFT |
Arrow Right | Keyboard.RIGHT |
Space | Keyboard.SPACE |
Tab | Keyboard.TAB |
ハードウェアスケーリングを使用する
サンプルをダウンロード
■Flash のサイズが大きいほどと処理負荷は跳ね上がる
画面の 1 ドットを描くコストを 1 としてみます。
[幅 400 高さ 300] の画面をすべて描くには、400 * 300 = 120000 ドットなので 120000 コストがかかります。
[幅 400 高さ 300] の画面をすべて描くには、400 * 300 = 120000 ドットなので 120000 コストがかかります。
ではこの 2 倍の解像度である [幅 800 高さ 600] の画面をすべて描画したらどうなるでしょう。
800 * 600 = 480000 ドットなので 480000 コストがかかります。
解像度を 2 倍にすると 4 倍も処理負荷がかかる事になります。(注.いろんな最適化が考えられるので単純に 4 倍という事はありません…)
モニタの解像度の1つである [幅 1280 高さ 1024] だと 1310720 コストとなり約 11 倍相当の負荷となります。
モニタの解像度の1つである [幅 1920 高さ 1200] だと 2304000 コストとなり約 19 倍相当の負荷となります。
解像度が大きくなるほど描画コストが跳ね上がる事がわかります。
モニタの解像度の1つである [幅 1920 高さ 1200] だと 2304000 コストとなり約 19 倍相当の負荷となります。
解像度が大きくなるほど描画コストが跳ね上がる事がわかります。
■高速で大きい画面サイズを得る方法を考えてみる
フルスクリーンのような超巨大な画面サイズで Flash を表示する事はとても重い処理ですが、
何とか巨大な画面サイズで高速で表示できる方法を考えてみます。
高解像度の状態で描画処理を行うのではなく、低解像度の状態でいったんすべて描画してしまい1枚の低解像度のビットマップにします。
その絵を、1回だけ拡大描画して高解像度のサイズにフィットさせます
こうする事で、
「低解像度の描画 + ビットマップ1枚を拡大描画」する程度の描画負荷で、大きい画面に表示する事が出来ます
欠点もあります。ドロー形式の素材をラスタ形式に変換してから拡大表示するので、
ベクターグラフィックはすべてエッジが汚くなります。
ビットマップグラフィックは拡大され、ドットが荒く表示されます。
■ハードウェアスケーリングとは?
上記の一連の処理は自前で実装する事もできますが、ハードウェアスケーリングを使用すると同様の処理を自動的に行ってくれます。
ハードウェアスケーリングはフルスクリーン時のみ動作します。
ハードウェアスケーリングを使用すると。「 Flash が通常のサイズで描画したときの解像度の絵」を、ビデオカード等のハードウェアがモニタ一杯まで拡大して表示してくれます。
もし、ユーザーがハードウェアアクセラレーションの設定を ON にしている場合は、 GPU で高速に処理されます。
OFF にしている場合は GPU が使われずに CPU だけで演算が行われます。しかしそれでも普通に表示するよりは早いです。
OFF にしている場合は GPU が使われずに CPU だけで演算が行われます。しかしそれでも普通に表示するよりは早いです。
■ハードウェアスケーリングを使用する
ハードウェアスケーリングを使用するには、stage.fullScreenSourceRect プロパティを使用します。
このプロパティに拡大したい矩形範囲を Rectangle 型で指定します。
通常は、Flash の画面サイズを指定します。
このプロパティは、フルスクリーンではないときに設定しておく必要があります。
このプロパティは、フルスクリーンではないときに設定しておく必要があります。
(x:0,y:0,w:100,h:200)の矩形サイズをフルスクリーン時にハードウェアスケーリング表示を行う
// マウスが押されたときに呼び出されるイベント
stage.addEventListener(MouseEvent.MOUSE_DOWN,function (e){
// 通常状態に設定
stage.displayState = StageDisplayState.NORMAL;
// ハードウェアスケーリングを使用しつつ、拡大したい矩形サイズを指定
stage.fullScreenSourceRect = new Rectangle(0, 0, 100, 200);
// フルスクリーン状態に設定
stage.displayState = StageDisplayState.FULL_SCREEN;
});
■ハードウェアスケーリングを使用しない
ハードウェアスケーリングを使用せずに、高解像度でフルスクリーンを行いたい場合は、
stage.fullScreenSourceRect プロパティに null を指定します。
これはデフォルトのフルスクリーンの動作です。
このプロパティは、フルスクリーンではないときに設定しておく必要があります。
ハードウェアスケーリングを使用しない
// マウスが押されたときに呼び出されるイベント
stage.addEventListener(MouseEvent.MOUSE_DOWN,function (e){
// 通常状態に設定
stage.displayState = StageDisplayState.NORMAL;
// ハードウェアスケーリングを使用しない
stage.fullScreenSourceRect = null;
// フルスクリーン状態に設定
stage.displayState = StageDisplayState.FULL_SCREEN;
});