- ベストアンサー
縦横比率を変えずに画像のサイズを変更する方法
- 縦横比率を変えずに画像のサイズを変更する方法について教えてください。
- ユニクロドットコムのように高画質な写真をセンターに配置し、縦横の比率を保ちながらサイズを変更したいです。
- 大きなサイズのディスプレイで見た人には背景を出し、小さいなサイズのディスプレイで見た人には全画面で表示する方法を教えてください。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
書かれているご質問の文章と， ユニクロドットコムのページは全然違うように思いますが， 本当にこちらのページ↓で合っていますか？ 「Uniqlo.com」 http://www.uniqlo.com/jp/ > 写真の縦横の比率は変えずに、 > 縦は常にブラウザの上下と同じサイズで、 ぜんぜんそのようにはなっていませんが... 確かに，写真の縦横の比率は変わりませんが， そうではなくて， 横がは常にブラウザの横幅サイズに影響されています。 また， > 大きなサイズのディスプレイで見た人には左右に背景を出し、 ユニクロの場合は， 大きなサイズのディスプレイでも，小さなサイズのディスプレイでも， 常にメニューのようなものが表示されていますよ。 ぜんぜんちがう内容のことを２つ書かれても， どう回答して良いのか迷ってしましますが......。 また，これも意味がわかりません↓。 > 大きなサイズのディスプレイで見た人には左右に背景を出し、 > 小さいなサイズのディスプレイで見た人には全画面で見える。 左右に背景が見えたり見えなかったりするのは， 大きなサイズのディスプレイとか， 小さいなサイズのディスプレイとかいう問題ではなく， 単ウィンドウの縦横比で左右に背景が見えたり見えなかったりさせるのではないでしょうか？ 書いている内容自体も矛盾していますね。 Flash の作成に取りかかる以前に， 「何をどうしたいのか」を具体的にしっかりイメージしましょう。 そうしないと，できないと思います。 ======================================= 違うことや矛盾することが多く謎だらけですから， 次の部分についてのみ，作成サンプルを回答します。 > 写真をセンターに配置したいです。 > その際に写真の縦横の比率は変えずに、 > 縦は常にブラウザの上下と同じサイズで、 まず，Flash で 新規ドキュメント を作成してください。 作成したら，「ファイル」→「パブリッシュ設定」で，HTML タブ を選択し， サイズ(D): [ムービーに合わせる ]▼ の部分を， サイズ(D): [パーセント ]▼ 幅(W) : 高さ(E) : [100 ] × [100 ] パーセント にして「OK」をクリック。100％の設定にしておきます。 そして， ステージ上に 「縦に長めの塗りの長方形」 を描いてください。 これは写真に見たてている物で，写真でもかまいませんが， 長方形の塗りを描くだけでも十分サンプルにはなります。 大きさは適当でかまいません。 横幅150px，高さ200pxくらいの大きさで良いと思います。 その 「縦に長めの塗りの長方形」 を全部選択して， 「修正」→「シンボルに変換」で ムービークリップ に変換するわけですが， 変換する際の「基準点」に注意してください。 実際にはどこを基準点としても良いのですが， 座標計算の都合上，この回答では， 上の中央↓にしておいたということにします。 基準点(R) □■□ □□□ □□□ 基準点が上の中央の「縦に長めの塗りの長方形」ムービークリップができましたら， そのムービークリップにインスタンス名を付けます。 この説明では 「my_mc」 というインスタンス名を付けたとしておきます。 そして， レイヤーを１つ追加して，ActionScript 専用レイヤーにします。 その新しいレイヤーの空白キーフレームを選択して， 次のスクリプトを書き（コピペし）， SWF と HTML をパブリッシュすればサンプルの完成です。 ------------------------------------- // ステージ上のオブジェクトの拡大縮小なし Stage.scaleMode = "noscale"; // ムービーを左上に配置 Stage.align = "TL"; // //ムービークリップの縦横比を算出 mc_w = _root.my_mc._width/_root.my_mc._height; // // リスナー用オブジェクトの作成 myListener = new Object(); // ステージ拡大縮小時の onResize を動作定義 myListener.onResize = function() { //ムービークリップを中央に表示 _root.my_mc._x = Stage.width/2; _root.my_mc._y = 0; //ステージの高さによってムービークリップの大きさを変える _root.my_mc._height = Stage.height; _root.my_mc._width = mc_w*_root.my_mc._height; }; // 上記 onResize の動作を初回実行 myListener.onResize(); // // ステージクラスにリスナー用オブジェクトを登録 Stage.addListener(myListener); ------------------------------------- Stage.scaleMode = "noscale"; これで，ムービーの中身の大きさをウィンドウの大きさによって変化させないようにしておいて， Stage.align = "TL"; これで，基準となる座標位置を左上と決定しておきます。 あとは，ステージのサイズを監視するリスナーオブジェクトを作って， ステージのサイズが変わるたびに， 各ムービークリップ（上記の場合１つのムービークリップ）の座標や大きさを， スクリプトによって随時更新させるということです。 それだけのことと言えば，それだけのことです。 あと，Flash ではなく，HTMLの話ですが， Flash の周りの余白が気になるようでしたら， パブリッシュされた HTML の <body>タグ， <body bgcolor="#ffffff"> などとなっている部分を， <body bgcolor="#ffffff" leftmargin="0" topmargin="0"> などのように変更すれば隙間はなくなると思います。 ======================================= その他の点につきましては， どういうことをしたいのかがわかりませんから，書けません。 上に書いたことや，次のURL群を参考にしてみてください。 Flashの表示サイズを動的に変更させる方法 http://oshiete1.goo.ne.jp/qa2479358.html ↑教えて！goo ↓OKWave（同じです） http://okwave.jp/qa2479358.html 「画面サイズが変わると移動するスクリプト」 http://oshiete1.goo.ne.jp/qa2326170.html ↑教えて！goo ↓OKWave（同じです） http://okwave.jp/qa2326170.html Flashゲーム講座＆ASサンプル集 【表示に関する情報について】 http://hakuhin.hp.infoseek.co.jp/main/as/stage.html
その他の回答 (1)
＃１です。 「縦と横のどちらを基準に，もう片方を決めているのでしょうか？」 ということを考えるとどこが間違っているのかわかると思いますよ。 ＃１の補足で書かれている不正解部分↓ //ステージの高さによってムービークリップの大きさを変える _root.my_mc._height = mc_w*_root.my_mc._width; _root.my_mc._width = Stage.width; 正解↓ //ステージの高さによってムービークリップの大きさを変える _root.my_mc._width = Stage.width; _root.my_mc._height = mc_w*_root.my_mc._width; 横を基準に大きさを変化させて， その横幅を基準に高さを決定するのですから， 順序が逆ですね。 ではなぜ， > 自分でウィンドウを動かすと形が正常に戻り、 > 求めていた動きをするのです。 という現象が起きるのかというと， 実は，「形が正常に戻り」状態ではないのです。 前の段階の横幅を基準に高さが決まっただけなのです。 ですから，ワンテンポずれています。 ウィンドウの形を動かし続けると， 繰り返し，myListener.onResize が実行されます。 このときの高さはほんの少し前の横幅を基準にするため， ほとんど誤差は無いに等しいですが， 厳密には前の瞬間の横幅によって高さが決定されるので， ほんのワンテンポずつ遅れて高さが決まっています。 ですから， 毎回少しずつ誤差があるので，本当は「形が正常に戻り」状態にはなっていないのです。 そういう感じで， １つずつ（１行ずつ）ちゃんと考えて行くと， たいていの場合，自分で組みたてた理論通りに動くと思いますよ。
お礼
至らぬ質問への回答、本当にありがとうございます。 まさに、sassakunさんが回答してくださったことがやりたかったのです。教えていただいたスクリプトを元にいろいろ実験してみました。 MCのサイズの縦のみをブラウザのサイズに依存させれるならと思い、自分なりに改造してMCのサイズの横のみをブラウザのサイズに依存させる実験をしてみました。 基準点(R) □□□ ■□□ □□□ ======================================= // ステージ上のオブジェクトの拡大縮小なし Stage.scaleMode = "noscale"; // ムービーを左上に配置 Stage.align = "TL"; // //ムービークリップの縦横比を算出 mc_w = _root.my_mc._height/_root.my_mc._width; // // リスナー用オブジェクトの作成 myListener = new Object(); // ステージ拡大縮小時の onResize を動作定義 myListener.onResize = function() { //ムービークリップを中央に表示 _root.my_mc._x = 0; _root.my_mc._y = Stage.height/2; //ステージの高さによってムービークリップの大きさを変える _root.my_mc._height = mc_w*_root.my_mc._width; _root.my_mc._width = Stage.width; }; // 上記 onResize の動作を初回実行 myListener.onResize(); // // ステージクラスにリスナー用オブジェクトを登録 Stage.addListener(myListener); ======================================= が、この方法ですとバブリッシュ後は形が狂ってしまいます。 自分でウィンドウを動かすと形が正常に戻り、求めていた動きをするのです。 ちょっと自分には早すぎたのかもしれません。 もし、お時間ありましたらどこの考え方が間違っているのか教えていただけませんか？ よろしくお願いいたします。 m(_ _)m