縦横比率のを変えずに画像のサイズを変更したい

Question

よろしくお願いいたします。

■環境
MAC OS 10.4.9
Flash 8 Pro
ActionScript 2.0
フルスクリーンのフルフラッシュ


ユニクロドットコムの様に高画質な写真をセンターに配置したいです。
その際に写真の縦横の比率は変えずに、
縦は常にブラウザの上下と同じサイズで、
大きなサイズのディスプレイで見た人には左右に背景を出し、
小さいなサイズのディスプレイで見た人には全画面で見える。
という風にしたくて色々と試行錯誤しておりますが、上手くいきません。

まさに目指す見え方がユニクロドットコムのトップページなのですが、やはり中村勇吾さんのようにはいきません・・・。
どなたかご掲示いただけませんか。

よろしくお願いいたします。m(_ _)m

sassakun · Accepted Answer

書かれているご質問の文章と，ユニクロドットコムのページは全然違うように思いますが，本当にこちらのページ↓で合っていますか？「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 のタグ，などとなっている部分を，などのように変更すれば隙間はなくなると思います。 ======================================= その他の点につきましては，どういうことをしたいのかがわかりませんから，書けません。上に書いたことや，次の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 　

sassakun · Answer

＃１です。

「縦と横のどちらを基準に，もう片方を決めているのでしょうか？」
ということを考えるとどこが間違っているのかわかると思いますよ。


＃１の補足で書かれている不正解部分↓

//ステージの高さによってムービークリップの大きさを変える
_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 が実行されます。
このときの高さはほんの少し前の横幅を基準にするため，
ほとんど誤差は無いに等しいですが，
厳密には前の瞬間の横幅によって高さが決定されるので，
ほんのワンテンポずつ遅れて高さが決まっています。
ですから，
毎回少しずつ誤差があるので，本当は「形が正常に戻り」状態にはなっていないのです。


そういう感じで，
１つずつ（１行ずつ）ちゃんと考えて行くと，
たいていの場合，自分で組みたてた理論通りに動くと思いますよ。

縦横比率のを変えずに画像のサイズを変更したい

書かれているご質問の文章と，

＃１です。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング