サムネイル画像のマウスオーバーアニメーション

質問

いつもお世話になります。
下記サイトの画面下にマウスを移動すると下からサムネイル画像の一覧が出てきますが、マウスオーバーした際に、選択領域が大きくなります。
画像が大きくなっている訳ではなく、画像の見えない領域が見えるような処理になっています。

http://www.intimissimi.it/

これはどういった処理をしているのでしょうか？
マスク処理等を行っていると思いますが、処理方法がわからないのでご教授いただけると幸いです。

尚、Flash CS4でActionScript3.0の環境です。

宜しくお願い申し上げます。

回答No.2

BlurFiltan · ベストアンサー

＃１です。
遅くなりました。

> 全てスクリプトで書きたいと考えております。

ということは，
＃１で書いた内容のイメージはほぼそのままで，
そのすべてをスクリプトで作成するということになります。

ただ スクリプト で作成する場合は，
特にムービークリップ（MC） で構造を作成する必要はなく，
スプライト（Sprite）で十分ということになります。

> 画像の読み込み方法

ということは，外部画像ファイルをロード＆表示させるわけですね。

　任意のフォルダ
　　　├○○.swf
　　　└pic0.jpg

このようなファイル構造になっていて，
「pic0.jpg」 は 120×90px の JPEG ファイルだとします。

その場合，＃２の【下の図】↓ のような動きを落書きして考えてみます。
※ステージ上に図のようなものを置くのではなくて，
　 単なる紙などへの落書きのつもりです。

そして，構造と動きがそうなるように ActionScript を考えます。

○○.swf（○○.fla）のフレーム1の空白キーフレームに書く場合のスクリプト例です↓。
コピペ可能です。

/////////////////////////////////////////////////////////////////////////
// --- パッケージ付き クラス宣言 ------
// （必要であれば頭の // を取る）
//import flash.geom.Rectangle;
//import flash.display.*;
//import flash.net.URLRequest;
//import flash.events.MouseEvent;
//import flash.events.Event;

// ---初期設定---------

// 拡大縮小するスピードの設定
var spd_w:Number=4;
var spd_h:Number=3;

// 縮小時のマスクのサイズを設定
var msk_w_min:Number=80;
var msk_h_min:Number=60;
// 拡大時のマスクのサイズを設定
var msk_w_max:Number=120;
var msk_h_max:Number=90;

// 縮小時の背景のサイズを設定
var bck_w_min:Number=100;
var bck_h_min:Number=80;
// 拡大時の背景のサイズを設定
var bck_w_max:Number=140;
var bck_h_max:Number=110;

// ロードする画像ファイルを設定
var pic_dat0:String="pic0.jpg";

// my_sp0座標の設定 (例：ステージ中央)
var sp0_x:Number=stage.stageWidth/2;
var sp0_y:Number=stage.stageHeight/2;

// ---構造作成---------

// スプライト my_sp0 を作成
var my_sp0:Sprite = new Sprite();

// 背景スプライト bck_sp0 を作成
var bck_sp0:Sprite = new Sprite();
// bck_sp0 に矩形を描画（仮色：赤）
bck_sp0.graphics.beginFill(0xFF0000);
bck_sp0.graphics.drawRect(-bck_w_min/2, -bck_h_min/2, bck_w_min, bck_h_min);

// 画像表示用スプライト pic_sp0 を作成
var pic_sp0:Sprite = new Sprite();

// マスク用スプライト msk_sp0 を作成
var msk_sp0:Sprite = new Sprite();
// msk_sp0 に矩形を描画（仮色：青）
msk_sp0.graphics.beginFill(0x0000FF);
msk_sp0.graphics.drawRect(-msk_w_min/2, -msk_h_min/2, msk_w_min, msk_h_min);

// pic_sp に msk_sp0 のマスクをかける
pic_sp0.mask=msk_sp0;

// 背景スプライト bck_sp0 を my_sp0 に配置
my_sp0.addChild(bck_sp0);
// 画像表示用スプライト pic_sp0 を my_sp0 に配置
my_sp0.addChild(pic_sp0);
// マスク用スプライト msk_sp0 を my_sp0 に配置
my_sp0.addChild(msk_sp0);

// スプライト my_sp0 の座標を指定
my_sp0.x=sp0_x;
my_sp0.y=sp0_y;
// スプライト my_sp0 をステージに配置
addChild(my_sp0);

// --- 外部画像のロード ---------

// URLRequestインスタンス url0 を作成 URLRequest=pic_dat0
var url0:URLRequest=new URLRequest(pic_dat0);
// Loaderインスタンス ld0 を作成
var ld0:Loader = new Loader();
// Loaderインスタンスの座標指定
ld0.x=- msk_w_max/2;
ld0.y=- msk_h_max/2;
// Loaderインスタンスを ld0 に指定画像をロード
ld0.load(url0);
// Loaderインスタンスをスプライト pic_sp0 内に配置
pic_sp0.addChild(ld0);

// ---動きの定義と実行---------

// my_sp0 にイベントリスナーを登録（ロールオーバー時，実行関数onOver）
my_sp0.addEventListener(MouseEvent.ROLL_OVER,onOver);

// 関数 onOver の定義
function onOver(evt:MouseEvent):void {
//my_sp0 のイベントリスナーを削除（毎フレーム実行，実行関数onFrame01）
evt.target.removeEventListener(Event.ENTER_FRAME,onFrame01);
//my_sp0 にイベントリスナーを登録（毎フレーム実行，実行関数onFrame00）
evt.target.addEventListener(Event.ENTER_FRAME,onFrame00);
}

// 関数 onFrame00 の定義
var onFrame00 = function(evt:Event):void {
// 設定スピードずつ拡大
bck_sp0.width+=spd_w;
bck_sp0.height+=spd_h;
msk_sp0.width+=spd_w;
msk_sp0.height+=spd_h;
// もし拡大時以上のサイズになれば
if (bck_sp0.width >= bck_w_max && msk_sp0.width >= msk_w_max) {
// 拡大時サイズで固定
bck_sp0.width=bck_w_max;
bck_sp0.height=bck_h_max;
msk_sp0.width=msk_w_max;
msk_sp0.height=msk_h_max;
// my_sp0 のイベントリスナーを削除
evt.target.removeEventListener(Event.ENTER_FRAME,onFrame00);
}
}

// my_sp0 にイベントリスナーを登録（ロールアウト時，実行関数onOut）
my_sp0.addEventListener(MouseEvent.ROLL_OUT,onOut);

// 関数onOut の定義
function onOut(evt:MouseEvent):void {
//my_sp0 のイベントリスナーを削除（毎フレーム実行，実行関数onFrame00）
evt.target.removeEventListener(Event.ENTER_FRAME,onFrame00);
//my_sp0 にイベントリスナーを登録（毎フレーム実行，実行関数onFrame01）
evt.target.addEventListener(Event.ENTER_FRAME,onFrame01);
}

// 関数 onFrame01 の定義
var onFrame01 = function (evt:Event):void {
// 設定スピードずつ縮小
bck_sp0.width-=spd_w;
bck_sp0.height-=spd_h;
msk_sp0.width-=spd_w;
msk_sp0.height-=spd_h;
// もし縮小時以下のサイズになれば
if (bck_sp0.width <= bck_w_min && msk_sp0.width <= msk_w_min) {
// 縮小時サイズで固定
bck_sp0.width=bck_w_min;
bck_sp0.height=bck_h_min;
msk_sp0.width=msk_w_min;
msk_sp0.height=msk_h_min;
// my_sp0 のイベントリスナーを削除
evt.target.removeEventListener(Event.ENTER_FRAME,onFrame01);
}
}
/////////////////////////////////////////////////////////////////////////

以上をコピペしてパブリッシュやムービープレビューすれば
一例のサンプルの出来上がりです。

階層構造は次のようになっています。

　メインのタイムライン
　　　└my_sp0（スプライト）
　　　　　├msk_sp0（マスク用スプライト）
　　　　　├pic_sp0（画像表示用スプライト）
　　　　　└bck_sp0（背景用スプライト）

※「msk_sp0」「pic_sp0」「bck_sp0」はインスタンス名ではなく
　インスタンスを参照するメインのタイムライン上の変数名です。

※＃１↓(？)↑(？) の【下の図】にイメージ的な図を追加しました。

上のように矩形入りスプライトの入れ子構造を空で考えてスクリプトで書いて作成するより，
ムービークリップを手動で作成した方がずっと楽で色々し易いと思いますけどね。
上のスクリプトを書くこと自体も当然そうですし，ここから先を考える場合もそうです。
上のようなものでは実体が見えませんし，
インスタンスを参照した変数名という遠隔操作みたいなイメージも要ります。

スクリプトで作成しない場合に手動で作成すると言っても，
ムービークリップ３コ入りのムービークリップを１コ作って
リンケージでムービークリップを継承するクラスに登録して，
そのクラスをスクリプトでコピペ（addChild）すれば良いだけです。

（回答的には，操作手順などを一々説明しなくても良いので，スクリプトで回答する方が楽ですが。）

～～～～～～～～～～～～～～～～～～

まだまだ先の話ですが，
上で作成したもの群を，
さらに１つのスプライトまたは１つのムービークリップの中に入れて
１つのインスタンスとして全体を動作させるようにするのが一般的です。

　メインのタイムライン
　　└全体のインスタンス（スプライトまたはムービークリップ）
　　　　　├my_sp0（スプライト）
　　　　　│　├msk_sp0（マスク用スプライト）
　　　　　│　├pic_sp0（画像表示用スプライト）
　　　　　│　└bck_sp0（背景用スプライト）
　　　　　├my_sp1（スプライト）
　　　　　│　├msk_sp1（マスク用スプライト）
　　　　　│　├pic_sp1（画像表示用スプライト）
　　　　　│　└bck_sp1（背景用スプライト）
　　　　　…　　　　…

さらに各「my_sp○」にロールオーバーしたとき，
全体のインスタンス の中で，各「my_sp○」の表示インデックス順（AS2.0以下で言う深度depth）を入れ替えるようなことも必要でしょう。
表示順の上下(見えないレイヤーみたいなもの)を入れ替えるわけです。

スクリプトはイメージ（構造・平面配置・上下配置・動き）を具体的に想像して
そのイメージ通りの構造とデザインが実現するように組まなければならないため，なかなか難しいと思います。
スクリプトが難しいのではなくてイメージが難しいと思うという意味です。

おそらく先は長い長い… だと思います。

お礼

ご丁寧な回答誠にありがとう御座います！
お陰様で全体の動き、マスク追加の方法も理解する事ができました。

参考サイトにあるような表示順序の入れ替え等は難しいかもしれませんが、実現できるよう頑張ります。