- ベストアンサー
ブラウザのサイズに合わせてオブジェクト位置を移動
http://www.wwl.co.jp/ ↑のサイトのようにブラウザの大きさを変えたときに メニューや画面下の帯部分（オブジェクト）が 少し遅れて画面端から何％、何ピクセル等 指定された場所に自動で移動する方法を 知りたいのですが教えて頂けないでしょうか。 説明が下手で分かりづらいと思いますが よろしくお願いいたします。
- chocoheads
- お礼率100% (2/2)
- Flash
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
＃１です。 うまくできませんか？ ご質問を見直してみて，私が一部見落としている点があることに気付きました。 >> 少し遅れて画面端から何％、何ピクセル等… この「少し遅れる」部分も必要だったのですね。 そしたら ，「Stage.onResizeリスナーイベント」は特に必要はありません。 もっとアバウトに，＃１の参照先であるURLの回答の下の方にあるように， onEnterFrame だけでできます。 ＃１で引用した 「パーセントで配置したフラッシュについて」 より簡単なのですが， ちょっと違う部分もありますから，あらためて補足回答をしておきます。 やることやスクリプトは簡単なのですが， 図的説明を文字でしなければならないため，長い回答です。 ======================================= ご質問で書かれてあるURLは， 何が難しいのかというと（どの部分の発想が難しいのかというと）， ステージの大きさに合わせてオブジェクトを移動させる部分ではなくて， ステージの大きさが変わっても，オブジェクトの大きさが変わらないという部分です。 そして，オブジェクトの大きさが変わらないのに，その座標が動くと言う部分がプラスされます。 ステージの大きさに合わせてオブジェクトを移動させるだけでしたら， フレーム1 の最初に， Stage.scaleMode = "exactFit"; という１行を書けば良いだけになります。 このページ↓の， http://hakuhin.hp.infoseek.co.jp/main/as/stage.html 上下左右にフィット [ サンプル表示（別窓） ] このFlashのサンプル - stage_01_03_fla6.fla(19kバイト) と書いてある部分の [ サンプル表示（別窓） ] をクリックしてもらうとその結果が表示されます。 しかし， そのサンプルを見ていただければわかりますが， ウィンドウの縦横の比によって，中のオブジェクトが変形してしまいますし， そもそも，大きさが拡大縮小されてしまいます。 だからこの方法ではうまく行きません。 そこで＃１の参照先 「パーセントで配置したフラッシュについて」 でも書いた， Stage.scaleMode = "noScale"; が必要になるのです。 ここまで考えつけたら， 後は指定場所に指定のものを動かせば良いだけのことになります。 ＃１で書きましたように， 全部のオブジェクトに対して１つ１つの説明は無理です。 ご質問で書かれているURLのページの， 下の黒い「フッタ」の部分と，その上の「メニュー」についてだけ， サンプル例を書いておきます。 本番ではなくてサンプル例だと思ってください。 新規ドキュメントを作成して， 塗りで横1000ピクセル（適当）， 高さ50ピクセル（適当）くらいの 黒い四角を描いてください。 その塗りをムービークリップに変換するのですが，変換するときの「基準点」が大切です。 四角い黒塗りを「右クリック」→「シンボルに変換」 でシンボルに変換ダイアログが出てきます。 図示すると次のような感じです。変形していたらすみません。 /////////////////////////////////////////////// 名前(N)：[ 任意の名前 ] タイプ(T)： ◎ ムービークリップ 基準点（R）：□□□ ○ ボタン □□□ ○ グラフィック □□■ /////////////////////////////////////////////// このように， タイプ(T) でムービークリップを選択して， 基準点（R） の部分で右下にチェックを入れて「OK」をしてください。 これで黒塗りのムービークリップの右下が座標の基準になります。 そして， その黒塗りムービークリップを選択して， 下のプロパティインスペクタで，インスタンス名を付けてください。 ここでは，「footer」 というインスタンス名にしておきます。 次にメニューの部分ですが， 何かこれも塗りでてきとうな四角を描いてください。 ステージ上を図示すると次のような感じです。 場所は適当で良いです。 ┌───ステージ──────────────┐ │ │ │ │ □□□□□ ←メニュー(インスタンス名 menu ) │ □□□□□ ↓フッタ(インスタンス名 footer ) │■■■■■■■■■■■■■■■■■■■■ │■■■■■■■■■■■■■■■■■■■■ └────────────────────┘ メニュー部分もやはり，ムービークリップシンボルに変換するのですが， このときの基準点は "左下" にしてください。 基準点（R）： □□□ □□□ ■□□ このメニューの基準点はどこでも良いと言えばどこでも良いのですが， 一応，この左下を基準にした方が， フッタとの距離感覚がつかみやすいので左下にしておきます。 そして，メニューの塗りムービークリップを選択した状態で， 下のプロパティインスペクタでインスタンス名を付けます。 ここでは 「menu」 というインスタンス名を付けておきます。 今のところ， レイヤーは １レイヤー ですが， レイヤーの追加で ２レイヤー にしてください。 挿入したレイヤーを上のレイヤーにして， その上のレイヤーにスクリプトを書きます。 □ レイヤー 筆・・|○| ←スクリプト用のレイヤー □ レイヤー 筆・・|●| ←ムービークリップのあるレイヤー ↓上レイヤーに書くスクリプト(コピペ可)↓ ----------------------------------- // 拡大縮小なし Stage.scaleMode = "noScale"; // ステージの左上を基準にする Stage.align = "TL"; // 移動するスピードの設定 var speed = 3/10; // １フレーム進む時間ごとに毎回実行 this.onEnterFrame = function() { // 各ムービークリップの座標を変える _root.menu._x += (20-_root.menu._x)*speed; _root.menu._y += (Stage.height-50-_root.menu._y)*speed; _root.footer._x += (Stage.width-_root.footer._x)*speed; _root.footer._y += (Stage.height-_root.footer._y)*speed; }; ----------------------------------- これでパブリッシュしてもらうと良いのですが， その前に HTML での表示を100％表示にしなければなりません。 「ファイル」→「パブリッシュ設定」で出てくる パブリッシュ設定ダイアログで サイズ(D)：[ムービーに合わせる ▼] となっているところを サイズ(D)：[パーセント ▼] 幅(W): 高さ(E) [100 ]×[100 ] パーセント にしてパブリッシュしてください。 Flash が 100％ で貼り付くタグが書き込まれた HTML がパブリッシュされますから， その HTML をブラウザで開けば，だいたい思うような感じにできていると思います。 HTMLの話ですが， ブラウザは何も書かないデフォルトのままでは，周囲にマージンの隙間ができます。 これを対処するには， パブリッシュされた HTML をメモ帳などテキストエディタで開いて， おそらく次のようになっていると思われる bodyタグの部分， <body bgcolor="#ffffff"> これを，ご質問で書かれているURLのように <body bgcolor="#ffffff" marginwidth=0 marginheight=0 leftmargin=0 topmargin=0> と書き替えると，マージンが 0 になって， 隙間なしの Flash 100％ 表示になります。 ======================================= だいたい以上です。 説明は長いですが簡単なことなのです。 他のオブジェクトにもインスタンス名を適当に付けて， onEnterFrame = function() 内の， _root.menu._x += (20-_root.menu._x)*speed; _root.menu._y += (Stage.height-50-_root.menu._y)*speed; のように， ステージ枠を意識して座標を指定してやれば良いです。 例えば， 「myObj」というムービークリップをステージの中心に配置したければ， 「myObj」の基準点をそのムービークリップの中心にして作成し， スクリプトとしては， _root.myObj._x += (Stage.width/2-_root.myObj._x)*speed; _root.myObj._y += (Stage.height/2-_root.myObj._y)*speed; これを追加すれば良いのです。 「+=」 は加算後代入演算子で，例えば A += 1; は A = A+1; と同じ事です。 その他は数学が苦手な私でもわかる，算数レベルのことだと思います。 なんとか考えてください。 //// 環境 //////////////////////// 上記作成環境並びに操作方法説明 Flash 8 対応 上記サンプル作成可能環境 Flash MX 以上 上記サンプル動作可能環境 Flash Player 6 以上
その他の回答 (1)
ブラウザのサイズなどは，Flash 単独では取得できません。 windowクラスのメソッドが ActionScript にはありませんから。 しかし，ステージのサイズなら取得できます。 HTML の ソースを見ればわかりますが， --- 引用 --- <EMBED src="top.swf" loop=false menu=false quality=high scale=noscale bgcolor=#ffffff WIDTH="100%" HEIGHT="100%" NAME="toppage" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> つまり，100％表示です。 100％表示だと，ステージのサイズがブラウザの全面と一致するので， ステージのプロパティを基準に ブラウザ各オブジェクトを動かすことは可能になります。 逆に 100％表示でなければ ActionScript では不可能です。 とりあえずココ↓に原理は集約されていると思いますから，参考にしてみてください。 「パーセントで配置したフラッシュについて」 http://oshiete1.goo.ne.jp/kotaeru.php3?q=1838609 ↑教えて！goo ↓OKWave （同じです） http://okwave.jp/kotaeru.php3?q=1838609 このご質問で引用されているURLはオブジェクトが多いのです。 １つ１つのオブジェクトに対して， 「基準点」がここで，スクリプトがこうで… と書いていると，とても書き切れませんし，作ろうとされているものはまた違うと思います。 すみませんが， 「Stage.onResizeリスナーイベント」 http://www.fumiononaka.com/TechNotes/Flash/FN0307003.html や，ムービークリップの基準点， 「インスタンスの基準点」 http://homepage3.nifty.com/ginga-b/MX/inst_refpoint.html などを参考にしながら， 上記「パーセントで配置したフラッシュについて」を中心に考えてみてください。
お礼
追加質問がありますがこのスレッドの質問は解決したので一度締め切りしてみます。ありがとうございました。
お礼
図形いりで分かりやすい説明ありがとうございます。 これから試してみようと思います。
補足
教えて頂いたとおり設定した所、ステージに合わせてオブジェが 自動で動くようになりました。ありがとうございます。 そこでまた一つフッター部分について質問があるのですが、 今回教えていただいた方法ですとブラウザを広げた時に一瞬 空白（背景色）が表示されてしまうのですが http://www.wwl.co.jp/のフッターはステージを広げた時に 背景色（このページでは白い壁の画像）がみえないように フッター（グレー色部分）が下方向＋左右方向に伸びていると思うのですが こちらの方法もご存知でしたら教えて頂けないでしょうか。 よろしくお願いいたします。