f60k@Lab

　MovieClip.cacheAsBitmapはFlashがムービークリップ(MC)の表示されている状態を内部にビットマップとしてキャッシュさせるプロパティである。
ではどういう場合にキャッシュ機能を使えば良いのだろうか。ベクター形式の背景画像上で他の要素をアニメーションさせると速度が低下するので、背景画像に対してopaqueBackground=trueとする。背景画像はビットマップとしてレンダリングされるので高速にアニメーションを行うことが出来る。テキストフィールドで大量のテキストをスクロールさせる時はMCの中にテキストフィールドを配置し、MCのscrollRectにRectangleを設定することで中に配置されたテキストフィールドのスクロール速度を改善できる。中に配置されたコンテンツはMCのscrollRectのサイズでビットマップ化されたデータが使われる。通常mainStageに対して画面全体が描画される。bitmapキャッシュを使用すると個々のMCはbitmap化された状態で既にグラフィックがキャッシュされるので再計算する負荷が減るというわけである。逆にパフォーマンスを低下させることもある。この機能は処理を高速化する反面ビットマップデータとしてキャッシュするためメモリ消費が大きくなるので、250x250ピクセルのデータの場合メモリ消費は１ＫＢから２５０ＫＢへと増大する。キャッシュした画像を拡大すると大量のメモリ消費につながる。また、MC自体が大きくグラフィックが変更するようなアニメーションなどを持つ場合性能に悪影響となる場合がある。

Posted by Dai at 3:21 PM | Permalink | Comments (0)

NameSpaceを定義する
クラス内に定義する場合。

package sample {
  public class SampleClass {
    // クラス内に名前空間を定義
    public static namespace version1;
    public static namespace version2;
  }
}

NameSpaceを指定
変数に名前空間を指定した例。ローカル変数には指定できない。

package sample {
  public class SampleClass {
   version1 var foo:int = 0;
   version2 var foo:int = 10;
  }
}
trace(version1::foo);//0
trace(version2::foo);//10

オープンな名前空間
名前空間を定義して変数と結びつけるところまで出来た。しかし今までのように、名前空間を指定しないで扱えないのだろうか。trace(foo)を使えるようにするには暗黙で名前空間が指定してあるように知らせておく必要がある。

trace(version1::foo);//0
use namespace version1;
trace(foo);//0

public function A(){}//invoked
version1 function A(){}

use namespace version1;
public function A(){}
version1 function A(){}//invoked

Posted by Dai at 11:57 PM | Permalink | Comments (0)

フォントファイルとは？
web上にOSのフォントをそのままアップしてもフォントは利用できない。swfから読み込める形式はｓｗｆであるので利用できるカタチにするためにはｓｗｆを作ることが必要である。フォント１個に対して１個のflaファイルを作成するのが日本語全体のファイルサイズを考えると向いている。
フォントはライブラリパレットからしか作成できない。ライブラリのメニューから新しいフォントを選択する。フォントシンボルプロパティに名前とフォントを指定する。シンボルプロパティの名前というのはMCでいうシンボル名。フォントはリストから選択する。サイズというのはビットマップフォントの時だけ指定する。ビットマップフォントはflashのフォントでは8ptを使っているものが多いので8にすれば通常は問題ない。

ランタイム共有書き出し
リンケージ名（識別子）はテキストフィールドにフォントを指定するときに使う。ランタイム共有用に書き出すと理由は分からないが必ずこのフォントｓｗｆのアップロードをするURLを入れなければならず、後でアップロードする場所を変えることになったら、このURLを変えなければならない。

ライブラリには一個のシンボルが登録された状態。このままｓｗｆにする。

ランタイム共有読み込み
まず、ＵＲＬにフォントのｓｗｆをアップロードする。次に利用したいflaのライブラリを開き、フォントflaのライブラリからドラッグする。

このシンボルのプロパティを選択すると、チェックが読み込みだけでフォントflaで指定したURLや識別子が自動的に埋め込まれている状態で開く。このURLは必ずフォントflaのフォントシンボルの指定したURLと一致しなければいけない。

フォントを利用する
このフォントをオーサリングで配置したテキストフィールドに指定するには、フォントの識別子をそのままフォント名に入れるだけである。

Posted by Dai at 1:55 PM | Permalink | Comments (0)

シーク方向の問題
ここで問題となるのはどっちの向きに移動させればよいかということである。このシーク動作では正方向にのみ回転させるという条件にしてしまうと、例えば正面の１フレーム右の絵が現在表示していると、正面表示には約一回転しなければいけなくなってしまう。そこで実際表示したいフレームの番号と現在のフレーム番号から正方向と逆方向の再生どちらが移動数が少なくて済むかを計算した。

回転方向を決定する
シークしたい位置と現在の位置から単純に移動した場合の移動量がフレームの全体量の半分より超えなければよい。まず単純に移動した場合から移動方向を計算するその移動量が半分より超えていた場合は-1を掛けてその逆に再生する。

var dir = 0;
var rev = Math.abs(rtc._currentframe - frame) > Math.floor(rtc._totalframes / 2) ? -1 : 1;

if(frame == rtc._currentframe){
	dir = 0;
}else{
	if(frame < rtc._currentframe){
		dir = -1 * rev;
	}else{
		dir = 1 * rev;
	}
}

移動をする
endがターゲットとなるフレーム番号という違いがあるものの、RoundtripClipと全く同じである。

rtc.onEnterFrame = function(){
	var next:Number = this._currentframe + dir;
	var end:Number = frame;
	if(next < 1){
		next = this._totalframes;
	}else if(next > this._totalframes){
		next = 1;
	}
	this.gotoAndStop(next);
	if(next == end){
		delete this.onEnterFrame;
		stop();
	}
};

Posted by Dai at 3:32 PM | Permalink | Comments (0)

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

連続再生の仕組み
このクリップ(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);
	}	
}

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;

Posted by Dai at 2:45 PM | Permalink | Comments (0)

ｓｗｆは軽く作る
同様にｍｐ３といったメディアファイルを扱う場合も、ｓｗｆ自体から出来るだけメディアを排除することが望ましい。mp3自体を管理しやすいこと、さらにURLから読み込むことでfla自体が無駄に大きくならないことで制作作業がしやすいことも実際の制作現場ではかなりプラスになる。

MP3を読み込む

_snd = new Sound(c);
_snd.onLoad = function(success:Boolean){
	if(success){
		this.setVolume(vol);
		this.start(0);//repeat from beginning
	}
};
_snd.loadSound(url);

音量を保存する
今回このプロジェクトではミュートの設定を保存し、音を嫌うユーザに対して再びサイトの訪れた時にミュートの状態を復帰するように制作した。突然映像が流れて同時に音声が流れることを嫌う人も少なからずいるのである。ローカルにボリューム値が設定されていなければ、デフォルトの値を設定する。ローカル共有オブジェクトには現在のボリューム値をセーブする。

_so = SharedObject.getLocal(SO_NAME, "/");
_so.data.top_vol = _so.data.top_vol == undefined ? DEFAULT_VOLUME : _so.data.top_vol;
muteBtn.addEventListener("click", this);
muteBtn.toggle = true;
muteBtn.selected = _so.data.top_vol == 0 ? true : false;

Posted by Dai at 5:26 PM | Permalink | Comments (0)

NetStreamクラス
NetStreamクラスは一般にhttpサーバ又はFMS(旧FCS)から配信された映像や音声データをストリーミング再生するために使われる。以前の記事でplay()メソッドは詳しく説明してあるので参照していただきたい。

var conn:NetConnection = new NetConnection();
conn.connect(URL);
var stream:NetStream = new NetStream(conn);
stream.play(URI);

NetStream.Play.Reset
NetStream.PlayStart
NetStream.Buffer.Full
NetStream.Buffer.Empty
..バッファを埋めながら再生..
NetStream.Buffer.Full
NetStream.Buffer.Empty
NetStream.Buffer.Full
NetStream.Play.Stop
NetStream.Buffer.Empty

通常の再生環境ではバッファが減ったり増えたりしながら再生が行われる。バッファの容量が空になれば再生が続かずに停止するが、再生中は受信したデータでバッファを満たそうとする。バッファが空になる時は通常の再生中と再生が停止した時の２回あることが分かる。映像の再生はNetStream.Play.Stopの後にNetStream.Buffer.Emptyが呼ばれたときに初めて停止するので、NetStream.Play.Stopそのものが映像の再生停止を意味していない。

再生停止を取得する
前述したonStatusイベントから再生停止はどういうコードかが分かったので、これをもとにonStatusを記述してみる。stopped変数を使い、NetStream.Buffer.Emptyが呼ばれたときに、NetStream.Play.Stopが既に呼ばれているのかで条件分岐することで終了を見分けることが出来る。

var _stopped:Boolean;
var url:String = "movie";
function onStatus(info:Object):Void{
	switch (info.code) {
		case 'NetStream.Play.Start' :
			_stopped = false;
			break;
		case "NetStream.Play.Stop":
			_stopped = true;
			break;
		case "NetStream.Buffer.Empty":
			if(_stopped){
				//終了
			}
			break;
	}
}

var conn:NetConnection = new NetConnection();
conn.connect(URL);
var stream:NetStreamLoop = new NetStreamLoop(conn);
stream.play(URI);

Posted by Dai at 6:12 PM | Permalink | Comments (0)