f60k@Lab

前回まで伏せていたが、先日プロジェクトがローンチしたので公開できる。このプロジェクトではプロダクトの回転に３６０度回転可能なメニューを使っている。

ふきだしを拡張する
このドラッグ可能な回転メニューは前回紹介した記事でふきだしの表現方法を実現するスクリプトを紹介したが、その拡張から実現している。このふきだしは別のプロジェクトの中で使っている。ふきだしの表現はフレームに配置した一連のグラフィックが正方向、逆方向に再生することで膨らむ、しぼむを表していた。このクリップでは回転メニュー正方向の再生で最終フレームまで到達したときには１フレームに行き、最終フレームから１フレームへ向かう逆方向の再生の場合は１フレームに到達したときは、最終フレームに移動するようになっている。

連続再生の仕組み
このクリップ(RotatoryClip)と前回のRoundtripClipが違うのは、一定方向に再生していた場合連続して再生するところにある。RotatoryClipには正方向に連続再生をさせるproceed()と連続逆再生させるregress()の２つのメソッドを追加した。これは単純にRoundtripClipのメソッドを呼ぶだけであるが、新たに連続再生を記述した２つのstate(ContinuousForwardState,ContinuousBackwardState)を呼ぶので実際の動作は全く違ったものとなる。

import ContinuousForwardState;
import ContinuousBackwardState;
class RotatoryClip extends RoundtripClip{
	public function proceed():Void{
		expand();
	}
	public function regress():Void{
		compress();
	}
	public function getForwardState():IState{
		return new ContinuousForwardState(this);
	}
	public function getBackwardState():IState{
		return new ContinuousBackwardState(this);
	}	
}

正方向も逆再生も基本は同じであるので、逆再生のstateだけで説明をする。regress()が呼ばれるとcompress()が呼ばれる。compressはstateにContinuousBackwardStateクラスのインスタンスを渡すのでターゲットとなるrtcのonEnterFrameで以下の動作が実行されることになる。rtcはMovieClipの拡張なのでonEnterFrameを持つ。speedという変数を設定しておけば再生速度を変えることも出来る。

public function ContinuousBackwardState(rtc:RoundtripClip) {
	this.rtc = rtc;
	rtc.onEnterFrame = function(){
		var step:Number = this.speed == undefined ? 1 : this.speed;
		var next:Number = this._currentframe - step;
		var end:Number = 1;
		if(next < end){
			next = this._totalframes + next - end - 1;
		}
		this.gotoAndStop(next);
		
	};
}

移動量の問題
スピードが１であれば、どのフレームでも次のフレームは+1又は-1で計算できる。しかし、例えばスピードが２の場合は以下の図のように移動先が変わるので、最初又は最後のフレームに来たときに反対側にジャンプする時に移動量を以下の方法で調整する。

next = this._totalframes + next - end - 1;