flash ブラウザのサイズに合わせた各オブジェクト位置の移動方法

質問

http://www.direct-co.com/index2.html
↑のサイトのようにブラウザの大きさを変えたときに
右上のボタン(DESIGN HOUSE/SHOP DESIGN/RENOVATION/DIRECT BAND)の様な、
そのままのボタンサイズで右側を基準に移動させる方法と、
と同時に、背景の写真の様に
一方でサイズダウンさせる方法を知りたいのですが教えて頂けないでしょうか。
要は、各MCを個別に設定する方法がわかりません。
説明が下手で分かりづらいと思いますが
よろしくお願いいたします。

回答No.2

BlurFiltan · ベストアンサー

＃１ です。

> ちなみにflash CS3　AS3.0です。

わかりました。

＃１でも書きましたが、
ActionScript1.0　2.0　3.0 という言語が違ってもやることの内容は同じです。

また、ポイントも同じです。

　１ どうしたいのかを具体的にイメージして考える
　２ 考えた通りになるようにムービーを仕組む
　３ 仕組みが狙い通りに動くようにASコーディング

http://www.direct-co.com/index2.html
さんの場合は(場合に"限って"は)、以下のようにするとできます。

まず、【下の図】↓のように各MC（=ムービークリップの略）を配置します。

下の図の「back_mc」、「menu_mc」、「main_mc」、「footer_mc」、「logo_mc」というのは各 MC の "インスタンス名" です。
また各 MC の ＋印 はそのMCの "基準点" の位置を示しています。
（色分けした＋印は位置を示すためにわざわざ描いてみただけで実際には描かない方が良いです）

ステージのサイズ（=ドキュメントのサイズ）はどうでも良いです。
たとえば、50×50px でも 5000×20px でも 1000×700px でも何でも良いです。
モニタの比なども全く考える必要はありません。
大きすぎても小さすぎても作りにくいはずですから、作りやすいサイズで良いです。

それら ５つのMCが登場するフレームの、任意のレイヤーのキーフレームに、
次のように書けばFlashの方は出来上がりです。

-----------------------------------------------
// ムービー内の拡大縮小なし（お決まり文句）
stage.scaleMode = StageScaleMode.NO_SCALE;
// 整列の基準を左上にする（お決まり文句）
stage.align = StageAlign.TOP_LEFT;

// 「back_mc」 の初期横幅と高さを変数に記録しておく
var bw:Number = back_mc.width;
var bh:Number = back_mc.height;

// MC を整列させる関数 arrangeMC を定義
function arrangeMC():void{
//
// ローカル変数 sw にステージの幅を代入
var sw:int = stage.stageWidth;
// ローカル変数 sh にステージの高さを代入
var sh:int = stage.stageHeight;
//
// 「menu_mc」をステージ右に配置
menu_mc.x = sw;
//
// 「main_mc」をステージ中央に配置
main_mc.x = sw/2;
main_mc.y = sh/2;
//
// 「footer_mc」をステージ下に配置
footer_mc.y = sh;
//
// 「logo_mc」をステージ右下に配置
logo_mc.x = sw;
logo_mc.y = sh;
//
// 「back_mc」をステージの "幅に合わせて" リサイズ
back_mc.width = sw;
back_mc.height = bh/bw*sw;
}

// 上で定義したarrangeMCを即実行 (初期表示用)
arrangeMC();

// 関数 stageOnResize を定義
function stageOnResize(evt:Event):void {
// 上で定義したarrangeMCを実行 (リサイズ時用)
arrangeMC();
}

// ステージにイベントリスナーを登録
//引数(ステージリサイズ時に実行、実行関数stageOnResize)
stage.addEventListener(Event.RESIZE, stageOnResize);
-----------------------------------------------

arrangeMC

あとは、パブリッシュ設定の「HTML」タブで、
サイズ を [パーセント] にして 幅×高さ を [100] × [100] にして HTML と SWF をパブリッシュすると
簡易的にはそれらしいものができます。
実際には ＃１ で書いたサイトのように
HTML や スタイルシート でページのマージンを 0 にしてSWF を 100％ 表示させる方が良いです。

--- 補足(わかっていらしたら読む必要全くなし) --- ---

【下の図】↓ では、
『「back_mc」内の画像の下端は背景色と同化させておく』 と書いていますが、
これは、

　１ そのサイトの方が具体的にイメージして考えて
　２ サイトの方が考えた通りになるようにムービーを仕組んで
　３ 仕組みが狙い通りに動くようにASコーディングした

から、「そういう画像」を用意する必要があるのです。
そのサイトの方が "勝手に考えて" "勝手にそう工夫した" からそうなだけで、
これは決まりでも何でもありません。

背景画像入りMC 「back_mc」の幅はステージの幅にぴったりフィットさせています。
そしてそれに合わせて「back_mc」の高さを決めています↓。

　　// 「back_mc」をステージの "幅に合わせて" リサイズ
　　back_mc.width = sw;
　　back_mc.height = bh/bw*sw;

このスクリプトだと...、
つまり、
サイトの方が具体的にイメージして考えて考えた通りになるようにムービーを仕組んだものだと、
ブラウザを縦長にすると画像の下がどんどん見えてしまいます。

それで 『画像の下端は背景色と同化させておく』 ようなグラデーションにしておかなければ
背景画像の下に継ぎ目が見えてしまいます。
だから "そう仕組んだ" 画像を用意してあります。
もしくは、
どんなにブラウザを縦長にされても良いように、
超々縦長写真を用意しておいても良いかもしれません。

同じ事を逆から言えば、

　　// 「back_mc」をステージの "幅" に合わせてリサイズ
　　back_mc.width = sw;
　　back_mc.height = bh/bw*sw;

こういうスクリプトにしなければ、
『画像の下端は背景色と同化させておく』 とか
『超々縦長写真を用意しておく』 ようなことはしなくても良いわけです。

実際に 「どうしたいのか」 は作者以外わかりません。

「どうしたいのか」 を具体的に考えて、
そうなるような「仕組み」を作って
仕組みが狙い通り動作するように「ActionScriptをコーディング」して作ります。

実際に 「どうしたいのか」 は作者以外わかりませんが、
一例として書いておくと、
よく見かけるのは次のようにサイズ変更させるものです。

---上記スクリプトより---------------------------
// 「back_mc」をステージの "幅に合わせて" リサイズ
back_mc.width = sw;
back_mc.height = bh/bw*sw;
-------------------------------------------
　　　↓この部分を変更↓
-------------------------------------------
// もし 「back_mc」 が ステージより縦長であれば
if(bh/bw > sh/sw){
// 「back_mc」をステージの "幅に合わせて" リサイズ
back_mc.width = sw;
back_mc.height = bh/bw*sw;
// そうでなければ
}else{
// 「back_mc」をステージの "高さに合わせて" リサイズ
back_mc.height = sh;
back_mc.width = bw/bh*sh;
}
-------------------------------------------

お礼

BlurFiltanさん

詳細な内容、ありがとうございました。非常に分かり易く、もれなく理解できました。またよろしくおねがいします。

回答No.1

BlurFiltan

お持ちの Flash のバージョンも ActionScript のバージョンも書かれていらっしゃいませんが......。

Adobe（Macromedia） Flash の場合は，
Flash MX 以降をお持ちであればできます。

ActionScript1.0 でも 2.0 でも 3.0 でも，
言語が違うだけでやることは一応同じですが，
回答はいちいち書いていられません。

「Flashでリキッドレイアウトを実装する （Liquid Flash Layout） - youmos」
http://youmos.com/news/liquid_flash_layout
　↑ActionScript1.0（パブリッシュは2.0でもOK）
　　Flash MX 以上 Flash Player 6 以上

「feb19.jp blog - フルフラッシュサイト作り方入門」
http://feb19.jp/blog/archives/000056.php
　↑ActionScript1.0（パブリッシュは2.0でもOK）
　　Flash MX 以上 Flash Player 6 以上

「Suzuka ＆ ParaDraw 講座-フル画面Flash (Stageクラスの使い方)」
http://suzupara.iinaa.net/kiso411.html
　↑ActionScript1.0（ Adobe の場合 パブリッシュは2.0でもOK）
　　Adobe(Macromedia) の場合 Flash MX 以上 Flash Player 6 以上

「[AS3]フルブラウザ、リキッドレイアウト - Ao-Blog」
http://alwaysfinetuning.com/ao-blog/2009/01/as3-3.html
　↑ActionScript3.0
　　Flash CS3 以上 Flash Player 9 以上

FlashゲームPG講座 For AS3.0【Stage クラスについて】
Flash の整列する位置を設定する
http://hakuhin.hp.infoseek.co.jp/main/as3/stage.html#STAGE_03
　↑ActionScript3.0
　　Flash CS3 以上 Flash Player 9 以上

お礼

サイトの紹介、ありがとうございました。
ちなみにflash CS3　AS3.0です。
多分基準点の理論を芯から理解出来てないのが原因かなぁと思ってるんですが。
とにかくご紹介いただいたサイト、一通り目を通してみようと思います。