2010/02/24 | 12:02 pm

Progression と Firefox 3.6

Progression 3.1.82 を使っていて、Firefox の今のところ一番新しい Firefox 3.6 で確認したら、謎のスクロールバーが出現。。。

スクロールする範囲もないので、困ったもんですなっと。

とりあえず、progression.css に下記を追加で回避。

#flashcontent {
	position    :absolute;
	left        :50%;
	top         :50%;
	width       :740px;
	height      :300px;
	line-height	:0;
	margin-left :-370px;
	margin-top  :-150px;
	overflow	:hidden;	
	}

flash の全画面表示でも今のところ問題無しなので、多分大丈夫かと。

COMMENT

CATEGORY

POSTED

jam

2009/12/02 | 0:47 am

Progression でクロスフェード

久々に Progression 使ってサイト構築したときの Tips

Progression でのシーンの移動の際、通常は _onGoto() と _onInit() 内にある addCommand() の2つの処理を待つのですが、
どーしてもクロスフェードが必要になった場合の処理。
SerialList を static な変数として生成しておいて、都度アクセスするのが一番効率良いやり方らしいス。
(自分確認ではなく開発者本人がおっしゃってたので、大丈夫かと。)

やり方はいたって簡単。
IndexScene と ChildScene の _onInit と _onGoto の addCommand() での処理で静的な変数として生成した SerialList を呼ぶ。
(注:そのままだと addCommand は SerialList のためクロスフェードしないので、ParallelList にしておく必要アリ)

-IndexScene.as


public static var customCommands:SerialList = new SerialList();	// ← これ!

public var page:IndexPage;

/**
* コンストラクタ
*/
public function IndexScene() {
	addScene( new ChildScene( "child" ) );

	page = new IndexPage();
	page.alpha = 0;
}

/**
* シーンオブジェクトが目的地だった場合に、到達した瞬間に送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onInit():void {
	// 実行したいコマンドを登録します。
	addCommand(
		new ParallelList( null,
			IndexScene.customCommands,	// ← ここで実行。初回は中身が空なので何も起きませぬ。
			new SerialList( null,
				new AddChild( progression.container, page ),
				new DoTweener( page, { alpha:1, time:2 } )
			)
		),
		function():void {
			IndexScene.customCommands.clearCommand( true );		// ← クロスフェード後に中身をクリアしとく
		}
	);
}

/**
* シーンオブジェクトが出発地だった場合に、移動を開始した瞬間に送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onGoto():void {
	IndexScene.customCommands.addCommand(	// ← ここでは RemoveChild しないで、customCommands に登録だけしておく
		new DoTweener( page, { alpha:0, time:2 } ),
		new RemoveChild( progression.container, page )
	);

	// 実行したいコマンドを登録します。
	addCommand(
	);
}

下階層のシーンでも基本的に処理は一緒。

-ChildScene.as

/**
* シーンオブジェクトが目的地だった場合に、到達した瞬間に送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onInit():void {
	// 実行したいコマンドを登録します。
	addCommand(
		new ParallelList( null,
			IndexScene.customCommands,	// ← ここで実行。IndexScene の _onGoto() で設定したコマンドが同時に実行されます。
			new SerialList( null,
				new AddChild( progression.container, page ),
				new DoTweener( page, { alpha:1, time:2 } )
			)
		),
		function():void {
			IndexScene.customCommands.clearCommand( true );		// ← クロスフェード後に中身をちゃんとクリアしとく
		}
	);
}

/**
* シーンオブジェクトが出発地だった場合に、移動を開始した瞬間に送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onGoto():void {
	IndexScene.customCommands.addCommand(	// ← このページの処理を登録
		new DoTweener( page, { alpha:0, time:2 } ),
		new RemoveChild( progression.container, page )
	);

	// 実行したいコマンドを登録します。
	addCommand(
	);
}

シーンの _onGoto() では、コマンドの登録だけして、
実際の処理は、遷移先のシーンの _onInit(() で実行させるって行程です。
この処理を全部のシーンで実行させるようにしておけば、全部のページ遷移でクロスフェードになります。

COMMENT

POSTED

jam

2008/11/27 | 19:40 pm

loadChild() で外部swf をロード

するときの場合です。

基本的には AS3 の Loader() の処理と一緒っぽいです。
多分です。

例えば、子シーンで外部swf をロードする場合 : SceneObject を extends したモノ

private var sp:Sprite;
private var com:LoadChild;
private var isLoading:Boolean = false;
private var childMovieClip:MovieClip;

public function ChildScene( name:String = null, initObject:Object = null ) {
 	super( name, initObject );

	// シーン名 | タイトルの設定
	name = "childscene";
	title = "HERE IS CHILD SCENE";
}

protected override function _onLoad():void {
	// 実行したいコマンドを登録します。
	sp = new Sprite();

	var req:URLRequest = new URLRequest( "contents/swf/child.swf" );
	com = new LoadChild( sp, req );

	com.loader.onCastLoadStart = function():void {
		isLoading = true;
		this.addCommand(
			// ローディングの開始アニメーションとか
		)
	};
	com.loader.onCastLoadComplete = function():void {
		isLoading = false;
		childMovieClip = this.content;	// これで、子swf にアクセスさせて、その function を読んだり出来るようにしておきます。
		this.addCommand(
			new AddChild( progression.container, sp ),
			// ローディングの終了アニメーションとか
		);
	};
	com.addEventListener( ProgressEvent.PROGRESS, onProgress );
	// com.loader.contentLoaderInfo.addEventListener でも一緒です。
	com.execute();
}

private function onProgress( e:ProgressEvent ):void {
	var loaded:Number = com.loader.contentLoaderInfo.bytesLoaded;
	var total:Number = com.loader.contentLoaderInfo.bytesTotal;
	var percent:Number = (loaded / total);
	trace( "loading = " + percent );	// ローディング状況を trace() する
};

あとは、 childMovieClip に命令するとか、child.swf のタイムラインにアニメーション作っておくとかで
大丈夫ではないでしょうか。
もっといい方法がある気がしてならない。

そして、殴り書きのメモみたいに簡単でスイマセン。
落ち着いたら、ちゃんと。。。出来たらいいな。。。

COMMENT

POSTED

jam

2008/11/26 | 18:31 pm

初 progression サイト

が昨日公開されました。

トンでもスケジュールな案件だったので、
一球入魂するには progression しかないと思い、
思い切って使用させて頂きました。

遷移の複雑な部分を任せられる上に、各ページやその他の部分を作り込む時間がないなーっと思ってましたが、意外とあったりして、ホントに作業が楽になりました。
progression のホームページのキャッチコピーそのままです。

遥か昔の偉い人が、「神は死んだ」って言ってますが、ここに居ました。
ありがとうございました。

お惣菜屋さんのウェブサイトで、どれもこれも美味しそうなのばかりで、夜中の作業が泣きそうでした。

-
RF1 – X’mas Special Site

Client : Rock Field Co., Ltd.
Agency : amana inc.
Design : Rock Field Co., Ltd.
Flash Develop : Akari, Inc.
-

CATEGORY

POSTED

jam

2008/11/21 | 15:01 pm

progression で作るページ

こちらで公開されている taka:niumさんのサンプルを見てて気づいたので、ちょいメモ。

jp.progression.casts.animation.InOutMovie.as を extends するとタイムラインに作ったアニメーションを CastEvent.CAST_ADDED のタイミングで再生してくれる。
ラベル処理で再生するので、タイムラインベースみたいに作れるみたいデス。

クラス自体に
private var _inStateFrames:Array = [ "in", "stop" ];
private var _outStateFrames:Array = [ "stop", "out" ];
とあり、その下の _castAdded() での処理をみると
配列の frames[0] に移動して、 frames[i] に向かって New DoTweener() をしてるから

表示するときは、
ラベル「in」から再生、そして「stop」に来ると停止
消すときは、
ラベル「stop」から再生、そして「out」で停止

なるほど、これはラクだ!!
自分で gotoAndPlay() とか書かないで、ラベルの位置で制御できるなんて、ステキ過ぎる。


追記 : 08.11.21 – 18:05

ダウンロードできるサンプルだと書かれていないのだけれども、
InOutMovie は CastMovieClip を拡張したものなので、
protected override function _onCastAdded() と、
protected override function _onCastRemoved() が使用できます。
これの addCommand() でガシガシ処理しちゃえるのね。

POSTED

jam

2008/11/17 | 20:59 pm

compiler errors で url エラーが…

完全に自分の凡ミスなのですが、
xml にサムネイルの画像パスを記述してて、
それを子シーンにて、こんな感じで読み込みます。

var xml:XMLList = new XMLList(this.sceneInfo.data);
var obj:Object = XMLUtil.xmlToObject( xml );
path = obj.imageurl;

その後、それを使って URLRequest しようとしたときでした。

var req:URLRequest = new URLRequest( path );

んが、何も表示されないであります。
深度の問題かなっと思ったけれども、レイアウトに必要なものは
ほとんど new AddChildAt() で指定しているので、それはないなっと。

っで、色々 trace() を加えていたら、発見。
実ディレクトリでは「contents/images/thumbnail/***.jpg」となっているのですが、
xml には手違い(← 言い訳)で「contents/image/thumbnail/***.jpg」と記述してました・・・。

普通なら、
「Error #2044: ハンドルされていない ioError : text=Error #2035: URL が見つかりません。」
が Output で表示されるので、全然気づきませんでした。

お恥ずかしい限りです。。。

COMMENT

POSTED

jam

2008/11/12 | 20:37 pm

ルートシーンの Property を参照する

ときは、「IndexScene(root).PROPERTY_NAME」の様に書けば良いそうです。

なので、こんな感じになるっということですかね。

// example code : assume TEMP as root property
var slist:SerialList = new SerialList()
slist.addCommand(
	new Trace("TEMP : " + IndexScene(root).TEMP)
)
// output - TEMP : [CLASS_NAME id="TEMP" name="instance**" group="null"]

今のとこの謎:
1. 下階層の extends CastSprite したモノから progression が参照できない。
extends SceneObject だと出来る。なんで??

解消しました。コードは ↓

2. _onLoad() と _onInit() の違いをいまいち把握してない。
これは後に大問題になりそうな予感。。。
3. 子シーンから親シーンに戻って来たときはどーなるの?
サンプルだと行きっぱなしですね、これどーにかしないと。
4. そもそも僕のやり方は合ってるのだろうか??
きっと人それぞれ最終的なカタチも仕様も違うから何とも言えないけど、何かもっと有り難いやり方がある気がしてならない今日この頃。

しかし、急な案件のおかげ様でじっくりやる時間が無いデス。
むー、困っーたー


追記 : 08.11.13 – 2:43 am

謎その1の解消コード
注:かなりの力技です。もっと良い方法がありそうなので、あんまり参考にしない方がよいかも…

まずは、IndexScene.as の CastSprite を宣言する時に引数を追加する


var temp:CastSprite = new CastSprite({prog:progression});

そして、CastSprite.as に参照させるスクリプトを記述


private var indexObject:Object;

/*======================================================================*//**
 * コンストラクタ
 */
public function CastSprite( initObject:Object = null ) {
	super( initObject );
	// indexObject に initObject の参照をコピー
	indexObject = initObject;
	trace("args : " + indexObject.prog)
}

// output - args : [Progression id="Index" group="null" sync="true"]

これで、CastSprite 内でも「indexObject.prog」は「progression」と同様に機能します。
また何かいい方法を発見したら、追記します。

COMMENT

POSTED

jam

2008/11/11 | 20:57 pm

子シーンでの処理を追加

-
http://www.brooklyn.jp/progression/
-

が今や、只の検証用ページになりつつある。。。
一応、子シーンでの処理を追加しました。
といっても、画像が読み込まれるだけのなーんにもオモロくない感じです。

子シーンとして使っている ChildSceneObject.as がこんな風になりました。


public var bgContainer:CastSprite;

private var imgLoader:CastImageLoader;
private var scene:String;

public function ChildSceneObject( name:String = null, initObject:Object = null ) {
	super( name, initObject );
}

protected override function _onLoad():void {

	// 実行したいコマンドを登録します。
	var xml:XMLList = new XMLList(this.sceneInfo.data);
	// 現在いるシーンの名前を取得して登録
	scene = String(xml).toLowerCase();

	// 今は、背景の画像を読み込んだ後に CastSprite に AddChild しているので、それを参照
	bgContainer = new CastSprite();
	bgContainer = progression.container.getInstanceById("bgContainer") as CastSprite;

	imgLoader = new CastImageLoader();
	imgLoader.alpha = 0;
	imgLoader.addEventListener(CastEvent.CAST_LOAD_COMPLETE, loadComplete);

	// シーンの名前に該当する画像を読み込む
	addCommand(
		function():void { imgLoader.load(new URLRequest("contents/images/"+scene+".jpg")) }
	);
}

public function loadComplete( e:CastEvent ):void {

	imgLoader.removeEventListener(CastEvent.CAST_LOAD_COMPLETE, loadComplete);

	var slist:SerialList = new SerialList();
	slist.addCommand(
		new AddChild( bgContainer, imgLoader ),
		new DoTweener( imgLoader, {alpha:1, time:3, transition:"easeOutQuart"} )
	);
	slist.execute();

};

// 移動時に画像を消す
protected override function _onUnload():void {
	// 実行したいコマンドを登録します。
	addCommand (
		new DoTweener( imgLoader, {alpha:0, time:2, transition:"easeOutQuart"} ),
		new RemoveChild( bgContainer, imgLoader )
	);
}

画像を消すのは、現状は _onUnload() で処理しているけれど、 _onGoto() とどっちの方がいいのやら。
でも、これは子シーンで下階層に何も無い場合は、確実に _onUnload() の対象になるはずなので、
とりあえずは、これでいいかな。

そう言えば、前回の投稿で作ったボタンのままなのだけれど、なぜか遷移中に機能が kill されていない。。。。
おかしい、 progression のサンプルを初めて触ったときは自動で出来てたのに。
autoLock を false にした記憶はないので、どっかで間違ってる可能性大ですね。

POSTED

jam

2008/11/10 | 0:38 am

StageUtil の example がおかしい?

progression の ASDOC をざらーっと見ていたら気付いたこと。

ユーティリティクラスの StageUtils の中にある Public Method の getDocument() の使用例で下記のようになっているけど、これだと動かない気がする。

var documentRoot:Sprite = getDocument( stage );
trace( documentRoot.root == documentRoot ); // true

そもそも、ユーティリティ系のクラスは import による宣言のみで、コンストラクタを呼び出さない仕様になっているので、new 宣言が出来ないはず。
なので、使用するときは、その都度 StageUtil を頭に付けないといけないんじゃないかなーっと。

だから、多分こーすれば使えると思われまっす。

var documentRoot:Sprite = StageUtil.getDocument( stage );
trace( documentRoot.root == documentRoot ); // true

COMMENT

POSTED

jam

2008/11/07 | 22:05 pm

xml からシーンとボタンを作る その2

xml の 内に cls を指定すると、
その SceneObject が適用されるみたいです。

試しに、ChildSceneObject.as と言うのを作って、
「src/classes/project/layout/ChildSceneObject.as」
ってな感じで配置しておいて、前回の xml を下記に変更。

<?xml version="1.0" encoding="UTF-8" ?>

<prml version="2.0.0" type="text/prml">

	<scene name="about" cls="project.layout.ChildSceneObject">
		<caption>about</caption>
	</scene>

	<scene name="contact" cls="project.layout.ChildSceneObject">
		<caption>contact</caption>
	</scene>

</prml>

それから、
addSceneFromXML( new XML( this.latestData) );
を命令しているクラス(僕の場合は IndexScene.as )に
public var childScene:ChildSceneObject;
っと、こんな感じで宣言しておくと勝手に適用されてる!!
(childScene の部分は何でも良いみたいです。)

半端ねーであります。
触れば触るほど、凄さが分かります。
今まで自分の考えていたやり方が、いかに幼稚か思い知らされます。。。

COMMENT

POSTED

jam

2008/11/07 | 18:38 pm

xml からシーンとボタンを作る

「Is It So Easy」の northprint さんのこのエントリーを参考に作ってみます。

各ボタンは、xml を読み込んだ時にシーンと一緒に作成。
そして、その各ボタンは navi と言う名前の CastSprite に addChild します。
っで、navi を Event.RESIZE のイベントハンドラーで位置を操作する感じ。

private function setSiteNavigation():void {

	navi = new SiteNavigation();	// これは事前に public var などで定義しておく
	navi.id = "navi";

	var slist:SerialList = new SerialList();
	slist.addCommand(
		new AddChild( progression.container, navi ),
		function():void { setSiteMenu() }
	);
	slist.execute();

}

public function setSiteMenu():void {

	var slist:SerialList = new SerialList();
	slist.addCommand(
		new LoadURL( new URLRequest( "contents/xml/data.xml" ) ),
		function():void {
			addSceneFromXML( new XML( this.latestData ) );
			// xml から取得して生成されたシーンの内容を確認
			trace( toXMLString() );

			var plist:ParallelList = new ParallelList();

			for(var i:int=0; i<numScenes; i++) {
				var xlist:XMLList = new XMLList( scenes[i].sceneInfo.data );
				var obj:Object = XMLUtil.xmlToObject( xlist );
				var btn:MenuButton = new MenuButton();
				btn.setMenuName = obj.caption;
				btn.setSceneId = scenes[i].sceneId;
				btn.displayMenu();

				btn.x = (i + 1) * 50;
				btn.y = 10;

				// navi の中に addChild する
				plist.addCommand(
					new AddChild( navi, btn )
				)
			}

			// ParallelList を実行する
			this.parent.insertCommand(
				plist
			)
		}
	)
	slist.execute();

};

addSceneFromXML( new XML( this.latestData ) ); ってので、 this.latestData って書くと、
直前のデータを勝手に読み込んでくれるみたいです。
ステキ過ぎます、天才です。
numScenes も xml からシーンを読み込んだ段階で、生成されてるみたい。
addSceneFromXML() の直後に trace() とかで確認すると、xml で記述されてる の数と、あらピッタリ!

ちなみに、読み込んでいる data.xml の中身はこんな感じ

<?xml version="1.0" encoding="UTF-8" ?>

<prml version="2.0.0" type="text/prml">

	<scene name="about">
		<caption>about</caption>
	</scene>

	<scene name="contact">
		<caption>contact</caption>
	</scene>

</prml>

そして、各ボタンのクラスが ↓

public class MenuButton extends CastSprite {
	//public var _id:SceneId;
	public var _name:String;

	public var txt:TextField;

	/*======================================================================*//**
	 * コンストラクタ
	 */
	public function MenuButton( initObject:Object = null ) {
		super( initObject );

		txt = new TextField();
	}

	public function set setSceneId(id:SceneId):void { sceneId = id; }

	public function set setMenuName(name:String):void { _name = name; };

	public function displayMenu():void {

		txt.mouseEnabled = false;
		txt.text = _name;
		txt.setTextFormat( new TextFormat( null, 10 ) );
		addChild( txt );

	};

};

各メニュー用のボタンにアクションを追加するときは ↑ の
_onCastAdded() 内に記述するわけですね。


追記 : 08.11.07 – 20:21 pm

アホな事してた。
MenuButton.as の public var _id:SceneId; は全然要らない。。。。
ちゃんとボタンのシーンに登録するには、 sceneId に登録しなくちゃ意味無しなので、
public function set setSceneId(id:SceneId):void { _id = id; }; を
public function set setSceneId(id:SceneId):void { sceneId = id; }; に変更
アフォー過ぎて、鼻血でるかと思った。


追記 : 08.11.07 – 20:26 pm

あれ、何で MenuButton.as の元が CastSprite なんでしょー??
これって、もしかして CastButton なんじゃないのかな〜〜〜〜〜〜〜。
ちょっと書き換えたほうが良さげ。

COMMENT

POSTED

jam

2008/11/07 | 14:56 pm

progressionに自分のクラスを読み込む

ってトコまでやっとこさ来れました。

-
http://www.brooklyn.jp/progression/
-

画像出て来て、ロゴ出てくるだけですが。。。
ちなみに、画像は、夏に海行った時に「あ、トリだ!」って
一瞬でパッて撮ったヤツなので、何の意味もないです。

ちなみに、画像の読み込み処理を Index.as の _onInit() 内で処理していたら、
サーバに上げて、htmlで見た時にロゴの表示まで行かなかった。
ってことで、処理を丸ごと IndexScene.as 内の _onLoad() に移したらサクッと行けた。
むむー、なんぞや。。。

今のトコの IndexScene.as はこんな感じデス。


public var bgLoader:CastImageLoader;
public var logo:CastSpriteLogo;

public function IndexScene() {
}

protected override function _onLoad():void {
	// 実行したいコマンドを登録します。

	bgLoader = new CastImageLoader();
	bgLoader.id = "bgLoader";
	bgLoader.alpha = 0;
	bgLoader.ratio = true;

	bgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, monitorLoading);
	bgLoader.addEventListener(CastEvent.CAST_LOAD_COMPLETE, function():void {
		progression.container.addChild(bgLoader);
		onCompleteLoad();
		bgLoader.removeEventListener(CastEvent.CAST_LOAD_COMPLETE, arguments.callee);
	});

	addCommand(
		function():void {
			bgLoader.load(new URLRequest("contents/images/sky.jpg"))
		}
	);
}

private function onCompleteLoad():void {
	bgLoader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, monitorLoading);

	logo = new CastSpriteLogo();
	logo.id = "logo";

	progression.container.stage.addEventListener( Event.RESIZE, onResizeHandler );
	resizeStageLayout();

	var slist:SerialList = new SerialList();
	slist.addCommand(
		new DoTweener( bgLoader, {alpha:1, time:3, transition:"easeOutQuart"} ),
		new AddChild( progression.container, logo )
	);
	slist.execute();
}

private function monitorLoading(e:ProgressEvent):void {

	trace("LOADING : " + Math.floor(e.bytesLoaded / e.bytesTotal * 100));

};

private function onResizeHandler(e:Event):void {

	resizeStageLayout();

};

private function resizeStageLayout():void {
	var sWidth:Number = progression.container.stage.stageWidth;
	var sHeight:Number = progression.container.stage.stageHeight;
	var ratio:Number = progression.container.width / progression.container.height;

	// 背景の設定
	bgLoader.width = sWidth;
	bgLoader.height = sWidth / ratio;

	if(bgLoader.height < sHeight) {
		bgLoader.height = sHeight;
		bgLoader.width = sHeight * ratio;
	}

	// ロゴの設定
	logo.x = 40;
	logo.y = (sHeight / 3);
};

っで、題名の自分のクラスを読み込んで処理している
CastSpriteLogo.as が ↓


import project.effect.DisplacementEffect;

// 大元は template にある MyCastSprite クラスです
public class CastSpriteLogo extends CastSprite {

	public var logo:SiteLogo;	// Library でこのクラス名にリンケージ指定してあるヤツ
	public var effect:DisplacementEffect;

	public function CastSpriteLogo( initObject:Object = null ) {
		super( initObject );

		logo = new SiteLogo();
		logo.alpha = 0;
		addChild( logo );

		effect = new DisplacementEffect( logo );
	}

	protected override function _onCastAdded():void {
		// 実行したいコマンドを登録します。
		effect.start();
		effect.addEventListener(DisplacementEffect.EFFECT, onReturnHandler);

		addCommand(
			// 任意のコマンドを記述してください。
		);
	}

	private function onReturnHandler(e:Event):void {

		effect.removeEventListener(DisplacementEffect.EFFECT, onReturnHandler);
		trace("====  onReturnHandler() called  ====");

	};

	protected override function _onCastRemoved():void {
		// 実行したいコマンドを登録します。
		addCommand(
			// 任意のコマンドを記述してください。
		);
	};

};

それから、グラグラしたエフェクト処理してるクラスが ↓

package project.effect {

	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.filters.DisplacementMapFilter;
	import flash.events.Event;
	import flash.geom.Point;

	public class DisplacementEffect extends Sprite {

		public static const EFFECT:String = "";

		private var w:Number;
		private var h:Number;
		private var octaves:Number;
		private var offset:Array;
		private var speed:Array;
		private var rseed:Number;

		private var image:MovieClip;
		private var bmd:BitmapData;
		private var mappoint:Point;

		private var scalex:Number;
		private var scaley:Number;

		public function DisplacementEffect(target:MovieClip):void {

			initProperty(target);

		};

		private function initProperty(target:MovieClip):void {

			w = 800;
			h = 100;
			octaves = 1;
			offset = [];
			speed = [];
			rseed = Math.floor(Math.random() * 10000);

			image = target;
			bmd = new BitmapData(w, h, false, 0xFF000000);
			mappoint = new Point((image.width - w)/2, (image.height - h)/2);

			scalex = 80;
			scaley = 0;

			this.setNoiseAmount();

		};

		private function setNoiseAmount():void {

			for(var i:int=0; i= 1) scalex *= 0.965;

			bmd.perlinNoise(w/10, h/10, octaves, rseed, false, true, 1, true, offset);
			var dmf:DisplacementMapFilter = new DisplacementMapFilter(bmd, mappoint, 1, 1, scalex, scaley);
			image.filters = [dmf];

			if(image.alpha < 1) {
				image.alpha += 0.0095;
			} else {
				removeEventListener(Event.ENTER_FRAME, applyEffect);
				bmd.dispose();
				dispatchEvent(new Event(EFFECT));
			}

		};
	};
};

これは、ロゴのエフェクト専用にササッ作って使い回し出来るヤツじゃないので、
他で使う場合は、 property や処理の部分を色々いじって下さい。

---
追記 : 08.11.07 - 17:01

bgLoader.addEventListener(CastEvent.CAST_LOAD_COMPLETE, function():void {}) 内に
removeEventListener 処理を書いてなかったので、それを追記。
あぶなし、あぶなし。。。

POSTED

jam

2008/11/06 | 20:41 pm

progression 3

最近、色んなトコで話題な「Progression 3」を始めました。
(っというか、始めないといけない状況になったわけです)

ものすっごい著名なDeveloperさんのブログで色んなTipsが公開されているので、
とても参考になります。

とりあえず、
こちらの「+39」さんと、
こちらの「northprint」さん、
それから、こちらの「あつのすけ」さんは神様みたいな方です。

あとは、気になる単語をASDOCで調べれば、何とかなるかもしれないかもしれない。

ってことで、諸々を参考にしながら、手始めに背景画像を読込んで表示させるってヤツを
こしらえてみました。

protected override function _onInit():void {
	// stage の初期設定を行います。
	align = StageAlign.TOP_LEFT;
	quality = StageQuality.HIGH;
	scaleMode = StageScaleMode.NO_SCALE;

	// 開発者用の出力を有効化します。
	//Verbose.enabled = true;
	//Verbose.filteringCommand();

	// Progression インスタンスを作成します。
	prog = new Progression( "index", stage, IndexScene );

	// ブラウザ再生時に URL 同期を有効化します。
	prog.sync = false;

	var bgLoader:CastImageLoader = new CastImageLoader();
	bgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, monitorLoading);
	bgLoader.addEventListener(CastEvent.CAST_LOAD_COMPLETE, function():void {
		prog.container.addChild(bgLoader);
		bgLoader.id = "bgLoader";
		bgLoader.alpha = 0;
		bgLoader.addCommand(
			new Trace("読込み完了です"),
			new DoTweener( bgLoader, {alpha:1, time:2} ),
			new Goto(prog.firstSceneId)
		)}
	)

	var slist:SerialList = new SerialList();
	slist.addCommand(
		function():void {
			bgLoader.load(new URLRequest("contents/images/background.jpg"))
		},
		new Trace("Load 開始します")
	);
	slist.execute();
}	

private function monitorLoading(e:ProgressEvent):void {
	trace("LOADING : " + Math.floor(e.bytesLoaded / e.bytesTotal * 100));
};

Index.as の _onInit 内では、「addCommand()」が使えないらしいので、
使用可能な「SerialList()」経由で命令すると良いらしいです。
bgLoader.id = “bgLoader”;ってしてるのは、IndexScene.asで参照するため。
ソースは ↓

protected override function _onLoad():void {
	// 実行したいコマンドを登録します。
	addCommand(

	);

	trace("container : " + progression.container);
	trace("loader : " + progression.container.getInstanceById("bgLoader"));
}

これで、背景を参照できるので、後でごにょごにょするときも大丈夫。
まだ未検証ですが、Index.as で読込みを完了しておいて、
IndexScene.as 内で他と一緒に表示とかも可能なのかな??

↑ 大丈夫でした。
まず、Index.as の new DoTweener( bgLoader, {alpha:1, time:2} ) の部分をコメントアウト。

それで IndexScene.as を下記に変更

protected override function _onLoad():void {
	// 実行したいコマンドを登録します。
	var bg:CastImageLoader = progression.container.getInstanceById("bgLoader") as CastImageLoader;
	addCommand(
		new DoTweener( bg, {alpha:1, time:2} )
	);
}


追記:08.11.07 – 21:40 pm

IndexScene.as 内の function を _onLoad() に変更。
_onInit() だと、下階層に行って戻って来たときも呼ばれてしまうので、
最初だけのときは _onLoad() を使った方がよい。

POSTED

jam

JUN NAKAJIMA
Tokyo, Japan.
member of Onawatobi.
contact@brooklyn.jp