写真の切り替えムービーについて教えてください。

質問

私はFLASH CS5を使用しAS3.0を使用しております。

早速ですが、下記アドレスのサイトをご覧下さい。

http://www.j-wave.co.jp/original/scenariof/

このサイトの写真の切り替え、四角が3×6列で綺麗に切り替わり、ずっとエンドレスで写真が表示されております。
このように写真を四角（このサイトでは3×6列となっておりますが、4×5列でも他の数値でも構いません）のマスキング？ぽく切り替わるスクリプトを教えてください。
例えば写真のサイズは横800ピクセル×縦400ピクセルで、写真の枚数６枚で、四角の配列、縦横100ピクセルの正方形とした場合、4×8列で、切り替わり後の写真の表示は10秒程度とした場合のスクリプトを教えてください。

又は、上記内容に近い写真の切り替え方法でも構いませんので、スクリプトを教えてください。よろしくお願い致します。

回答No.1

BlurFiltan · ベストアンサー

そういう基本的でオーソドックスなものは
普通，全てスクリプトでするものではありません。

「たくさんの四角インスタンスがトゥイーンで拡大するアニメーション」をムービークリップ内のタイムラインに作って
そのムービークリップで写真にマスクを掛ければ良いだけのことです。

場合によっては
stop(); １つくらいでできます。
初心者がすべき重要かつ簡単な内容です。

回答を待ったりスクリプトを考えている間に，
手作業だと数十回はいろいろなバリエーション作成できていたと思います。

スクリプトでもできなくはありませんが
カスタマイズとかが難しくなるだけですし
またこういうものは「手作業」で作れてはじめてスクリプトが組めたり使い回しが可能になるのです。

と言いつつ一応作ってはみましたが...
やはりマクロ(手作業でする操作を自動化しただけのプログラム)的なスクリプトが大半を占めてしまいました。
手作業をサボる分，頭をフル回転させばければならないスクリプトです。

ステージ上に
「pic0」「pic1」…「pic5」というインスタンス名を付けた
800×400pxの写真入りムービークリップを作成し
それらムービークリップがあるタイムラインのフレームにコピペするスクリプト例です。
※ 図↓参考のこと

//===========================================
//---↓マスク用MCの作成(ほぼマクロ)↓---
import fl.transitions.*;
import fl.transitions.easing.*;

var mc:MovieClip;

function makeMask():void {
//
mc = new MovieClip();
//
for (mc.i=0; mc.i<=3; mc.i++) {
for (mc.j = 0; mc.j<=7; mc.j++) {
mc["rec" + mc.i + mc.j] = new Shape();
mc["rec" + mc.i + mc.j].graphics.beginFill(0xFF6666, 1);
mc["rec" + mc.i + mc.j].graphics.drawRect(0, 0, 100, 100);
mc["rec" + mc.i + mc.j].graphics.endFill();
mc["rec" + mc.i + mc.j].x = mc.j * 100;
mc["rec" + mc.i + mc.j].y = mc.i * 100;
mc["rec" + mc.i + mc.j].width = 0;
mc.addChild(mc["rec" +mc.i + mc.j]);
}
}
//
mc.dic = new Dictionary();
//
for (mc.i = 0; mc.i<=3; mc.i++) {
mc["tm" + mc.i] = new Timer(100,8);
mc.dic[mc["tm" + mc.i]] = mc.i;
mc["j" + mc.i] = 0;
mc.timerHandler1 = function(e:TimerEvent):void {
mc["twn" + mc.i] = new Tween(mc["rec" + mc.dic[e.target] + mc["j" + mc.dic[e.target]]],"width",Regular.easeOut,0,100,0.5,true);
mc["j" + mc.dic[e.target]]++;
};
mc["tm" + mc.i].addEventListener(TimerEvent.TIMER, mc.timerHandler1,false,0,false);
}
//
mc.cnt = 0;
//
mc.tm = new Timer(200,4);
//
mc.timerHandler0 = function(e:TimerEvent):void {
mc["tm" + mc.cnt].start();
mc.cnt++;
};
//
mc.tm.addEventListener(TimerEvent.TIMER, mc.timerHandler0,false,0,true);
//
mc.tm.start();
//
this.addChild(mc);
}
//---↑マスク用MCの作成(ほぼマクロ)↑---

//カウント用変数
var cnt:int = 0;

//「pic0」を最高の深度に移動
this.setChildIndex(pic0,this.numChildren-1);

//関数nextPicの定義
function nextPic(e:TimerEvent):void {
this["pic" + cnt].mask = null;
if (mc != null) {
this.removeChild(mc);
mc = null;
}
cnt = (cnt>=5) ? 0 : cnt+1;
//マスクを作成
makeMask();
//次の「pic○」を最高の深度に移動
this.setChildIndex(this["pic" + cnt],this.numChildren-1);
//次の「pic○」にマスクを適用
this["pic" + cnt].mask = mc;
}

//10秒間隔で実行するTimerインスタンスを作成
var tm:Timer = new Timer(10000,0);

//関数nextPicを指定ミリ秒間隔で実行
tm.addEventListener(TimerEvent.TIMER,nextPic ,false,0,false);

//タイマースタート
tm.start();
//===========================================

繰り返しますが
上のスクリプトをどうのこうの考えるより
マスクにするムービークリップをチャッチャと手作業で作ってしまった方が早いですよ。
どうのこうのと細かいこと考えていても発想が乏しくなるだけです(＝デメリットの方が多い)。

手作業だと形もパターンも色々自由に無数に簡単にできるはずです。
そのムービークリップを使い回したりすれば良いだけです。

作ったムービークリップをリンケージでクラス化して

var mask_mc:クラス名 = new クラス名();
addChild(mask_mc);

みたいにして呼び出しても良いわけですし。
そんなことせずに
普通に写真のマスクレイヤーに配置しても良いです。

お礼

BlurFiltanさん：

お忙しい中、ご丁寧で解り易い、ご回答及びアドバイス有難うございました。

早速ですが…。BlurFiltanさんの言われますように、「たくさんの四角インスタンスがトゥイーンで拡大するアニメーション」をムービークリップ内のタイムラインに作り、そのムービークリップで写真にマスクを掛けるのが一番良いと思いました。

やはり、サイズや形状やタイミングなどを変更する時にも直感的に出来そうですし。とても大変に勉強になりました。

そして…その反面、BlurFiltanさん作成のスクリプトを試してみました。こちらもバッチリでした。この方法でもよいのですが、やはり先のようにサイズや形状等を変更したりアレンジする際には、ムービークリップでやった方が良いと言う事が解りました。

本当に大変に勉強になりました。お忙しい中、ご丁寧で解り易い、ご回答及びアドバイス有難うございました。