|
画像をクリック↓してみてください。サンプルは別窓で開きます。
サンプル作成に使用した ParaDraw のバージョンは Ver.0.3a4， Suzuka のバージョンは Ver. 0.8.0.0[RichEdit版] です。
別窓で開いたウィンドウには，Flash が 100％ 表示されていると思います。
その別ウィンドウの大きさを大きくしたり小さくしたりしてみてください。
上下のタイトルやバーなどはウィンドウに対して一定位置のままで大きさが変わりませんが，中央の人工衛星は大きさが拡大縮小すると思います。
2007年は，世界初の人工衛星「スプートニク1号」打ち上げ50周年の年だったらしいので，記念として絵の題材に使わせてもらいました。
ここで言う フル画面Flash とは，画面全体にFlashのみを表示させる全画面Flashのことです。
オールFlash という言葉も，このフル画面Flashのことを指す場合もあります。
フル画面Flash と言っても，色々な表示の仕方がありますが，ここでは，
「どんなウィンドウのサイズであっても，ボタンやその他の大きさや配置は変えないようなFlashで，部分的にはウィンドウのサイズによって大きさを変える。」
というものの作り方の説明をします。
全画面Flashは，動作の重さやアクセシビリティなどの面から嫌われることが多いです。しかしこのような表示のさせかたは，最近よく見かけます。
実際には上のようにリンクで表示させるのではなく，「フルスクリーン」 ←のようにして表示させるものが多いと思います。
上の 「フルスクリーン」 という文字には，
<a href="javascript:void(0);" onclick="window.open('kiso4/sputnik.html', 'w',
'fullscreen=yes, menubar=no, toolbar=no,
scrollbars=no');">フルスクリーン</a>
というJavaScript を書いています。
フルスクリーンで表示される方のHTMLに SWF を貼り付けるタグは，width="100%" height="100%" のように書いて，Flash を 100％ 表示させてあります。
また，フルスクリーンで表示される方のHTMLのヘッダーには，次のような CSS を使って，スクロールバーを非表示にした上で，ブラウザのマージンを 0 にしています。
<style
type="text/css">
<!--
BODY{
overflow:hidden;
margin-top : 0px;
margin-left : 0px;
margin-right :
0px;
margin-bottom : 0px;
background-color :
black;
}
-->
</style>
Flash側は，メインのタイムラインの フレーム1 には次のスクリプトを書いています。
// ステージの上左を基準にして
Stage.align = "TL";
// ステージ内容の拡大縮小なし
Stage.scaleMode = "noScale";
// 中央のスプートニクのステージに対する大きさを指定
spt_size = 1/2;
// 中央のスプートニクの縦横比を記録
spt_h_w = _root.sputnik._height/_root.sputnik._width;
// ステージ監視用のインスタンスを作成
sListener = new Object();
// ステージのサイズが変わったときの動作定義
sListener.onResize = function() {
// ---各MCの座標に関して-------------------
// 左上のヘッダーの座標(本来不要)
_root.header_r._x = 0;
_root.header_r._y = 0;
// 右上のヘッダーの座標(y座標は本来不要)
_root.header_r._x = Stage.width;
_root.header_r._y = 0;
// 左下のフッターの座標(x座標は本来不要)
_root.footer_l._x = 0;
_root.footer_l._y = Stage.height;
// 右下のフッターの座標
_root.footer_r._x = Stage.width;
_root.footer_r._y = Stage.height;
// 中央のスプートニクの座標
_root.sputnik._x = Stage.width/2;
_root.sputnik._y = Stage.height/2;
// ---中央のスプートニクの大きさに関して---
// ステージがスプートニクより横長のとき
if (Stage.height/Stage.width<=spt_h_w) {
_root.sputnik._height = Stage.height*spt_size;
_root.sputnik._width = Stage.height*spt_size/spt_h_w;
} else {
_root.sputnik._width = Stage.width*spt_size;
_root.sputnik._height = Stage.width*spt_size*spt_h_w;
}
// 即更新
updateAfterEvent();
};
// ステージ監視用インスタンスをステージのリスナーに登録
Stage.addListener(sListener);
// 初期表示段階で sListener.onResize の実行
sListener.onResize();
|
Stageクラスのスクリプトのオンパレードですね。Stageクラスの使い方の一例です。
このように表示させると，モニタの解像度やブラウザのウィンドウの大きさに左右されることなく，同じような位置に同じ物が配置できます。
ステージ(Suzuka上では編集キャンバス)の要所の座標は次の図のようになっています。
そして，その座標を利用しやすいように，各スプライトの基準点を「左上」や「中央」や「右下」などに設定してあります。
サンプルでの基準点には，見えにくいかもしれませんが，一応目印として マークの画像を置いています。
その他の位置に配置したい場合も，上のことを基本として考えれば，どこにでも配置できると思います。
あとフルスクリーンの場合，上のタイトルバーの右の「×」ボタンが無くなるブラウザと無くならないブラウザがあります。
タイトルバーが無くなるブラウザでは，マウス操作でウィンドウを閉じることができなくなってしまうため，クローズボタンを Flash 内に付けておいた方が良いです。
Flash内のクローズボタン(×ボタン)には次のようなJavaScript入り getURL を書いています。
on (release) {
getURL("javascript:window.close();");
}
|
JavaScript や CSS に関しても書きましたが，その他，全画面フラッシュ のページは検索エンジンに無視されるなど，
フルFlash は色々な絡みがあって難しい面もありますが，Flash 的な面だけを考えると，Stageクラスを使用すれば比較的簡単な技術で実現可能です。
また，フルFlash の場合，ステージのサイズは変わりますから，Suzukaのキャンバスのサイズはいくらにしていてもかまいません。キャンバスのサイズはどうでも良いので，その点，普通の Flash より作りやすいと思います。
| 
