auサイトのようなアコーディオンメニュー
Flash モーションライブラリ｜Google Tweener
また今月のWeb creatorsからの使えそうなテクニックを…。
今度は、auのオフィシャルサイトで使われているようなFlashを使ったアコーディオンメニューが簡単に作れるモーションライブラリを紹介してみます。
Flashコンテンツ制作者なら、一度は作ってみようと思ったり、クライアントから要望された経験があるのではないでしょうか？でも実は、矛盾のでないようにスクリプトを組むのが思いの外難しかったりします。…僕も凝った仕組みは作れません。
しかし、Google codeの「Tweener」というライブラリを使えば、あら不思議？！ 簡単に作れてしまいます。
サンプルはこんな感じです。
方法です。
「Tweener」のページからtweener_1_26_62_as2.zipをダウンロードして、中に入っている「caurina」というディレクトリごとFLAファイル（swf）と同じ階層におきます。
Flash本体は、各パネルのMCを作り、ステージ上の適当な位置に配置。_rootの１フレーム目に以下のActionScriptを記述します。
/*ライブラリ読込*/
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,300,320,panel01_mc,panel02_mc,panel03_mc);
});
// パネル02
panel02_mc.onRollOver = Delegate.create (this,function():Void{
tw (0,10,320,panel01_mc,panel02_mc,panel03_mc);
});
// パネル03
panel03_mc.onRollOver = Delegate.create (this,function():Void{
tw (0,10,30,panel01_mc,panel02_mc,panel03_mc);
});
上のスクリプトは例ですので、データを参考にカスタマイズして下さい。
ActionScriptに詳しい方なら、タイマーを設置して、時間が来ると自動的に次のパネルを表示するコトもできると思います。
