ステージの背景画像のみ拡大縮小対応

質問

こんばんは。
いつもお世話になります。

現在FLASHでサイトを作成していますが、以下サイトのように、
ブラウザサイズを変更すると背景の画像はリサイズされますが、
真ん中にあるメニューを含めたオブジェクトはブラウザサイズを
変更してもリサイズされないようなものを作りたいと考えています。

http://www.minus.dk

stage.scaleModeにNO_BORDERを指定すれば背景画像はリサイズされますが、
他のオブジェクトもリサイズされてしまいます。

何か良い方法はないでしょうか？

ご教授宜しくお願いいたします。

回答No.2

BlurFiltan · ベストアンサー

＃１の方も書かれていらっしゃいますが，
ご質問のようなことをするには 定石（お決まりのやり方） があります。

stage.scaleMode を NO_BORDER にするのではなく，
NO_SCALE にしてムービー全体の拡大縮小をナシにしておいた上で，
画像が NO_BORDER のようになるように大きさを変えるプログラムを組みます。

簡単な方法としては，
まず，背景となる画像をムービークリップに変換します。
このとき，画像の「左上」を基準点としてムービークリップに変換します。

　　■□□
　　□□□
　　□□□

そのムービークリップとなった画像を選択して，
たとえば 「back_mc」 というインスタンス名を付けます。

そしてその 「back_mc」 が存在するフレームにスクリプトを書く場合は次のように書きます。

--------------------------------------------
// ムービー全体の拡大縮小をなしにする
stage.scaleMode=StageScaleMode.NO_SCALE;
// ステージの左上を基準として整列
stage.align=StageAlign.TOP_LEFT;

// 「back_mc」 の縦横の初期サイズを記録
var backW:Number=back_mc.width;
var backH:Number=back_mc.height;

//stageにリスナーを登録（イベント:リサイズ，実行関数:onStageResize）
stage.addEventListener(Event.RESIZE,onStageResize);

// 関数 onStageResize の定義
function onStageResize(evt:Event):void {
// 関数 resizeBack_mc を実行(引数：ステージ幅，ステージ縦)
resizeBack_mc(stage.stageWidth,stage.stageHeight);
}

// 関数 resizeBack_mc の定義
function resizeBack_mc(stageW:int,stageH:int):void {
// もしステージの縦横が背景画像より横長であれば
if (stageH/stageW<backH/backW) {
// 「back_mc」の幅をステージの幅に合わせる
back_mc.width=stageW;
// 「back_mc」の縦をステージの幅を基準に算出
back_mc.height=stageW*backH/backW;
// もしステージの縦横が背景画像より縦長であれば
} else {
// 「back_mc」の幅をステージの縦を基準に算出
back_mc.width=stageH*backW/backH;
// 「back_mc」の縦をステージの縦に合わせる
back_mc.height=stageH;
}
}

// 関数 resizeBack_mc を実行(引数：ステージ幅，ステージ縦)
resizeBack_mc(stage.stageWidth,stage.stageHeight);
--------------------------------------------

（ActionScript3.0，Flash Player 9 以上）

その他，
仮に，例えばメニューのムービークリップ 「menu_mc」 があって，
その 「menu_mc」 をステージ右下にピッタリ引っ付けたいとします。

その場合は「menu_mc」の基準点を「右下」に設定しておいて，

menu_mc.x = stage.stageWidth;
menu_mc.y = stage.stageHeight;

となる内容のスクリプトを，
初期表示時 と ステージリサイズ時 に実行するようにすると良いです。

また仮に，例えばタイトルのムービークリップ「title_mc」を
ステージ中央に配置したいとします。

その場合は「title_mc」の基準点を「中央」に設定しておいて，

title_mc.x = stage.stageWidth/2;
title_mc.y = stage.stageHeight/2;

となる内容のスクリプトを，
初期表示時 と ステージリサイズ時 に実行するようにすれば良いと思います。

なお上の説明には何度も 「基準点の位置」 が出没していますが，
この 基準点の位置 は 「このときはこうする」 という決まりがあるわけではありません。
「インスタンスの座標」 とは 「インスタンスの基準点の座標」 だから
「基準点の位置」を意識しておくことが大切だという意味です。

例えば上で書いた，
ステージ右下にピッタリ引っ付けたい 「menu_mc」 があったとして，
その基準点を「右下」 ではなく，仮に「中央」にしていたとします。
別にそれならそれでかまいません。

ただしその場合，
menu_mc.x = stage.stageWidth-menu_mc.width/2;
menu_mc.y = stage.stageHeight-menu_mc.height/2;
のように，計算やスクリプトが無意味に複雑化します。

なるべくそうならないように
計算やスクリプトを簡単・単純にできるような位置を考えて
基準点の位置を勝手に設定すれば良いということになります。

とにかくその辺は，モノや場合によって，
その時その時で考えるようにします。

お礼

お返事遅くなりまして申しわけ御座いません。
また、大変ご丁寧な解説ありがとうございます。
ご指摘の記述で思い通りの処理ができました。

ただ一箇所わからない箇所があるのですが、
>if (stageH/stageW<backH/backW)
この「/」で区切ったものはどういう条件になるのでしょうか？

また、以下の計算式は4:3の割合を求める際の式という認識で良いのでしょうか？
>back_mc.height=stageW*backH/backW;

回答No.3

BlurFiltan

＃２です。

> >if (stageH/stageW<backH/backW)
> この「/」で区切ったものはどういう条件になるのでしょうか？

「/」で区切っているのではなくて，
2/3 （３分の２=さんぶんのに） とか，1/5 （５分の１=ごぶんのいち） という意味です。

if (stageH/stageW<backH/backW)｛
　　　↓↓↓
------------------------
「if」 ←もし

「stageH/stageW」 ← ステージの横幅 分の ステージの高さ が

「<」 ← より小さい

「backH/backW」 ← 背景の横幅 分の 背景の高さ

このとき 「{」 以降を実行。
------------------------

です。

バラせばバラすほど（分解して説明すればするほど），ややこしくなるだけだと思います。

「/」 は 「÷」 です。
「<」 は 「小なり」 です。不等号（ふとうごう）です。
Flash や ActionScript 以前に，また 数学以外に， どこでも使われますよ。

回答No.1

atse

NO_BORDER ではなく NO_SCALE にして、
stage の Event.RESIZE に背景のサイズを変える function を登録します。
その function内 で、背景のサイズを変えるスクリプトを書きます。

----------------
//背景を bg というインスタンス名の MC とすると
stage.scaleMode = StageScaleMode.NO_SCALE;
function myResize(e):void {
bg.width = stage.stageWidth;
bg.height = stage.stageHeight;
}
stage.addEventListener(Event.RESIZE, myResize);
myResize(1);//初期化としてbgのサイズを変更するため一回実行
----------------

この例は width と height を stageサイズ とあわせています。
背景の最小サイズの決まりや、縦横比の保持などが必要な場合は、
ご自分の仕様に合わせて function内 に書いて下さい。

お礼

ご回答いただきましてありがとう御座います。
ご指摘の箇所まで理解することができました。

例えば横800×縦600(3:2の比率)の場合、縦横比を保持したままリサイズするにはどうしたら良いでしょうか？

宜しくお願いいたします。