ブラウザに合わせた写真の拡大・縮小について

質問

色々試してみたのですが、どうしても解決できないので知恵をお貸し頂ければ幸いです。
http://oshiete1.goo.ne.jp/qa2479358.htmlのように、インスタンス"mcM"だけがブラ
ウザに合わせて拡大・縮小されるようにしたいのですが、現在途中まで作ったのが、ペー
ジ上部にあるサムネイルをクリックしたとき、外部jpgを空mc"photo"に読み込む形のもの
でして、この空mc"photo"を"mcM"に見立ててスクリプトを当てはめてみたのですが思う
ように拡大されず、読み込んだ写真が90°ずれて表示されたり、縦横の比率がおかしくなっ
たりして表示されます。

外部jpgでの読み込みにこだわっているわけではなく、単純に色々なサイズ（縦長・横長・
正方形）の写真をブラウザの中央へ配置して、ウィンドウの大きさが変わったら拡大写真
の部分だけ縮小できればよいのですが、何か良い方法がありませんでしょうか？
分りずらい説明で申し訳ありません。補足説明も致しますのでよろしくお願い致します。

回答No.2

BlurFiltan · ベストアンサー

＃１です。

> 写真が表示される際フェードイン・アウトする
> ようにスクリプトを書いていたのですが、

フェードアウトは，
ロードさせる前に関わることですから，
ボタンの方のスクリプトとの連携になります。
この辺はどうされているのかわかりませんし，
ご質問の内容ともズレてきますから御容赦ください。

フェードインは，
ロードと同時に開始されますから，
＃１のスクリプトとの連動になります。

JPEGがロードされる
　→ photo(MC) のアルファを 0 にする
　　→ アルファの値を徐々に大きくする
　　　→アルファが 100 になったらフェードイン終了

となるようにすれば良いわけですから，
MovieClipLoader が onLoadInit 通知を受け取った後にこれらを実行すれば良いということになります。
onLoadInit 通知を受け取った後であれば，だいたいどこでも良いと思います。
しかし，
ユーザ定義関数 designCoordinates の中に入れてしまうと，
ウィンドウのサイズが変わる度にフェードインしてしまいますから，
それ以前に実行する方が良いと思います。
☆ フェードイン に関するスクリプト ☆　と書いた下の部分に追加しています。

----------------------------------------------
// ムービーの拡大・縮小をなしにする
Stage.scaleMode = "noScale";
// ムービーを左上を基準に固定する
Stage.align = "TL";
// photo(MC) のステージに対する大きさを指定(※可変)
var photo_size = 60/100;
//
// photo(MC)の座標や大きさを指定するユーザ定義関数
// designCoordinatesの定義
function designCoordinates() {
// --- mcM の大きさに関するスクリプト ---
// もしステージの形が mcM の形より縦長であれば
if (Stage.height/Stage.width>=photo_ratio) {
// mcM の大きさをステージの幅との比で決定
_root.photo._width = Stage.width*photo_size;
_root.photo._height = Stage.width*photo_size*photo_ratio;
// もしステージの形が mcM の形より横長であれば
} else {
// mcM の大きさをステージの高さとの比で決定
_root.photo._width = Stage.height*photo_size/photo_ratio;
_root.photo._height = Stage.height*photo_size;
}
// photo(MC)の座標を指定
_root.photo._x = Stage.width/2-_root.photo._width/2;
_root.photo._y = Stage.height/2-_root.photo._height/2;
}
//
// ---ステージの大きさの変動に対するスクリプト---
// リスナーオブジェクトの作成
myListener = new Object();
//
// リスナーオブジェクト.onResize 関数の定義
myListener.onResize = function() {
if (photo_ratio != undefined) {
// ユーザ定義関数 designCoordinates の実行
designCoordinates();
}
};
//
// myListener を Stage.addListener に登録
Stage.addListener(myListener);
//
// ---ロード及びロード時の動作に関するスクリプト---
// ★ BitmapData クラス定義ファイルを読み込み
import flash.display.BitmapData;
//
// ロード用ムービークリップを作成
var ld_mc = _root.createEmptyMovieClip("load_mc", 1);
ld_mc._x = -2000;
// MovieClipLoader クラスのインスタンス photo_mcl を作成
var photo_mcl = new MovieClipLoader();
// 通知を受けるオブジェクト mcl_listener を作成
var mcl_listener = new Object();
//
// ロード完了時の動作を定義
mcl_listener.onLoadInit = function() {
// --- ☆ フェードイン に関するスクリプト ☆ ---
// photo(MC) のアルファを 0 にする
_root.photo._alpha = 0;
// アルファを徐々に加算するイベントハンドラメソッドの定義
_root.photo.onEnterFrame = function() {
// もしこの アルファ が 100 より小さいとき
if (this._alpha<100) {
// このアルファを 5 加算する
this._alpha += 5;
// それ以外の場合（アルファ100以上）
} else {
// このアルファを 100 で固定
this._alpha = 100;
// この onEnterFrame を削除
delete _root.photo.onEnterFrame;
}
};
// ★BitmapDataクラスのインスタンスを作成
var my_bmd = new BitmapData(ld_mc._width, ld_mc._height);
// ★イメージをロードしたMCを my_bmdイメージ 上に写し取る
my_bmd.draw(ld_mc);
// ★photo(MC) に my_bmd を割り当てる
_root.photo.attachBitmap(my_bmd, 1, "auto", true);
// 変数 photo_ratio に mcM の 縦/横 の比を算出
_root.photo_ratio = _root.photo._height/_root.photo._width;
// ユーザ定義関数 designCoordinates の実行（初回）
designCoordinates();
};
// photo_mcl のリスナーとして mcl_listener を登録
photo_mcl.addListener(mcl_listener);
// 外部 「image.jpg」 を ld_mc にロード
photo_mcl.loadClip("image.jpg", ld_mc);
----------------------------------------------

フェードアウト に関して少しだけ書いておきますと，
ボタンがクリックされてから，

// 外部 「○○.jpg」 を ld_mc にロード
_root.photo_mcl.loadClip("○○.jpg", ld_mc);

が実行されるまでにフェードアウトが行われるようにしなければならないと思います。

ボタンがクリックされたら
　→ photo のアルファの値を徐々に小さくする
　　→アルファが 0 になったらフェードアウト終了
　　　→ 「○○.jpg」 を ld_mc にロード

このような感じのことをコーディングする必要があると思います。
また，場合によっては，
違うボタンが連打されたときはどうするのかなどの対策も考える必要があるかもしれません(ないかもしれません)。

お礼

ご回答頂きありがとうございます。
本件とは関係ない質問にも丁寧にお答え下さり、本当にありがとうございました。
まだ理解できていない部分が多々あるので、これから少しずつ勉強したいと思います。
本当にありがとうございました。

回答No.1

BlurFiltan

スクリプトを分散させない方法で行くとすると，
Flash MX 2004 以上が必要ですが，
勝手に Flash MX 2004 以上をお持ちと解釈して，
外部 JPEG ロードには，
MovieClipLoader クラスの メソッドとイベントリスナーを使います。

とにかくオリジナルサイズでロードしてみないことには，その JPEG の 縦横比 がわかりませんからね。
全自動でするには MovieClipLoader などが必要となります。

外部 JPEG が 「image.jpg」 という名で SWF や HTML と同じフォルダにあるものとします。
また，外部 JPEG を表示させるMCには，photo というインスタンス名を付けてあるものとします。
書かれていらっしゃる URL のスクリプトとほとんど同じですが↓。

---------------------------------------------
// ムービーの拡大・縮小をなしにする
Stage.scaleMode = "noScale";
// ムービーを左上を基準に固定する
Stage.align = "TL";
//
// photo(MC) のステージに対する大きさを指定(※可変)
var photo_size = 60/100;
//
// photo(MC)の座標や大きさを指定するユーザ定義関数
// designCoordinatesの定義
function designCoordinates() {
//
// --- mcM の大きさに関するスクリプト ---
// もしステージの形が mcM の形より縦長であれば
if (Stage.height/Stage.width>=photo_ratio) {
// mcM の大きさをステージの幅との比で決定
_root.photo._width = Stage.width*photo_size;
_root.photo._height = Stage.width*photo_size*photo_ratio;
// もしステージの形が mcM の形より横長であれば
} else {
// mcM の大きさをステージの高さとの比で決定
_root.photo._width = Stage.height*photo_size/photo_ratio;
_root.photo._height = Stage.height*photo_size;
}
// photo(MC)の座標を指定
_root.photo._x = Stage.width/2-_root.photo._width/2;
_root.photo._y = Stage.height/2-_root.photo._height/2;
}
//
// ---ステージの大きさの変動に対するスクリプト---
// リスナーオブジェクトの作成
myListener = new Object();
//
// リスナーオブジェクト.onResize 関数の定義
myListener.onResize = function() {
if (photo_ratio != undefined) {
// ユーザ定義関数 designCoordinates の実行
designCoordinates();
}
};
//
// myListener を Stage.addListener に登録
Stage.addListener(myListener);
//
// ---ロード及びロード時の動作に関するスクリプト---
// MovieClipLoader クラスのインスタンス photo_mcl を作成
var photo_mcl = new MovieClipLoader();
// 通知を受けるオブジェクト mcl_listener を作成
var mcl_listener = new Object();
// ロード完了時の動作を定義
mcl_listener.onLoadInit = function() {
// 変数 photo_ratio に mcM の 縦/横 の比を算出
_root.photo_ratio = _root.photo._height/_root.photo._width;
// ユーザ定義関数 designCoordinates の実行（初回）
designCoordinates();
};
// photo_mcl のリスナーとして mcl_listener を登録
photo_mcl.addListener(mcl_listener);
// 外部 「image.jpg」 を photo にロード
photo_mcl.loadClip("image.jpg", photo);
---------------------------------------------

ページ上部（ステージ上部ですよね？）にあるサムネイルボタンでは，
_root.photo_mcl.loadClip("image1.jpg", photo);
とか，
_root.photo_mcl.loadClip("image2.jpg", photo);
などを実行させるようにすれば，
色々違う JPEG が読み込めると思います。

/////////////////////////////////////////////////////

ただ，上のままでは当然のごとく，
ロードされる写真が任意の大きさに拡大縮小されるため汚くなります。
もし Flash MX 2004 をお持ちの場合は，この辺で諦めてください。

もし，Flash 8 以降をお持ちでしたら，
BitmapData クラス のメソッドを使うと汚いのはごまかせます。
★ 印マークの部分が BitmapData クラス を使った改良点です。

---------------------------------------------
// ムービーの拡大・縮小をなしにする
Stage.scaleMode = "noScale";
// ムービーを左上を基準に固定する
Stage.align = "TL";
// photo(MC) のステージに対する大きさを指定(※可変)
var photo_size = 60/100;
//
// photo(MC)の座標や大きさを指定するユーザ定義関数
// designCoordinatesの定義
function designCoordinates() {
//
// --- mcM の大きさに関するスクリプト ---
// もしステージの形が mcM の形より縦長であれば
if (Stage.height/Stage.width>=photo_ratio) {
// mcM の大きさをステージの幅との比で決定
_root.photo._width = Stage.width*photo_size;
_root.photo._height = Stage.width*photo_size*photo_ratio;
// もしステージの形が mcM の形より横長であれば
} else {
// mcM の大きさをステージの高さとの比で決定
_root.photo._width = Stage.height*photo_size/photo_ratio;
_root.photo._height = Stage.height*photo_size;
}
// photo(MC)の座標を指定
_root.photo._x = Stage.width/2-_root.photo._width/2;
_root.photo._y = Stage.height/2-_root.photo._height/2;
}
//
// ---ステージの大きさの変動に対するスクリプト---
// リスナーオブジェクトの作成
myListener = new Object();
//
// リスナーオブジェクト.onResize 関数の定義
myListener.onResize = function() {
if (photo_ratio != undefined) {
// ユーザ定義関数 designCoordinates の実行
designCoordinates();
}
};
//
// myListener を Stage.addListener に登録
Stage.addListener(myListener);
//
// ---ロード及びロード時の動作に関するスクリプト---
// ★ BitmapData クラス定義ファイルを読み込み
import flash.display.BitmapData;
//
// ロード用ムービークリップを作成
var ld_mc = _root.createEmptyMovieClip("load_mc", 1);
ld_mc._x = -2000;
// MovieClipLoader クラスのインスタンス photo_mcl を作成
var photo_mcl = new MovieClipLoader();
// 通知を受けるオブジェクト mcl_listener を作成
var mcl_listener = new Object();
//
// ロード完了時の動作を定義
mcl_listener.onLoadInit = function() {
// ★BitmapDataクラスのインスタンスを作成
var my_bmd = new BitmapData(ld_mc._width, ld_mc._height);
// ★イメージをロードしたMCを my_bmdイメージ 上に写し取る
my_bmd.draw(ld_mc);
// ★photo(MC) に my_bmd を割り当てる
_root.photo.attachBitmap(my_bmd, 1, "auto", true);
// 変数 photo_ratio に mcM の 縦/横 の比を算出
_root.photo_ratio = _root.photo._height/_root.photo._width;
// ユーザ定義関数 designCoordinates の実行（初回）
designCoordinates();
};
// photo_mcl のリスナーとして mcl_listener を登録
photo_mcl.addListener(mcl_listener);
// 外部 「image.jpg」 を photo にロード
photo_mcl.loadClip("image.jpg", ld_mc);
---------------------------------------------

データ処理系のクラスが入っていませんが，それでも，
MovieClipクラス，Stageクラス，MovieClipLoaderクラス，BitmapDataクラス。
色んなクラスのオンパレードです。
ここまで書いても，
Flash がアニメーションするわけではなく，ただ表示されるというだけで悲しい物がありますが，
質問者様が書かれているようなことは，普通にただ表示させるにだけでも最低これくらいは必要なのです。
ですから普通はあまりしませんね。

ページ上部にあるサムネイルボタンでは，
_root.photo_mcl.loadClip("image1.jpg", _root.ld_mc);
とか，
_root.photo_mcl.loadClip("image1.jpg", _root.ld_mc);
などを実行させるようにすれば，
色々違う JPEG が読み込めると思います。

結局コレの弟４引数がポイントなだけですけどね↓。
_root.photo.attachBitmap(my_bmd, 1, "auto", true);

スムージングモードを有効にする場合は true ，無効にする場合は false です。
デフォルトの設定は true ですから，弟２引数まで書いただけでも，スムージングは ON になりますが，
強調するためにキッチリ書いてみました。
簡単に言うと，
このコミュニティの Flash カテゴリの，このご質問より１つ後の他の方の質問に，
私が回答した内容の，ActionScript版です。
http://okwave.jp/qa3530163.html

JPEGは，ビットマップ画像ですから，当然のごとく拡大縮小には弱いです。
これをすると，画質が良くなるわけではありませんが，
Photoshop のバイキュービック法で画像を拡大縮小させるときのように，
ドットのギザギザにぼかし（アンチエイリアスみたなもの）がかかって目立たなくなります。

お礼

さっそくご回答いただき、誠にありがとうございます。
試したところ、イメージ通りに動きました！本当にありがとうございます。
単純な動作だと思っていたので、簡単にできるかなと思っていたのが間違い
でした。Flashは本当に奥が深いですね。

以前の空mc"photo"に、写真が表示される際フェードイン・アウトする
ようにスクリプトを書いていたのですが、アルファを適用させるには、
どの部分にスクリプトを書けばよいのでしょう？
もし差し支えなければお教えいただければ幸いです。
制作環境は、Flash8 / CS3 です。

↓こんな風に書いていました。
onClipEvent (load) {
// このアルファを 0 にする
this._alpha = 0;
}

// 1フレーム進む時間ごとに毎回実行
onClipEvent (enterFrame) {

// もしこの アルファ が 100 より小さいとき
if (this._alpha<100) {
// このアルファを 5 加算する
this._alpha += 5;
// それ以外の場合（アルファ100以上）
} else {
// このアルファを 100 で固定
this._alpha = 100;
}
}