• ベストアンサー

背景画像が拡大縮小しつつ、大きさが一定のメニューを固定配置するには?

flashにて、背景画像がブラウザの大きさに合わせて拡大縮小しつつ、 大きさが一定のメニューを固定配置するデザインを制作しようと思っています。 イメージとしては下記サイトのように、写真がブラウザに合わせて 伸縮するようにし、ブラウザ中心位置には大きさが一定のメニュー、 ブラウザ最下部にはヘッダーを配置したいと思っています。 http://www.creative-box.co.jp/ これまで数々の質問系サイトを見てまわり、独自に試行錯誤を繰り返したのですが、 部分的な質問&解説しか見当たらず、途方に暮れています。 そもそも上記サイトの場合、ステージサイズをどの程度にし、 どの程度の画像を用意すればいいのかすらわからない状態です。 どなたかご教授願えれば幸いです。

  • 0or1
  • お礼率100% (2/2)
  • Flash
  • 回答数2
  • ありがとう数7

質問者が選んだベストアンサー

  • ベストアンサー
  • Dimen9100
  • ベストアンサー率78% (18/23)
回答No.1

基本的にはhttp://hfm-kenchan.com/Lesson/contents/index.htm のサンプルNo.757でしょうか? 同系統のサンプルもありましたので参考にしてみてはいかがでしょうか?

0or1
質問者

お礼

素早いご対応ありがとうございます。 非常に参考になりそうですので、一度試してみます。 本当にありがとうございました。

その他の回答 (1)

  • U-inu
  • ベストアンサー率66% (2/3)
回答No.2

"bg_mc"と名づけられたインスタンス(上のアドレスの例では写真)と、その上に適当なインスタンスを置いて、1フレーム目に以下のスクリプトを書いてみてください。 ratio = _root.bg_mc._width / _root.bg_mc._height; myListener = new Object(); myListener.onResize = function() { h = Stage.height; _root.bg_mc._width = h*ratio; _root.bg_mc._height = h; }; Stage.addListener(myListener); ムービープレビューしてウィンドウの大きさを変えてみてください。ウィンドウのサイズに合わせて"bg_mc"の大きさが変わりますが、適当においたインスタンスの方は大きさは変わらないと思います。

0or1
質問者

お礼

返信が遅れて申し訳ありません。 追加のご回答ありがとうございます。 おかげさまで、“リスナーオブジェクトを作成し、 ステージの大きさに応じて、写真の大きさを変化させる” という概念がようやく理解でき、目的のサイトに近づき つつあります。 本当にありがとうございました。

関連するQ&A

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

    こんばんは。 いつもお世話になります。 現在FLASHでサイトを作成していますが、以下サイトのように、 ブラウザサイズを変更すると背景の画像はリサイズされますが、 真ん中にあるメニューを含めたオブジェクトはブラウザサイズを 変更してもリサイズされないようなものを作りたいと考えています。 http://www.minus.dk stage.scaleModeにNO_BORDERを指定すれば背景画像はリサイズされますが、 他のオブジェクトもリサイズされてしまいます。 何か良い方法はないでしょうか? ご教授宜しくお願いいたします。

    • ベストアンサー
    • Flash
  • CSSでのテキストの下に画像などを配置したい。

    CSSでレイアウトしたページを作っています。 画面左のナビをテキストで作成しました。 (ヘッダーの下に、左のナビと右のメインエリアという構造) テキストの周囲をボーダーで囲んであります。 (TABLEは使っていません) テキストでの一覧のメニューの下に、画像のボタン等を配置したいのですが、メニューのテキストのテキストサイズを固定していないため、ブラウザの文字サイズを大きくしたりすると、メニューが縦に伸びたりします。 この時、メニューの下に配置する画像を、上のメニューの大きさ(縦幅)が変わってもそれに合わせて配置を上下させたいのですが、どうすればいいのでしょうか? とりあえずposition:absoluteでは絶対位置で指定されてしまうので、うまくいかないってことは分かっているのですが・・・ CSS自体まともに使うのは初めてなので、本等で調べながらやっているのですが、この部分が解決できません。

  • サイトは中央配置、背景に画像、または色をつける

    css初心者です。 サイト(すみませんこの言葉でいいでしょうか?)を ブラウザ画面の中央に配置したいとき cssでbodyを中央配置にしています。 その両サイドにも、色または画像をつけたいのです。 テーブルを使用せず 下記のページのように サイトは中央に配置、背景に色や画像をつけるには cssでどのように指定すれば よろしいでしょうか? http://www9.nhk.or.jp/umechan/ http://www.nikoand.jp/ よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • ブラウザのウインドウ下部に画像を固定する方法

    Webプログラミングに関する質問です。 ブラウザのウインドウ下部に画像を固定する方法があれば教えて下さい。 例になるサイトが無くて申し訳ないのですが、 まず、webブラウザのウインドウ一面にスクロールなしで画像Aを配置し、 その画像に重なるように、もう一枚の画像B(バナーのような横長のもの)を ウインドウの底に固定させて配置する方法がわかりません。 「ウインドウのサイズを変更させることで、画像Aが画像Bの下に隠れる」 というページを作りたいのですが、 知恵不足でつまずきました。 説明が下手で申し訳ありませんが、 分かる方がいらっしゃいましたら、よろしくお願いします。

    • ベストアンサー
    • CSS
  • 画像の横にメニューボタンを並べたい

    企業HPなどでロゴ画像のすぐ横にメニューボタンが綺麗に並んでいるヘッダースタイルをよく見かけますが、どう設定すれば画像とテキストを水平線上に並べられますか? web初心者ゆえ参考サイト等色々調べて見よう見まねでやってみたのですが、横には並ぶものの画像の下部、下揃えにテキストが並んでしまいうまくいきません。 画像の中心部から横1列にしたいのですが… テーブルをはめ込めばよいのでしょうか? また、ウィンドウを縮めると連動してテキストが勝手に動いて段分かれしてしまうのも気になるのでこの問題も宜しければ教えて頂けないでしょうか。 何卒宜しくお願いします。

    • ベストアンサー
    • CSS
  • ブラウザの横幅に合わせて等間隔に画像を配置したい

    やりたいことは、 画像A[]画像B[]画像C[]画像D・・・ 余白:[ ] という形で、複数の画像を等間隔で並べて(画像は全て同じサイズ)、 ブラウザの横サイズを変えたら、それに合わせて画像の間のマージンが伸縮し、 常に画像同士が等間隔に並ぶようにしたいです。 そして、余白が一定以下になった場合は、 画像A[]画像B[]画像C 画像D[] という形で1つずつ左下に表示されるようにしたいと考えています。 画像と画像の間のマージンが固定のものは色々なサイトで見かけたのですが、 上記のように可変のものを見つけることが出来なかったので質問を投稿しました。 上記を実現できる(または参考になるような)テンプレートやjQueryプラグイン、参考サイトなどを ご存知の方はおられないでしょうか。

    • ベストアンサー
    • CSS
  • 「画像を一定時間ごとに切り替えていくJavascriptスクリプト」

    「画像を一定時間ごとに切り替えていくJavascriptスクリプト」 TOPページの画像を1時間ごと(getHoursを使ってだと思うのですが)に切り替えるよう試行錯誤しています。 画像が外部サイトにある場合どのようなスクリプトを書けば良いでしょうか? 初歩的な質問で申し訳ありませんが、アドバイスお願いします。

  • web用画像(ボタンや背景画像)を作る上でのサイズの決め方

    現在htmlなどweb関係の勉強をしていて、ちょっとphotoshopでナビゲーションメニューの画像を作っています。 そこで疑問に思ったのですが、ヘッダーの横幅の決め方ってみなさんどうしていますか?もちろん、デザインによって様々すぎるのでなんともいえないと思いますが、基本的なセンターよせの2カラムとかのサイトで、ヘッダー部分に横並びのナビゲーションメニューがあるようなサイトの場合でお願いします。 完全に感覚的なものなのか、それともある程度「サイズの決め方」というものがあるのか…そこを教えてください。(見る人によってモニタのサイズも変わってくるので、最高でもこれ以上は大きくしない…とか、最近では○○くらいのサイズのモニタが多く普及してるからそれを基準に、モニタサイズの○%で…など。) 決まった答えはないかと思いますが、個人的な意見でもいいので教えていただければと思います。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 【jQuery】画像タブ切り替えの上下配置について

    はじめて質問させていただきます。 もしお分かりになる方がいらっしゃいましたら是非教えて頂けないでしょうか。 ただいま、下記のサイトを参考に 同じページ内で内容を切り替える「タブ(画像使用)」を使用したページを制作中です。 <参考ページ>http://depthcode.com/2011/08/tab-img.html 通常、タブの配置は1か所にて使用するかとおもいますが ページの高さがあるため、切り替える部分の上部と下部に 同じ内容のタブスペースを設けたいと思うのですが 上部と下部のナビゲーションのステータスが同期せず詰まっている状態です。 タブの仕様は、 1~4までの番号画像(通常時とアクティブ時の2つの画像をそれぞれ用意)を配置し 本文1~4それぞれ該当した要素が表示されているときに タブ番号画像がアクティブ状態になるというものです。 このタブを、たとえば<上部タブの1>を押してアクティブにしたときには 連動して<下部タブの1>もアクティブになる、というものとしたいのですが 上記サイト参照した場合だと上部タブはアクティブになり下部タブは通常の状態となります。 (画像のようになるのが理想です。現状は、下部タブのピンク色の「1」がとなりの「2」と同じ状態となります。) ※画像タブのサンプルコードや解説サイトが意外に少なくて本当に手探り状態です。   あまりこういう使い方はされないものなのですかね… 解決方法などお分かりになる方がいらっしゃいましたら お教えいただけると幸いです。どうぞよろしくおねがいします。

  • 背景画像の変更と保存

    1.プルダウン(セレクト)メニューで画像名を選択すると、背景画像が変更できる 2.背景画像によって、配置位置を指定できる(右上固定/全面に繰り返し表示等) 3.ブラウザを閉じて開いても、選択した画像が背景に表示される 下記がイメージに近いのですが、2と3の機能がありません。 http://www2s.biglobe.ne.jp/~club_tom/java-kouza/sample/ha/ha-no5_2/ha-no5_2.htm 再現できるスクリプトを紹介して頂けると助かります。宜しくお願い致します。

    • ベストアンサー
    • HTML

専門家に質問してみよう