2009年9月27日日曜日

ロールオーバーでスライドするFlash(動画つき)

1

上の画像のように見た目3分割された画像があって各パーツにロールオーバーするとそのパーツが広がるというFlash作りました。

結構ありふれてるかもしれませんが、こいつは動画つきです。

忘れないうちにメモしよう。

参考にさせていただいたのはコチラのサイト
Good 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");
}

以上で出来上がりかな。

実際の動くやつはコチラから。
(いつまであるかわかりませんが。)

0 件のコメント:

コメントを投稿