マウスオーバーやクリック時に拡大表示させたい。

Question

Flash素人の質問で恐縮です。

よく表現されていると思うのですが、ページ上に複数の小さいムービークリップが並べてあって、大きく見たいときに表示されているムービークリップをマウスオーバーした時に（又はクリック時）に拡大表示されるというようなことを実施したいと思っております。

this.xscale = this.yscale = 200 ;

当該のムービーのAction scriptに上記のScriptを記述したのですが、全く無反応です。

どのようにすれば、拡大表示されるのでしょうか？。

また、外部テキストを読み込んで、それをムービークリップに変換して上記の処理につなげるということは出来ますでしょうか？。

DPE · Accepted Answer

> 拡大画像が最前面に表示されるようにするには、どのようにしたら良いか教えて頂けますでしょうか？


Flash には深度（Ｚ値）という考え方があります。Ｚは３次元グラフィックでは奥行き方向の座標を表しますが、２次元のグラフィックでは重ね順の意味で使われることもあります。
Flash ではまさに重ね順の意味で使われていて、深度の小さいものほど上に重なるように描画されます。同じ深度が複数のオブジェクトに割り振られることはなく、同じレイヤーに配置されたオブジェクト同士であっても、深度は別の数値になります。
（同じレイヤーにあるオブジェクトが重なっている場合、どちらかが必ず上になって描画されるのはこのためです）
深度は、普段は数値として確認したり操作したりはできません。しかし、内部では数値で管理されていて、ActionScript ではこの深度を取得したり、深度を入れ替えて重ね順を動的に入れ替えることも可能です。

深度の取得は MovieClip.getDepth 、入れ替えには MovieClip.swapDepths というアクションを使います。
swapDepths は、深度の数値を指定してその深度を占有しているムービークリップと入れ替える方法と、ムービークリップのターゲット名を指定して、そのムービークリップと深度を入れ替える方法があります。
指定のムービークリップを１番上にする方法はいくつか考えられますが、ここではとりあえず、数値を指定して入れ替える方法をご紹介します。

スクリプトは次のように考えます。
まず、４つのムービークリップの深度を調べて、最も上になっているものの深度（つまり、最も小さい深度）を変数に保存しておきます。
ムービークリップの上にマウスカーソルが乗った時、拡大すると同時に、ムービークリップ自身の深度を、変数に保存してある深度（を持つムービークリップ）と入れ替えます。変数には４つの中で１番上になっているものの深度が保存されているのですから、この数値を持つムービークリップと深度を入れ替えると、１番上になって見えるという仕組みです。

４つのムービークリップで最も小さな深度を探す方法ですが。
eval というアクションを使うと、文字列や変数でムービークリップ等のインスタンス名を指定して、操作することができます。例えば、ムービークリップのインスタンス名を clip1 ～ clip4 というように通し番号で付けると、

　for( i = 1 ; i <= 4 ; i++ )
　{ 
　　eval( "clip" + i )._xscale = 200;
　}

このようにループを利用して、まとめて操作することもできます。今回も eval と for ループを使って、最も小さい深度を探します。
最も小さい深度を保存する変数を１つ、用意します。ここでは仮に、primary_depth という名前にします。
４つのムービークリップのインスタンス名を、先述の clip1 ～ clip4 とし、primary_depth の初期値はとりあえず、clip1 の深度を入れておきます。
残る clip2 ～ clip4 の深度を for ループを使って調べます。if 文で primary_depthの 値と比較して、primary_depth の値よりも小さかった場合は primary_depth の値を書き換えます。すると、 primary_depth には常に小さい方の値が入りますので、ループ終了後には最も小さい深度の値が保持されているというわけです。
スクリプトは、大体、次のようになります。このスクリプトは、タイムラインのフレームに設定してください。
（↓このスクリプトをコピーして利用する場合は、各行頭の全角のスペースを、全て半角のスペースかタブに置き換えてください。このまま使うとシンタックスエラーになります）


　//最小の深度を保持する変数
　//とりあえず clip1 の深度を初期値としていれておく
　primary_depth = eval( "_root.clip1" ).getDepth();

　//残りのムービークリップの深度と比較して
　//最小の深度を調べる
　for( i = 2 ; i <= 4 ; i++ )
　{
　　// clip2 ～ clip4 の深度を取得
　　temp = eval( "_root.clip" + i ).getDepth();

　　//深度が小さい場合は最小の深度を更新
　　if( primary_depth < temp )
　　{
　　　primary_depth = temp;
　　}
　}


あとは＃１の方が紹介されているアクションを、各ムービークリップのインスタンスに設定します。
ただし、ロールオーバー時の処理にもう１つ、深度を入れ替える処理を追加してください。
つまり、


　//ロールオーバー時に拡大、重ね順を１番上にする
　on(rollOver)
　{
　　//拡大処理
　　this._xscale = 200;
　　this._yscale = 200;

　　//重ね順を変更
　　this.swapDepths( _root.primary_depth );
　}

　//ロールアウト時に元に戻す
　on(rollOut)
　{
　　this._xscale = 100;
　　this._yscale = 100;
　}


変数の代入は、

　this._xscale = this._yscale = 200 ;

こう書いても文法上は問題ありませんが、スクリプトとしてはちょっと分かりにくいかも知れません。
this._xscale = ・・・などを列挙するのが見にくいのでしたら、with というアクションを使って

　with( this )
　{
　　_xscale = 150;
　　_yscale = 150;

　　swapDepths( _root.primary_depth );
　}

と、まとめて書くこともできます。


ActionScript の基本や各アクションの詳細は、市販の解説書や解説サイト・ヘルプ等をご参考になさってください。
長くなってすみませんでした。
不明な点がありましたら、補足してください。

DPE · Answer

＃５、６です。


＃５の件は問題ありませんでしたでしょうか。
＃６でも書きました通り、お間抜けな解説をしてしまいまして申し訳ありませんでした。「深度が小さいほど上」と説明しておきながら、スクリプトは「深度が大きいほど上」（正しくはこちら）として組んでいたとは、我ながら矛盾していますね。暑さでボケていたようです　^^;

私が ActionScript を勉強しはじめた頃にお世話になった解説書は、分かりやすくてオススメしたいところなのですが、Flash 5 の頃に刊行された本なので入手も難しいでしょうし、Flash MX や MX 2004 が主流になった今では、少々役不足でしょう。
申し訳ないのですが、最近の解説書についてはよく分かりません。別の質問を立てて回答を募った方が、いい情報が得られると思いますよ。

DPE · Answer

＃５です。

＃５の深度の話で、「深度の小さいものほど上」と書いてしまいましたが、「深度の大きいものほど上」の間違いでした。
スクリプトは間違いありません。コメントは違っているのですが、primary_depth と temp を比較して、大きい方を primary_depth に入れてますので。
この場をお借りしまして、お詫び・訂正させていただきます。
お間抜けな勘違いをしまして、大変失礼いたしました。

UNAHO · Answer

回答にならないかもしれませんが、
フレームの移動で処理ができるならアクションスプリクトでスケールを設定しなくても拡大した画像をそのままタイムラインに設置してはダメなのでしょうか？
スケールの値を動的に処理しなければいけないのであればこのては使えませんが、いかがでしょう？
それから、もし良かったら教えて欲しいのですが
this.xscale = this.yscale = 200 ;
この設定のやり方は問題ないのでしょうか？
動作するとしても下記のようにした方がよいと思うのですがどうなんでしょう？
this.xscale = 200 ;
this.yscale = 200 ;

amountainblast · Answer

こんにちは。

>お教え頂きました方法で、あるシンボルをマウスオーバーしたら別のフレームに飛んで、そこに設定してあるシンボルを拡大表示するようなことは可能でしょうか？。

これ自体は可能ですが、その場合はスクリプトが変わってきます。大変失礼ですが、どうもスクリプトの意味自体が分かっていないような気がいます。#1さんのスクリプトのon (rollOver) と言う意味は
このシンボルにマウスがrollOverしたら～という処理をしないさいと言う意味になります。
ですので、別のフレームに飛んだ地点でこのスクリプトは解除されてしまいます。
対策としてはフレーム１でマウスがロールオーバーしたらフレーム５に飛ぶ。
フレーム５が表示されたら、Ｘ２シンボルを拡大する。
といった流れでいいと思います。
但しフレーム５で記述するスクリプトはどのような処理をしたいかで変わりますけども・・・。

参考URL：http://www12.plala.or.jp/llink/

GETSTREET · Answer

・何故「onClipEvent」って必要なんでしょうか？。　

この場合別に無くても構いません。


・必ず最初の大きさを記述する必要はありますか？。

この場合別に無くても構いません。

・拡大されるときの起点は変更出来ますか？。

シンボルの基準点によります。

・「loadVariables」でダイナミックテキストの変数に外部のテキストを読み込み、


これは不明、わかりません。

GETSTREET · Answer

こんな感じでしょうか？

onClipEvent (load) {
this._yscale = 100; 
this._xscale = 100; 
}
on (rollOver) {
this._yscale = 200; 
this._xscale = 200; 
}
on (rollOut) {
this._yscale = 100; 
this._xscale = 100; 
}

マウスオーバーやクリック時に拡大表示させたい。

> 拡大画像が最前面に表示されるようにするには、どのようにしたら良いか教えて頂けますでしょうか？

＃５、６です。

＃５です。

回答にならないかもしれませんが、

こんにちは。

この回答への補足

・何故「onClipEvent」って必要なんでしょうか？。

この回答への補足

こんな感じでしょうか？

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

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

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