fl.transitionクラスを使ってみる。

2009/09/01  as3.0, チュートリアル

ぜんかいはスライドショーを作成しました。

ですが

 

 

切り替えにエフェクトを使いたい!

 

このポチポチと切り替えてもjavaScriptでもできるじゃん。ってこえがあったとかなかったとか。

flashにはデフォルトでtransitionクラスってよういされていて、これが一通り備えているのです。

(モーションがふるいとかきこえないし。)

 

どんな事ができるかと言うと

 

[blinds] 長方形に区切って、ブラインドのように表示をさせる。

This movie requires Flash Player 9.0.0

※クリックをすると画像が切り替わります。

 

[iris] 真ん中に、形が出現してその形に合わせて、表示される。

This movie requires Flash Player 9.0.0

※クリックをすると画像が切り替わります。

 

 

[fade] ゆっくり透明から表示されて行きます。

This movie requires Flash Player 9.0.0

※クリックをすると画像が切り替わります。

 

 

[wipe] 端から見えるようになります。

This movie requires Flash Player 9.0.0

※クリックをすると画像が切り替わります。

 

キリトリ線

 

複雑そうな動きをしていますが。。

 

かんたんなんだな、これが。

 

最初にfl.transitionクラスをインポートするひつようがあります。

がそれ以外では、ほとんど前回作成したスライドショーを利用できます。

 

transitionはvisible=trueの直後に記入をしています。

visible=falseだと、エフェクトも表示もみえないので。

 

で、ぜんかいのソースコードをほぼほぼもってくる

 

package  {
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import fl.transitions.*;
	import fl.transitions.easing.*;

	public class index extends Sprite {

		var _nowNum = 1
		var _imgArr:Array

		public function index() {
			_imgArr = new Array();
			_imgArr = [pict1,pict2,pict3,pict4,pict5]
			for (var i:uint = 0 ; i < _imgArr.length ; i++ ) {
				_imgArr[i].visible = false;
			}
			_imgArr[0].visible = true
			stage.addEventListener(MouseEvent.CLICK, _slide);
		}

		private function _slide(e:Event):void {
			for (var i:uint = 0 ; i < _imgArr.length ; i++ ) {
				_imgArr[i].visible = false;
			}
			_imgArr[_nowNum].visible = true;
			■■■■■■<transitionを入れる。>■■■■■■■
			if (_nowNum == _imgArr.length - 1) {
				_nowNum = 0
			}else {
				_nowNum++;
			}
		}

	}

}

以上のようになります。

■■■■■■<transitionを入れる。>■■■■■■■

にエフェクトの記載をするだけで、前回のをフル活用です。

 

transitionクラスは下記の形です。

 

TransitionManager.start(インスタンス名, { 
	type:切り替えのタイプ, 
	direction:動作のタイプ, 
	duration:切り替えに要する秒数, 
	easing:イージング 
});

direction

表示させる時はTransition.IN、消す時はTransition.Out

easing

Backでは、ActionScript アニメーションでモーションを実装する 3 種類のイージング関数を定義します。

Bounceでは、落下したボールがフロアでバウンドし、バウンドの量が減っていくような ActionScript アニメーションでモーションを実装する 3 種類のイージング関数を定義します。

Elastcでは、モーションが指数関数的に減衰する正弦波により定義される ActionScript アニメーションでモーションを実装するための 3 つのイージング関数を定義します。

Noneは、ActionScript アニメーションで加速しないモーションを実装するイージング関数を定義します。

Regularでは、ActionScript アニメーションでモーションを実装する 3 種類のイージング関数を定義します。

Strongでは、ActionScript アニメーションでモーションを実装する 3 種類のイージング関数を定義します。

 

 

typeについて(タイプ別のプロパティが存在します。)

 

[blinds]

numStrips : Blinds 効果内のマスクストリップの数。推奨される値の範囲は 1 ~ 50 です。

dimension : マスクストリップが垂直 (0) か水平 (1) かを示す整数。

sample

TransitionManager.start(_imgArr[_nowNum], {
	type:Blinds,
	direction:Transition.IN,
	duration:0.5,
	easing:None.easeNone,
	numStrips:20,
	dimension:1
});

[iris]

startPoint : 開始位置を示す整数。値の範囲は 1 ~ 9 です。左上 : 1。中央上 : 2。右上 : 3。左中央 : 4。中央 : 5。右中央 : 6。左下 : 7。中央下 : 8。右下 : 9。 shape : fl.transitions.Iris.SQUARE (正方形) または fl.transitions.Iris.CIRCLE (円) のマスクシェイプ sample

TransitionManager.start(_imgArr[_nowNum], {
	type:Iris,
	direction:Transition.IN,
	duration:0.5,
	easing:Regular.easeIn,
	startPoint:5 ,
	shape:Iris.CIRCLE
});

[fade]

sample

TransitionManager.start(_imgArr[_nowNum], {
	type:Fade,
	direction:Transition.IN,
	duration:0.5,
	easing:None.easeNone
 } );

 

[wipe]

startPoint : 開始位置を示す整数。値の範囲は 1 ~ 9 です。左上 : 1。中央上 : 2。右上 : 3。左中央 : 4。中央 : 5。右中央 : 6。左下 : 7。中央下 : 8。右下 : 9。

TransitionManager.start(_imgArr[_nowNum], {
	type:Wipe,
	direction:Transition.IN,
	duration:0.5,
	easing:Regular.easeIn,
	startPoint:1
});

 

まとめ

一行追加するだけで、派手な演出ができるようにflashに用意されている。

 

下記からダウンロードが出来ます。

http://prfry.net/s26/flash/slide_show_2.zip