上の画像のように見た目3分割された画像があって各パーツにロールオーバーするとそのパーツが広がるというFlash作りました。
結構ありふれてるかもしれませんが、こいつは動画つきです。
忘れないうちにメモしよう。
参考にさせていただいたのはコチラのサイト
Ｇｏｏｄ Sleep （アリガトウゴザイマス！）
適当な動画を撮影して、Flash CS3でエンコード（タイムラインに埋め込み）
mcを自分の用意したものに入れ替えします。
次にasコードを少し変更。
/*---------------------------
ライブラリ読込
---------------------------*/
import mx.utils.Delegate;
import caurina.transitions.Tweener;
/*---------------------------
トゥイーンをさせる関数
---------------------------*/
function tw(_x1:Number,_x2:Number,_x3:Number,_mc1:MovieClip,_mc2:MovieClip,_mc3: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"});
}
/*---------------------------
パネルごとの動作
---------------------------*/
// パネル01（ロールオーバー時に各シンボルの移動位置を座標で記述）
panel01_mc.onRollOver = Delegate.create (this,function():Void{
tw (0,860,-440,panel01_mc,panel02_mc,panel03_mc);
});
panel01_mc.onRollOut = Delegate.create (this,function():Void{
tw (0,600,-180,panel01_mc,panel02_mc,panel03_mc);
});
// パネル02
panel02_mc.onRollOver = Delegate.create (this,function():Void{
tw (40,80,-440,panel01_mc,panel02_mc,panel03_mc);
});
panel02_mc.onRollOut = Delegate.create (this,function():Void{
tw (0,600,-180,panel01_mc,panel02_mc,panel03_mc);
});
// パネル03
panel03_mc.onRollOver = Delegate.create (this,function():Void{
tw (820,860,-180,panel01_mc,panel02_mc,panel03_mc);
});
panel03_mc.onRollOut = Delegate.create (this,function():Void{
tw (0,600,-180,panel01_mc,panel02_mc,panel03_mc);
});
各パネルをクリックしたときにページ遷移するようにしたいので
各シンボルに下記のasを記述
on (release) {
getURL("http://リンク先URL");
}
以上で出来上がりかな。
実際の動くやつは
コチラから。
（いつまであるかわかりませんが。）
