tweenerを使ったスライドショー

過去ログに似たような内容がありましたが、私の質問する内容は画像の座標について教えてください。グーグルのサイトよりtweenerをダウンロードしました。アクションスクリプトはここで見せてもらいました。http://exyz.cocolog-nifty.com/good_sleep/2007/12 …
サンプルは画像が3枚のところ私は5枚にしました。

panel01_mc.onRollOver = Delegate.create(this, function ():Void {
tw(0,400,40,panel01_mc,panel02_mc,panel03_mc,panel04_mc,panel05_mc);
　　^^^^^^^
ここの考え方（しくみ）が知りたいのです。いろいろやりましたが思うように動きません。



FLASH　CS3　アクションスクリプト2.0

/*ライブラリ読込*/
import mx.utils.Delegate;
import caurina.transitions.Tweener;

/*トゥイーンをさせる関数*/
function tw(_x1:Number, _x2:Number, _x3:Number, _x4:Number, _x5:Number, mc1:MovieClip, _mc2:MovieClip, _mc3:MovieClip, _mc4:MovieClip, _mc5:MovieClip):Void {

Tweener.addTween(_mc1,{_x:_x1, _y:0, time:1, transition:"easelnOutCubic"});
Tweener.addTween(_mc2,{_x:_x2, _y:0, time:1, transition:"easelnOutCubic"});
Tweener.addTween(_mc3,{_x:_x3, _y:0, time:1, transition:"easelnOutCubic"});
Tweener.addTween(_mc4,{_x:_x4, _y:0, time:1, transition:"easelnOutCubic"});
Tweener.addTween(_mc5,{_x:_x5, _y:0, time:1, transition:"easelnOutCubic"});
}

/*パネルごとの動作*/
// パネル01
panel01_mc.onRollOver = Delegate.create(this, function ():Void {
tw(0,400,40,panel01_mc,panel02_mc,panel03_mc,panel04_mc,panel05_mc);
});
// パネル02
panel02_mc.onRollOver = Delegate.create(this, function ():Void {
tw(0,0,400,panel01_mc,panel02_mc,panel03_mc,panel04_mc,panel05_mc);
});
// パネル03
panel03_mc.onRollOver = Delegate.create(this, function ():Void {
tw(0,370,400,panel01_mc,panel02_mc,panel03_mc,panel04_mc,panel05_mc);
});
// パネル04
panel04_mc.onRollOver = Delegate.create(this, function ():Void {
tw(0,90,400,panel01_mc,panel02_mc,panel03_mc,panel04_mc,panel05_mc);
});
// パネル05
panel05_mc.onRollOver = Delegate.create(this, function ():Void {
tw(0,90,120,panel01_mc,panel02_mc,panel03_mc,panel04_mc,panel05_mc);
});

No.1 ベストアンサー 回答者： BlurFiltan 回答日時： 2011/08/14 14:27

まずコレを理解しないと↓。

/*トゥイーンをさせる関数*/
function tw(_x1:Number,_x2:Number,_x3:Number,_mc1:MovieClip,_mc2:MovieClip,_mc3:MovieClip):Void{}

↑ココで「tw」という関数を定義しているのです。
それで
この関数「tw」を実行させるときの引数が６つあって
第一引数から順に
_x1(座標数値)，_x2(座標数値)，_x3(座標数値)，_mc1(MovieClip)，_mc2(MovieClip)，_mc3(MovieClip)
となっているわけです。



ActionScript 2.0 設定の新規ドキュメントでも作成し
フレーム1 に次のようなスクリプトを書いて(コピペして)，
「制御」→「ムービープレビュー」してみてください。

//-----------------------------------------------------
//関数 jikken を定義（引数 a(数値)，b(MovieClip)）
function jikken(a:Number, b:MovieClip):Void {
trace("aを出力→"+a);
trace("bを出力→"+b);
}

//関数 jikken を実行（引数 数値，MovieClip）
jikken(5, this);
//-----------------------------------------------------



わかりますでしょうか？

//関数 jikken を実行
jikken(5, this);

これで関数 jikken が実行されるわけですが
そのときに第１引数に 5 という数値と，第２引数に this というムービークリップ(MovieClip)を渡しているわけです。
この場合の this は _root と同じ意味になります。 _root もムービークリップの一種です。

その第１引数である 5 と，第２引数 this を，
関数 jikken が 変数 a と b として受け取って
関数 jikken の中でそれら変数 a(値は5) と b(値はthis) が使われて何某かの動作をするわけです。

上のように
一度，function jikken… を定義しておけば，
その関数の一部に違う値を入れながら使い回しができるわけです。
　　↓ ↓ ↓
//-----------------------------------------------------
//関数 jikken を定義（引数 a(数値)，b(MovieClip)）
function jikken(a:Number, b:MovieClip):Void {
trace("aを出力→"+a);
trace("bを出力→"+b);
}

//関数 jikken を実行（引数 数値，MovieClip）
jikken(5, this);

trace("------------------");

//関数 jikken を実行（引数 数値，MovieClip）
jikken(10, this._parent);

trace("------------------");

//関数 jikken を実行（引数 数値，MovieClip）
jikken(20, _root);
//-----------------------------------------------------




ですから
ご質問で書かれていらっしゃるスクリプトですが↓

/*トゥイーンをさせる関数*/
function tw(_x1:Number, _x2:Number, _x3:Number, _x4:Number, _x5:Number, mc1:MovieClip, _mc2:MovieClip, _mc3:MovieClip, _mc4:MovieClip, _mc5:MovieClip):Void {

この部分を，このようにする(＝引数を１０個にする)のでしたら
これを実行させる時にも同じ数の引数が必要になるということになりますよね？

しかがって
コレ↓ではダメでしょう？

// パネル01
//～略～
tw(0,400,40,panel01_mc,panel02_mc,panel03_mc,panel04_mc,panel05_mc);

まず数が合ってません。
また
たとえば 関数「tw」の_x4:Number に入るべき値が panel01_mc になっているのもダメです。

例えば次のようにしなければなりません。

tw(0,260,280,300,320,panel01_mc,panel02_mc,panel03_mc,panel04_mc,panel05_mc);


0,260,280,300,320 のような具体的数値は作る物によるのでどういう数値にすべきかは知りません。
元のサイトと近いようなもの(同じサイズのもの)を作るのでしたら
次のような感じの数値になると思います。

/*パネルごとの動作*/
// パネル01
panel01_mc.onRollOver = Delegate.create(this, function ():Void {
tw(0,260,280,300,320,panel01_mc,panel02_mc,panel03_mc,panel04_mc,panel05_mc);
});
// パネル02
panel02_mc.onRollOver = Delegate.create(this, function ():Void {
tw(0,10,280,300,320,panel01_mc,panel02_mc,panel03_mc,panel04_mc,panel05_mc);
});
// パネル03
panel03_mc.onRollOver = Delegate.create(this, function ():Void {
tw(0,10,30,300,320,panel01_mc,panel02_mc,panel03_mc,panel04_mc,panel05_mc);
});
// パネル04
panel04_mc.onRollOver = Delegate.create(this, function ():Void {
tw(0,10,30,50,320,panel01_mc,panel02_mc,panel03_mc,panel04_mc,panel05_mc);
});
// パネル05
panel05_mc.onRollOver = Delegate.create(this, function ():Void {
tw(0,10,30,50,70,panel01_mc,panel02_mc,panel03_mc,panel04_mc,panel05_mc);
});

この回答へのお礼

関数の定義をわかりやすく教えていただき、本当にありがとうございます。
アクションスクリプトは初心者で理解度はわずかです。
少しずつではありますが勉強します。

お礼日時：2011/08/14 19:35

No.2 回答者： BlurFiltan 回答日時： 2011/08/14 15:26

＃１です。

度々失礼します。

スクリプトの説明は ＃１ で終わっていますが，
元のスクリプトが
何だかほとんど同じ事を何度も書く無駄の多いスクリプトであると思ったため
私なりに単純化して書き直してみました。

５つのMCでも書き方を工夫すれば
これだけになります↓。

-------------------------------------------
/*ライブラリ読込*/
import caurina.transitions.Tweener;

/*各MCロールオーバー時の座標*/
var x_arr:Array = new Array();
x_arr[0] = [0, 260, 280, 300, 320];
x_arr[1] = [0, 10, 280, 300, 320];
x_arr[2] = [0, 10, 30, 300, 320];
x_arr[3] = [0, 10, 30, 50, 320];
x_arr[4] = [0, 10, 30, 50, 70];

/*トゥイーンをさせる関数*/
function tw(n:Number):Void {
for (var i = 0; i<x_arr.length; i++) {
Tweener.addTween(this["panel0"+(i+1)+"_mc"], {_x:x_arr[n][i], _y:0, time:1, transition:"easelnOutCubic"});
}
}

/*パネルごとの動作*/
for (var i = 0; i<x_arr.length; i++) {
this["panel0"+(i+1)+"_mc"].num = i;
this["panel0"+(i+1)+"_mc"].onRollOver = function():Void {
tw(this.num);
};
}
-------------------------------------------


参考まで。