progression Archive

弊社が制作したサイト「GRAND | 五月女則子 | スタイリスト・シズルコーディネータ」が、”Progression“のショーケースに掲載されました。

→ http://progression.jp/ja/showcase/#grand

ありがとうございました。

Progression4 beta1.3の驚異的進化 – Is It So Easy?.

またまた、色々アップグレード。
どんどん進化していきます。
追いつくのが大変。。

Progression4でHTMLのデータを読み込む – Is It So Easy?.

これってスゴイことなんじゃないかと思う。
いや、たぶんものすごくスゴイこと（日本語変

んで、今作ってる某サイトで、試しに導入してみてます。
なんとか、該当するHTMLをSWFで再現するところまでできた。
タイトルとか本文の見栄えはまぁ、CSSでのデザイン制御みたいな感覚だけど、
<table>とか<li><dl>なんかがくると、
もう、ブラウザ自体をプログラミングしてるみたいな感じで大変すぎ。
要素が増えた場合など、ある程度はフレキシブルに対応できるようにはしたけど、
どんなタグがきても・・・というのは、そりゃもうエライことです。
こういうの汎用的に使えるソースがあったらみんなうれしいんじゃないかなぁ。
というか、わたくしがうれしいですｗ

前回のエントリーの続きみたいなもんですが、
xmlなどの外部ファイルを読み込んだ時に、該当ファイルがなかったり、ネットワークエラーなどで読み込めなかった場合、処理が途中で中断してしまいます。
それを適切に処理するために、エラーが起きた場合の処理を入れる必要があるのですが、
いままで（ver.3）は、.listenコマンドで入れることができたのですが、
ver.4からは.listenコマンドが廃止になり、方法が変わりました。

前回のエントリーにも紹介したKAYAC様の記事にその答えが書いてあるので、
それを参考に、LoadURLを使った時の書き方をメモしておきます。

addCommand(
	new LoadURL( new URLRequest( "scenes.xml" ) ,{
	catchError:function( target:Object, error:Error ):void{
		trace( "【エラーをキャッチ】" );
		//読み込み処理を中断させる。（スキップ？）
		target.interrupt();
	}
	}),
	function():void {
		var xml:XML = new XML( this.latestData );
		//取得したxmlからシーンを作成
		addSceneFromXML( xml );
	}
);

LoadURLのinitObjectとして、catchErrorを設定するってわけですね。
これによって読み込みエラーが起きても、全体の処理は続くことになります。
interrupt()メソッドは、「その場で中断」ということですが、読み込み処理自体の中断ということになるようです。

ちなみに、コマンドフローの段階的な状況での制御は
onStart（開始時）、onInterrupt（中断時）、onError（エラー時）、onComplete（終了時）で設定できる。
それを組み合わせるとこんな感じ。

addCommand(
	new LoadURL( new URLRequest( "scenes.xml" ) ,{
	catchError:function( target:Object, error:Error ):void{
		trace( "【エラーをキャッチ】" );
		//読み込み処理を中断させる。（スキップ？）
		target.interrupt();
	},
	onStart:function():void{
		trace( "XMLの読み込み【開始】" );
	},
	onError:function():void{
		trace( "【【【　エラー　】】】" );
	},
	onComplete:function():void{
		trace( "XMLの読み込み【完了】" );
	},
	onInterrupt:function():void{
		trace( "XMLの読み込み【中断】" );
	}
	}),
	function():void {
		var xml:XML = new XML( this.latestData );
		//取得したxmlからシーンを作成
		addSceneFromXML( xml );
	}

上記の場合、onComplete
ver.3の頃に比べ、だいぶすっきり表記できます。
catchErrorと、onErrorの違いがわからんのですが、
プログレスバーや、ローディングアニメーションもこれで制御できそうです。

Progressionで、XMLデータからscene構造を作成した場合（いや、そうでなくても？）、sceneInfo.dataで各sceneの情報を得られたのですが、それがProgression ver.4からは変更になりました。

ver.4からは、sceneInfo.dataではなく、DataHolderクラスが追加され、dataHolder.data でアクセスするようになったそうです。

実は、sceneInfo.dataのことも、ついこの前知ったばかりなのですが、こりゃ便利と思ってver.4で使おうとしたらですね、思いっきりハマりまして、dataHolderを使うことまではわかっても、具体的な使い方がわからずで、結局しこしこと手当たり次第に試すという力技でその方法を発見しました。
せっかくなのでメモっときます。

scene構造を定義したXMLファイルの例

	
		
		プロフィール内容
	

作成したProfileSceneのソース

	protected override function atSceneInit():void {
		addCommand(
			function():void{
				trace( dataHolder);
				trace( dataHolder.target );
				trace( dataHolder.target.name );    //scene "name" 属性の値
				trace( dataHolder.target.title );   //scene "title" 属性の値
				trace( dataHolder.data[0].@href );  //ひとつめのデータの"href"属性
				trace( dataHolder.data[1].text() ); //ふたつめのデータの要素
			}
		);
	}

上記を実行するとこのように出力されます

[object WebDataHolder]
[ProfileScene sceneId=/index/profile]
profile
PROFILE | MYSITE
profile.png
プロフィール内容

scene “cls” 属性の値だけどうしてもアクセスできないんですが、
全然わからないです。わかる方教えてください。
まぁ、表現する上では必要ないのでいいんですが、なんとなく悔しい。
というか根本的な部分を理解してないようなので、
どなたかご教授いただければ幸いです。

Progression4での変更点でハマりやすいポイントが、下記のページでまとめられています。
[小ネタ] Progression 4 でハマりやすいポイント
他にもいくつかポイントがあるので、これは要チェックです。

わたくしは、1日半これでハマりました。。。orz

追記：後日、かの「KAYAC」様のブログにて、ver.4における変更点をわかりやすくまとめた記事を発見いたしました。
Progression4の新コマンドあれこれ
これはわかりやすい！
さすがKAYAC様です。

先日リリースさせた、sdl.コーポレートサイト_ver.04

せっかく、progressionにPreloaderクラスが用意されているので、
プリローダーを作ってみた。

入れると、ちゃんと動作しているという安心感がでる。
やっぱり空白で止まってると不安だもんね。

先日リリースさせた、sdl.コーポレートサイト_ver.04

ようやく、ポートフォリオ・パートが（ほぼ）完成しました。
もう少し手を加える予定ですが、だいぶ見れるようになったので、
まずは、公開。

いやぁ、これ大変でした。。。

本体の制作時間の5倍はかかったんじゃないかと思う。
ProgressionやASで知らなかったことが山盛りで、そいつらと格闘する日々。。。
しかし、おかげでかなり勉強になった。これで怖いものはありません（ウソ

見た目は結構シンプルなんですが、実は内部の処理は複雑で、
どのタイミングで何を動かすとか、これ終ったらこれやってとか、
同期・連携処理、あるいは分岐処理が異様に複雑に絡み合ってます。
ソースはかなりカオスなことになってますが、なんとか思った通りの動きを表現できました。

現段階でグラフィック作品の掲載はありませんが、
「MovableType」で更新管理できるようにしてありますので、
グラフィックチームの方々が書き込んでくれるのを期待しましょう。

さて、そんなわけで、今回のポイントとしては、
前述のように

• 「MovableType」で更新管理できる
  ようにしてあります。
  MovableTypeからxmlを書き出して、それを読み込んで展開します。
  もちろん画像ファイルもMovableTypeでアップロードしたものを外部ファイルとして読み込みます。
  これで追加・変更は楽になるほか、メンバーそれぞれが書き込めるようにすれば、
  誰か（オレ）がとりまとめて作業ということは必要ないので、
  より、タイムリーなポートフォリオができあがるんじゃないでしょうか。
  　
• 個別URLの発行
  これは、Progressionの機能ですが、各作品の個別URLを発行させています。
  こだわったところは、個別URLがありながらも、
  見た目的にページからページへ遷移するようなデザインにしないようにしました。
  あるページから次ページへという操作は、意外とストレスを感じるなぁと思ったからです。
  上下のスクロールだけのシンプルな操作で見ることができれば、そういったストレスもなく、
  どんどん作品を見てもらえるのかな。という考えです。
  そんなユーザビリティ的な部分にもこだわってみました。
  　
• サムネールのこだわり
  サムネール表示はなるべく大きくしました。
  あまりこじんまりとしたくなかったので、
  大きめに、しかも部分的に見せることで
  ちょっと見てみたくなるような期待感をあおるようにしています。
  しかも、そのまま説明画像になり、さらに複数表示可能にしました。
  背景にその画像をイメージとして配置することで、それほど大きくなくても
  ダイナミックな印象を与えるようにしています。（しかも3D!）

他にも、コンテンツの大きさに合わせてスクロールバーが変化するところや、
次のイメージを表示するためのタイマーにTweenerを使ってるところや、
フォントを外部swfにしていたりとか、
色々細かいテクニックを駆使しています。
まとめて書こうと思っていたのですが、あまりにやることが多くて、
何に苦労したのか忘れてしまいました。ｗ
まだ、若干バグっぽいのがありそうなんですが、
発見された方はこっそり教えていただければ幸いです。

あ、前回のgetChildByNameの記事で書いたローディングアニメーションは、
ここでつかってます。

異なるシーン間や、インスタンス間で連携をとるのには、
get系メソッドを使うか、initObjectを使う方法が良い。

というわけで、今回はinitObjectについて。

ようやく、正しい？使い方がわかったのでメモ。

［渡す側］

//testSceneの作成
testScene:TestScene = new TestScene({a:A,b:B});

［受け取るTestScene.as側］

//コンストラクタ
public function TestScene( initObject:Object = null ) {
	super( initObject );
	propA = initObject.a;
	propB = initObject.b;
}

てな感じか。

今まで、使い方がよくわからず、コンストラクタに手を加えて、
TestScene( a:String, b:String, initObject:Object = null ) {
こんな風にしてたけど、これはスマートじゃない気がする。

【追記】
initObjectは、DoTweenerや、AddChildにもあった！
Progression　addCommand内でプロパティを操作する方法
ん〜奥が深い。。。

異なるシーン間や、インスタンス間で連携をとるのには、
get系メソッドを使うか、initObjectを使う方法が良い。

get系メソッドについて、以前、
[Progression] 他シーンへのアクセス
という記事を書いたけど、Is It So Easy?さんの、
Progressionのget～系メソッドいろいろ
という記事がとても勉強になる。
リファレンス的にちょいちょい利用させていただいています！
自分の記事が稚拙なことｗ

全部使ったことはないですが、
使ってみて、やっぱり〜ByGroup系は非常に強力だと思いました。

後は、idを付けての〜ById系。これもよく使う。

それと、indexに共通プロパティを持たせて、
他から参照するような場合、こんな使い方をしたりもできます。

var i:Progression = getProgressionById("index");
trace(i.root["hogehoge"]);

ひとつ疑問なのは、〜ByGroup系って便利なんだけど、
Groupに登録したInstanceなどをコンテナから削除した時に、空のInstanceが残ってしまっているようです。
このGroupをリセットすることはできないのかな。。。
なんかやりかた間違ってるのだろうか。。。

Progressionを使いこなす上で、SerialListとParallelListを駆使することが、キモのひとつだと思う。
（もう一つのキモは、異なるシーン間での連携じゃないかと・・・）
ようやく、少し使い方が理解できたのでまとめておく。

例えば、複数のインスタンスを配列に入れておき、
それらの数だけ制御するコマンドをリストに追加するような場合、
以下のような記述で処理する順番が変わる。
（instanceArray.length = 3 だとして）

var sList:SerialList = new SerialList();
for (var i=0; i<instanceArray.length; i++) {
  var s:SerialList = new SerialList ( null,
  new Trace("あああああ"),
  new Wait(1000),
  new Trace("いいいいい")
  );
  sList:insertCommand(s);
}
addCommand(
  new Trace("［コマンドスタート］"),
  new Func(
	function():void{insertCommand(sList);}
  ),
  new Trace("［コマンド終了］")
}

これを実行すると

［コマンドスタート］
あああああ
（1秒待って）
いいいいい
あああああ
（1秒待って）
いいいいい
あああああ
（1秒待って）
いいいいい
［コマンド終了］

となる。

次に実行するリストだけをParallelListに変えると、

var pList:ParallelList = new ParallelList();
for (var i=0; i<instanceArray.length; i++) {
  var s:SerialList = new SerialList ( null,
  new Trace("あああああ"),
  new Wait(1000),
  new Trace("いいいいい")
  );
  pList:insertCommand(s);
}
addCommand(
  new Trace("［コマンドスタート］"),
  new Func(
	function():void{insertCommand(pList);}
  ),
  new Trace("［コマンド終了］")
}

［コマンドスタート］
あああああ
あああああ
あああああ
（1秒待って）
いいいいい
いいいいい
いいいいい
［コマンド終了］

となる。

全部ParallelListにすると、

var pList:ParallelList = new ParallelList();
for (var i=0; i<instanceArray.length; i++) {
  var p:ParallelList = new ParallelList ( null,
  new Trace("あああああ"),
  new Wait(1000),
  new Trace("いいいいい")
  );
  pList:insertCommand(p);
}
addCommand(
  new Trace("［コマンドスタート］"),
  new Func(
	function():void{insertCommand(pList);}
  ),
  new Trace("［コマンド終了］")
}

［コマンドスタート］
あああああ（1秒待って）※同時に処理されてる？
いいいいい
あああああ
いいいいい
あああああ
いいいいい
［コマンド終了］

とまぁ、こんな感じ。
2番目の「Wait(1000)」も、もしかしたら同時に処理されてるのかもしれないが、
Traceの結果が違うのが興味深い。

insertCommnad()を、
new Func()を使わずそのまま記述すると、
addCommand()内の順番に関係なく最初に実行されて、
その後の処理はしっかり同期される模様。
しかし、記述的には理解不能なので、間違った使い方かもしれない。

ちなみに、その際、
insertCommandで追加するのではなく、
pList.execute();などとすると、
同期せずに実行する。そういうもんなの？ｗ

insertCommand()の代わりにaddCommand()使ってみたりとか、
他にもいくつか発見はあったけど、
まだ整理しきれてないので、この辺にしときます。
もっと深い使い方があるような気がしますが、
上記の仕組みを理解していれば大抵のことは処理できるんじゃないでしょうか。

ん〜・・・奥深い。

【追記：2009.6.25】
flabakaさんのこの記事「Progressionのコマンド処理あれこれ」もわかりやすい！
addCommandとinsertCommandの違いがわかりました。