画像を中央にズームさせるには

質問

Flash超初心者です。
小さな画像が2、3個横に並んでいて、一つをクリックすると中央にズームし、他の画像をクリックすると先にズームされていた画像がもとの小さな画像に戻るようにしたいです。
http://www.suntory.co.jp/sho-chu/srk/urabanashi.html

過去ログに参考になるものがあり
http://oshiete1.goo.ne.jp/kotaeru.php3?q=1444680
少し変更して下記のようにしました。

onClipEvent (load) {
yScl = this._yscale;
xScl = this._xscale;
yPos = this._y;
xPos = this._x;
}
on (rollOver) {
this.onEnterFrame = function() {
this._yscale *= 1.1;
this._xscale *= 1.1;
if (this._yscale>=yScl*2.5) {
this._yscale = yScl*2.5;
this._xscale = xScl*2.5;
this.swapDepths(++_root.Depth);
}

};
}
on (rollOut, dragOut) {
this.onEnterFrame = function() {
this._yscale *= 0.9;
this._xscale *= 0.9;
this._y += (yPos-this._y)*0.3;
this._x += (xPos-this._x)*0.3;
if (this._yscale<=yScl) {
this._yscale = yScl;
this._xscale = xScl;
this._y = yPos;
this._x = xPos;
this.onEnterFrame = null;
}
};
}

でも、これは画像のある同じ場所でズームするので画面の中央でズームさせたいです。
座標を指定すればいいという理屈はわかるのですが、どの部分にどういASを入れたらいいのがわかりません。
また、上記のASでは、ズームしたあとマウスがオブジェクトからはずれると画像がもとの大きさにもどってしまいます。
on (rollOut, dragOut)と入れているからでしょうが、では何を入れたらいいの悩んでしまいましてご相談させていただきました。
どなたかご教授ください。よろしくお願いいたします。

回答No.1

noname#35109 · ベストアンサー

まず，中央の座標を求める部分ですが，

Stage.height/2

これでステージの高さの1/2が求められるので，オブジェクトの ｙ座標 をこれに近づけるようにすれば良いと思います。また

Stage.width/2

これでステージの幅の1/2が求められるので，オブジェクトの x座標 をこれに近づけるようにすれば良いと思います。

あと，動く部分ですが，
大きくなったり小さくなったりする部分は， on (release) （オブジェクトをクリックする） でフラグの値を変えて，
そのフラグの値によって，オブジェクトを小さくしたり大きくしたりすれば良いと思います。

==================================

ステージ上に４つのムービークリップがあったとします。
その４つのムービークリップに自分の頭の中で 1～4 の番号を勝手に付けてください。
どれが1でどれが4でも良いです。

まずフラグ(変数flgとします)と共通な変化率を，タイムラインのスクリプトで設定してしまいます。
それのほうが，調整が一気にできるので編集が楽です。
次のスクリプトを，タイムラインのフレーム1などに書いてください(コピペで大丈夫です)。

------------------------------------
//動くスピードの設定(可変)
spd = 0.2;
//拡大率の設定(可変)
mag = 2.5;
//flg1～4の初期値設定
flg1 = 0;
flg2 = 0;
flg3 = 0;
flg4 = 0;
------------------------------------

可変 と書いてある部分はちょうど良い感じに変えてください。

次に，自分の頭の中で勝手に 1 と決めたムービークリップに次のスクリプトを書いてください。

※見やすくするために，各行の先頭には全角空白文字を入れています。
　コピペする場合は，申し訳ありませんが，全角空白文字を削除してください。
------------------------------------
onClipEvent (load) {
　　　//初期座標と大きさを記録
　　　yScl = this._yscale;
　　　xScl = this._xscale;
　　　yPos = this._y;
　　　xPos = this._x;
}
on (release) {
　　　//_root の変数 flg1が 0 であれば
　　　if (_root.flg1 == 0) {
　　　　　　_root.flg1 = 1;
　　　　　　_root.flg2 = 0;
　　　　　　_root.flg3 = 0;
　　　　　　_root.flg4 = 0;
　　　　　　this.swapDepths(++_root.Depth);
　　　//_root の変数 flg1が 0 でなければ
　　　} else {
　　　　　　_root.flg1 = 0;
　　　}
}
onClipEvent (enterFrame) {
　　　//_root の変数 flg1が 0 であれば
　　　if (_root.flg1 == 0) {
　　　　　　//初期座標と大きさに近づける
　　　　　　this._yscale += (yScl-this._yscale)*_root.spd;
　　　　　　this._xscale += (xScl-this._xscale)*_root.spd;
　　　　　　this._y += (yPos-this._y)*_root.spd;
　　　　　　this._x += (xPos-this._x)*_root.spd;
　　　//_root の変数 flg1が 0 でなければ
　　　} else {
　　　　　　this._yscale += (_root.mag*yScl-this._yscale)*_root.spd;
　　　　　　this._xscale += (_root.mag*xScl-this._xscale)*_root.spd;
　　　　　　//ステージの中央に近づける
　　　　　　this._y += (Stage.height/2-this._y)*_root.spd;
　　　　　　this._x += (Stage.width/2-this._x)*_root.spd;
　　　}
}
------------------------------------

これで書かれているスクリプトの感じはできると思います。
自分で勝手に決めたムービークリップ2～4は，

　　　//_root の変数 flg1が 0 であれば
　　　if (_root.flg1 == 0) {
　　　　　　_root.flg1 = 1;
　　　　　　_root.flg2 = 0;
　　　　　　_root.flg3 = 0;
　　　　　　_root.flg4 = 0;

の部分と，

　　　//_root の変数 flg1が 0 であれば
　　　if (_root.flg1 == 0)

の部分を変えて書いてください。
例えば，勝手に決めた 4 のムービークリップには次のように書くことになります。

※見やすくするために，各行の先頭には全角空白文字を入れています。
　コピペする場合は，申し訳ありませんが，全角空白文字を削除してください。
------------------------------------
onClipEvent (load) {
　　　yScl = this._yscale;
　　　xScl = this._xscale;
　　　yPos = this._y;
　　　xPos = this._x;
}
on (release) {
　　　if (_root.flg4 == 0) {
　　　　　　_root.flg1 = 0;
　　　　　　_root.flg2 = 0;
　　　　　　_root.flg3 = 0;
　　　　　　_root.flg4 = 1;
　　　　　　this.swapDepths(++_root.Depth);
　　　} else {
　　　　　　_root.flg4 = 0;
　　　}
}
onClipEvent (enterFrame) {
　　　if (_root.flg4 == 0) {
　　　　　　this._yscale += (yScl-this._yscale)*_root.spd;
　　　　　　this._xscale += (xScl-this._xscale)*_root.spd;
　　　　　　this._y += (yPos-this._y)*_root.spd;
　　　　　　this._x += (xPos-this._x)*_root.spd;
　　　} else {
　　　　　　this._yscale += (_root.mag*yScl-this._yscale)*_root.spd;
　　　　　　this._xscale += (_root.mag*xScl-this._xscale)*_root.spd;
　　　　　　this._y += (Stage.height/2-this._y)*_root.spd;
　　　　　　this._x += (Stage.width/2-this._x)*_root.spd;
　　　}
}
------------------------------------

これは，ムービークリップの基準点（ + 印 ）が，ムービークリップの中心になければ，ずれます。
もし，ステージの中央ではない場所に動いた場合

ムービークリップの基準点
http://homepage3.nifty.com/ginga-b/flash5/mc_refpoint.html

などを参考にムービークリップの基準点を操作するか，

　　　　　　this._yscale += (_root.mag*yScl-this._yscale)*_root.spd;
　　　　　　this._xscale += (_root.mag*xScl-this._xscale)*_root.spd;

の _root.mag*xScl に補正値を加算してください。

また，ムービークリップが４つであると仮定したために，
変数 flg1～4 をいちいち書いていますが，もっと増える場合は for 文で一気に指定してしまう方が良いと思います。
for 文の使い方はもしわからない場合こちら↓を参考にしてみてください。
「質問：自分以外のMCを透明に」
http://oshiete1.goo.ne.jp/kotaeru.php3?q=1719067
↑教えて!goo　　↓OKWave　(同じです)
http://okwave.jp/kotaeru.php3?q=1719067

お礼

sussakun様、早々のご返事ありがとうございます！

「中央の座標を求める部分」はこういうふうになるのですね。
できるだけASの意味を考えながら一字一字入力してみました。
ちゃんと動作しました！
素晴らしいです！！！
どうしてこれだけの長いASをスラスラ書けるのか、感激の一言です。
ASは本当に難しいですね・・・。
もしよろしければ、初心者がすんなり入れるASの本をご紹介いただけませんか？
思ったとおりに動作してとても嬉しいです！本当にありがとうございました！

補足

思ったとおりに動作できたので実質上回答は締め切らせていただきます。
sassakun様がASの本をご紹介くださるかもしれないので、入力ができるように2～3日はこのままの状態にしておき、その後、ポイント入力と締め切りをさせていただきます。

回答No.2

noname#35109

＃１です。

> ASの本をご紹介くださるかもしれないので、

ということですが，すみませんけど私のことは全然参考にならないと思います。
以前にも，他の方から聞かれたことがありますが，
隠しているわけでも何でもなくて，ASの本は持っていないのです。
本当は本を買って，色々な方からASの本当の解釈のしかたとかを学んで吸収したほうが良いと思いますが，とりあえず目の前にある問題は，ヘルプとネット検索で形がつくので，それでやっています。
ヘルプ：ネット＝3：2 くらいの活用だと思います。
他の方からも質問されたときにも答えたのですが，私はヘルプマニアかもしれません(笑)。
gooなら　http://oshiete1.goo.ne.jp/kotaeru.php3?q=1571841
OKWaveなら　http://okwave.jp/kotaeru.php3?q=1571841
の＃３の後半部分です。

---それでは申し訳ないので今回の＃１を書いた経緯-----------

今回＃１で書いた方法は実は第２案です。

私は，基本的にAS人間ではなくて，モーショントゥイーン人間です。
それではできない変数の設定や条件分岐をASでカバーするくらいです。
◎ それではここではウケがあまり良くない(゜-゜;)ヾ(-_-;) ウケ狙いかい...。
◎ ついでにモーショントゥイーンで説明するよりASで説明する方が簡単。
◎ ついでにここは[プログラム]-[Flash]カテゴリである。

ということからASで答えられる物はASで答えるようにしています。

今回の場合とりあえず，ご質問を見ました。

でも，近くの100円均一ショップ(徒歩３分)まで行く用事があったので，
往き道でモーショントゥイーンでする方法の骨子だけを頭の中だけで完成させました。
それが以下のようなものです。

ステージ上に丸でも四角でも何でも良いのでステージの端に何かを書きます。
「シンボルに変換」でグラフィックシンボルにします。
そのグラフィックシンボルをさらに「シンボルに変換」でムービークリップにします。
そのムービークリップをダブルクリックしてムービークリップ内を編集します。
適当に20フレームくらいまで追加して，最終フレームをキーフレームにして，
その最終フレームの適当に書いたグラフィックシンボルをステージ中央に持って行き，
大きさを適当な大きさに拡大して，
１フレームから，最終フレームまでをモーショントゥイーンでつなげます。
タイムラインを図示すると以下のような感じです。

　　　　　　初期位置↓　　　　　　　　　　　　　拡大＆中央↓
□　レイヤー　筆・・|●------------------------->|●|

それで，
ドキュメントの編集に戻って，今作ったこのムービークリップに次のようなスクリプトを書きます。
-----------------------------
onClipEvent (load) {
stop();
flg = 0;
}
on (release) {
//flg の値が0なら1を，0でなければ0を代入
if (flg == 0) {
flg = 1;
} else {
flg = 0;
}
}
onClipEvent (enterFrame) {
//flg の値が0なら前のフレームへ0でなければ次のフレームへ
if (flg == 0) {
prevFrame();
} else {
nextFrame();
}
}
----------------------------

モーショントゥイーンを使って１つのムービークリップ内の動きだけを考えた場合，これだけで済みます。
フラグをクリックの度に入れ替えて，フラグの値によって前へ進むか，後戻りするかです。
あとは，フラグを外部に持っていって複数のムービークリップを操作するのと，
イージングをかけて雰囲気を出すのと，
質問者さまが書かれている　swapDepths(++_root.Depth);　で深度を変えればOKです。
たいていの場合，そんなに凝ったスクリプトを使わなくても，
play();　と　stop();　と　gotoAndPlay();　と　gotoAndStop();　だけでかなりなことができます。
prevFrame(); 　nextFrame();　は　gotoAndStop();　の親戚です。
もし MX2004 をお使いでしたら，親戚に思えないかもしれませんが，
MX 以前や Flash8 では，ノーマルモードがあって(Flash8では スクリプトアシスト と改名)，
gotoAndPlay();　gotoAndStop();　prevFrame(); 　nextFrame();　はチェックを付けるだけで自動で切り替わります。
goto関係以外では，　getURL("");　でも加えれば外部へも行けるので言うことなしです。
ただマウスの座標に応じてとか，外部の何かを load してとかになってくると凝ったASが必要になります。

それで，100円均一ショップからの帰り道で，
「これでは，ダメだろうな～。引用されてる前のURLでもAS使ったしな～。」
というわけで，
「初期座標と大きさは，変数に持たせておいて，ステージの中央へ動かすようにすれば良いな。」
「でもステージ中央の求め方ってどんなのだったかな。ど忘れした。家に帰ってヘルプを見ればわかる。」
というわけで家に帰ってヘルプを見てスクリプトを完成させて，説明書きを加えたのです。

ご存じかもしれませんが，
Flash 8 からは，ネットでヘルプが使えるようになりました。スゴイ！
MX2004まではPDFが用意されているだけで，ネットでヘルプを使う気はしませんでしたが，大革新です。
それにActionScriptリファレンスにはコピペだけで使えるサンプルまで付いています。
すごく使い勝手が良くてわかりやすいヘルプになったと思います。

超重いですが「Flash 8 ヘルプ」
http://livedocs.macromedia.com/flash/8_jp/main/wwhelp/wwhimpl/js/html/wwhelp.htm

ここで，「Stage」と検索すると，「Stage.heightプロパティ」というのが出てきます。
このヘルプ，Flash8用のヘルプですが，FlashMX 以降だと大半は使えます。
たまに，Flash8でしか使えないものが出てくるだけで，ほとんどは以前からあるスクリプトです。

Stage.height の存在は知っていますがその綴りや書き方までは正確に覚えていません。
swapDepths(++_root.Depth); は書いておいてくれて有り難かったです。
swapDepthsの存在は知っていますが，これも綴りや書き方までは正確に覚えていません。
ですから今回は，Stage.height だけを検索してヘルプの使用は終わりです。

なぜ本を持っていないかという理由の１つが，本で調べるより，ヘルプで検索した方が早いというのがあります。
ActionScript ポケットリファレンス
http://www.gihyo.co.jp/books/syoseki.php/4-7741-2381-1

ならササッと調べられますが…，どうなんだろう？？？
と思いますし(私的意見です，スミマセン。)，
あまり良いことではないと思いますがASに関しての本は持っていないのです。

重いですがヘルプもネット上で一応使えるようになったので，100％ネットで行けるかもしれません。
ＨＰでは，たまに回答の引用や参考URLに使わせていただいでいますが，
Macromedia Flash　非公式テクニカルノート
http://www.fumiononaka.com/TechNotes/Flash/index.html
をよく参考にさせてもらっています。
でもここをお気に入りに入れて，このサイトから必要事項を探すわけではなくて，
突っ込んで調べていたら，結局ここにたどり着くパターンが多いです。
他言語で言うところの「とほほさん」の所のような感じかなと私は思います。

あと，
まだ今のところ関係ありませんが，
Flex2用のヘルプとして
http://livedocs.macromedia.com/labs/1/flex/wwhelp/wwhimpl/js/html/wwhelp.htm
と言うのも出来つつあります。
英語が苦手でさっぱりわかりませんが，
ASの次期バージョンであるActionScript3のヘルプもあります。
次期バージョンFlash9ではActionScript3になるのではないかなと思います。
Flash4→Flash5 の時のようなスクリプトの大激変があっては困る。予習せねば。とは思いますが予習するまでには及んでいません。
ActionScript2でもわからないことだらけで，
英語は，よーわからんなと思いながら，ごくたまにボヤッと見ているだけです。

以上，ご期待に沿おうにも沿えない，全然参考にならない私的呟きでした。

お礼

お～～たっくさんの助言ありがとうございます！！
＜以上，ご期待に沿おうにも沿えない，全然参考にならない私的呟きでした。
と、とんでもない、すごく参考になりました！！

ASの本を持ってなくてもここまで理解できるとは・・・素晴らしい・・・。
そうですか、 「近くの100円均一ショップ(徒歩３分)までの往復の道なりに」この回答を考えてくださったんですか。
100円均一ショップがウケました（笑）。
ああでもない、こうでもない、考えているうちに浮かんでくるようになるには相当の経験が必要だと思います。

わたしのもっているFlashはMX 2004 です。
今年の7月に初めてFlashを始め3冊の参考書を読みながらHPをひとつ作りました。
このHP作りに関わったASは、本を見ながらやったので理解できるのですが、sassakun様のように「応用」がまだまだできません。

＜swapDepths(++_root.Depth); は書いておいてくれて有り難かったです。
これは、最近買った「Flash モーションデザインハンドブック」という本にやってみたかったサンプルがあって、それに“画面の重なり順”を制御するということで載っていたので今回「ああ、これを使えばいい！」と思ったんです。
でも、わたしが投稿に書いたこのASの位置だと、ズームされた最後の方でヒョイッと重なりが変わってヘンテコでした（爆）、あとでAS群の前の方に入れてみると最初からいい重なりででてきて、ひとつ発見できました。

sassakun様のFlashに対する姿勢、非常に感動しました。
ヘルプとネットでほとんど解決するとのことでしたね。
わたしも検索はしょっちゅうしていてお気に入りにもいっぱい入れているのですが、まだまだ理解できてないです。
本を買うなら馬場ぎんがさんのですか。やっぱりこの本は評判がいいようです。
辞書的に置いておくのもいいかもしれませんね。

この度は本当に懇切丁寧に教えてくださりとても嬉しかったです。
ありがとうございました！
また、わからないときは教えてください！
よろしくお願いいたします！