NEWS

2016.09.02 「Photoshopとpapervision3dでテクスチャ付3Dを作成する(4)」を更新しました。

  • Web creators

アニメーション

アコーディオンメニュー

概要

Flashをメニューボタンやプロモーションで利用する場合、折りたたみタイプのアコーディオンメニューを利用することで限られたスペースに複数のコンテンツやボタンがあることが認識しやすくなります。
今回はアニメーションに関するライブラリ"tweener"を利用してアコーディオンメニューを作成します。

サンプル解説

3枚のシンボルが重なっており、それぞれのシンボルにマウスを合わせると展開されます。

作成法

(1)ライブラリのインストール

・サイトへアクセス。
 ->tweener

tweenerの公開サイト

・最新版をダウンロード
 (今回は"tweener_1_33_74_as2.zip")
・ダウンロードしたファイルを解凍。
・解凍された"caurina"フォルダをFLAファイルと同じ階層に設置。

設置場所

(2)シンボルの作成

・シンボルをライブラリに作成。

シンボルの作成

(3)シンボルをステージに配置

・ActionScriptを設定するレイヤー「Action」を作成。
・シンボルを設置するレイヤー「Parts」を作成。
・レイヤー「Parts」にシンボルを配置。
・配置した3つのシンボルに最背面からインスタンス名"mc01"、"mc02"、"mc03"を設定。
・最背面の"mc01"の配置座標を(0、0)に設定。
・真ん中の"mc02"の配置座標を(35、0)に設定。
・最前面の"mc03"の配置座標を(75、0)に設定。

シンボルの配置

(4)ステージにActionScriptの設定

・レイヤー「Action」に以下のActionScriptを設定。

01
02
03
04

05

06

07

08
09
10
11
12
13
14
15
16
17
18
19
20
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"});
}

mc01.onRollOver = Delegate.create (this, function ():Void{
	tw (0, 330, 365, mc01, mc02, mc03);
});

mc02.onRollOver = Delegate.create (this, function ():Void{
	tw (0, 35, 365, mc01, mc02, mc03);
});

mc03.onRollOver = Delegate.create (this, function ():Void{
	tw (0, 35, 70, mc01, mc02, mc03);
});

解説

ライブラリ"tweener"はモーショントゥイーンなどアニメーションに関わる制御を簡単なActionScriptで実装することができる無償のライブラリです。
今回は作成するFLAファイルと同じ階層にライブラリに設置したために、ActionScriptの02のように"caurina"フォルダからのパスを指定しています。
"tweener"をFLAファイルごとに設置せずに共有化する場合は、環境設定で設定します。
(詳細は"クラスファイルの設置とクラスパス"参照)
また、01では特定のスコープ内で関数を実行する"Delegate"クラスを利用しています。

10〜20行目はマウスオーバーした際の実行命令で、04のファンクション"tw"が呼び出されます。
"tw"にはシンボルのX座標の値、そしてそのシンボルのインスタンス名を渡すことで、ライブラリ"tweener"が持つ関数"addTween"が実行されます。
「transition:"easelnOutCubic"」シンボルの動作に関わる指定をしており、終点に近くなるとゆっくりになります。
この動作指定にはさまざまな種類があり、スピードを均一にする"linear"などがあります。
11ではシンボル"mc01"にマウスを合わせた場合の指定で、記入している数値はマウスオーバー時のmc01からmc03のX座標を表しています。
この場合、"mc01"のマウスオーバーでX座標0、330、365の位置にシンボルが移動します。

シンボルを追加する場合は、04に追加するシンボルのパラメータを渡せるようにし、Tweener.addTween ()を追加します。
同時に、10行目以降のようにマウスオーバー時の処理を追記します。

ページ上部へ