5ive.blog

以前の記事でPRMLLoaderを使ってシーンを生成した後にmanagerを参照するにはちょっとしたコツがあったんだけど、正式リリースされたProgression4ではそこが改善されてる！ということで、正しいPRMLLoaderの使い方をメモ。

Index.as

public function Index() {
	// 自動的に作成される Progression インスタンスの初期設定を行います。
	// 生成されたインスタンスにアクセスする場合には manager プロパティを参照してください。
	super( null, null, new WebConfig() );
}

まずはIndexクラスのコンストラクタで第1引数と第2引数をnullにする。これは前回と同じ作法。

override protected function atReady():void {
	pl= new PRMLLoader(this);
	pl.addEventListener(Event.COMPLETE, onPRMLComplete);
	pl.load(new URLRequest("xml/prml.xml"));
}

次にatReady関数内でPRMLLoaderをインスタンス化する。今までは第1引数にstageを参照する仕様になってたんだけど、Progression4（正式版）からはDisplayObjectContainerクラスに型が変更されたみたい。ここをthis参照にすることで本来のmanagerに引き継げるようになる。

private function onPRMLComplete( e:Event ):void {
	// 開発者用に Progression の動作状況を出力します。
	//Debugger.addTarget( manager );

	pl.removeEventListener(Event.COMPLETE, onPRMLComplete);
	pl= null;

	// 外部同期機能を有効化します。
	manager.sync = true;

	// 最初のシーンに移動します。
	manager.goto(manager.syncedSceneId);
}

prml.xmlを読み込んだ後は、どこからでもmanager経由でシーンを参照出来るようになってすごい便利になったよ。

※Progression4（正式版）でPRMLLoaderの仕様が一部変更されました。下記の方法よりも、よりスマートに実装出来るようになってるのでこちらを参考にして下さい。

Progression4では仕様変更により今までのお作法が通用しない部分が結構あって、PRMLLoaderもその一つ。最近はPRMLからシーン構成を生成するので解決法をずっと探ってたんだけど、ようやく動作したのでメモ。同じとこで詰まってる人がいたら参考にしてみて下さい。

ポイントは以下の3つ。
1、PRML内で設定するシーンクラスをあらかじめ宣言しておく（25～26行目）
　→　宣言してないとエラーが出る。

2、親クラスを呼び出すときに第1、第2引数をnullにしておく（34行目）
　→　通常はsuper(“index”, IndexScene, new WebConfig());となるが、PRMLをつかってシーンを生成すると全部自動で設定してくれるため、ここで宣言したidとPRMLで自動宣言されるidが重複してしまいエラーが出る。

3、PRMLLoaderクラス内のmanagerを使う（45～56行目）
　→　ここが一番の鬼門。PRMLLoaderを使ってシーン構造を生成した場合はPRMLLoader.managerに展開される。なので「外部同期機能」や「最初のシーンに移動」とかを下記のようにしてしまうと別管理のmanagerとして動作してエラーが出る。

manager.sync = true;
manager.goto(manager.syncedSceneId);

この3つのポイントをまとめると、ドキュメントクラスは以下のようになる。

Index.as

package {
	import jp.progression.casts.*;
	import jp.progression.commands.display.*;
	import jp.progression.commands.lists.*;
	import jp.progression.commands.net.*;
	import jp.progression.commands.tweens.*;
	import jp.progression.commands.*;
	import jp.progression.config.*;
	import jp.progression.data.*;
	import jp.progression.debug.*;
	import jp.progression.events.*;
	import jp.progression.scenes.*;

	import flash.events.Event;
	import flash.net.URLRequest;
	import jp.progression.loader.PRMLLoader;

	/**
	 * ...
	 * @author ...
	 */
	public class Index extends CastDocument {

		//PRMLで使うシーンクラスを宣言
		IndexScene;
		MyScene;

		/**
		 * 新しい Index インスタンスを作成します。
		 */
		public function Index() {
			// 自動的に作成される Progression インスタンスの初期設定を行います。
			// 生成されたインスタンスにアクセスする場合には manager プロパティを参照してください。
			super( null, null, new WebConfig() );
		}

		/**
		 * SWF ファイルの読み込みが完了し、stage 及び loaderInfo にアクセス可能になった場合に送出されます。
		 */
		protected override function atReady():void {

			var pl:PRMLLoader = new PRMLLoader(stage, new URLRequest("xml/prml.xml"));
			pl.addEventListener(Event.COMPLETE, function(e:Event):void
			{
				pl.removeEventListener(Event.COMPLETE, arguments.callee);

				// 開発者用に Progression の動作状況を出力します。
				Debugger.addTarget(pl.manager);

				// 外部同期機能を有効化します。
				pl.manager.sync = true;

				// 最初のシーンに移動します。
				pl.manager.goto(pl.manager.syncedSceneId);

				// prml.xmlの内容
				trace("prml="+pl.manager.root.toXMLString());
			});
		}
	}
}

prml.xml

Flashネタをエントリーするのは久々だなー。先日の福岡てら子で発表した内容ですが、WordPressからProgressionで使うPRMLというXMLを出力する方法。PRMLの詳しい説明は本家リファレンスを参照して下さい。これを使うことにより、WordPressからProgressionにダイレクトにシーンを生成出来るようになる。今回はWordPressのカテゴリーをシーンに見立てて出力しているので、親、子、孫、曾孫といった深い階層のシーン構造も簡単に作ることができる。下記のPHPをWPがインストールされているサーバーのテーマフォルダにアップします。次にWPのメニューからページを新規で追加して、タイトルに「prml」と入力し、右サイドバーの属性のテンプレートから「prml」を選択。この状態でページを公開すると、タイトルの下にパーマリンクが表示されるので、このURLにアクセスすると現在のカテゴリー構造を維持したままのPRMLが出力されるようになる。こんな感じ。

prml.php

<?php /*
Template Name: prml
*/ ?>
<?php
 header('Content-Type: text/xml; charset='.get_option('blog_charset'), true);

 //-----[PRMLのヘッダー生成]
 $title = get_option('blogname');
 $header .= '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>';
 $header .= '<prml version="2.0.0" type="text/prml">';
 $header .= '<scene name="index" cls="myproject.IndexScene" title="'.$title.'">';

 //-----[WPから全階層のカテゴリー取得]
 $str = wp_list_categories('orderby=id&echo=0&hide_empty=0&use_desc_for_title=0&title_li=');
 $str = strip_tags($str, '<li>');

 //-----[PRML形式に変換]
 $category = strip_tags($str, '');
 $category = str_replace(array("\r\n","\r","\n"), '', $category);
 $category = preg_replace('/\s+/', ' ', $category);
 $category = ltrim($category);
 $category = split(' ', $category);

 for($i=0; $i<count($category); $i++)
 {
 	$str = str_replace(">".$category[$i]."\n", $i.">", $str);
 }

 $str = preg_replace('/"(.*?)"/', '', $str);
 $str = str_replace('li', 'scene', $str);

 for($i=0; $i<count($category); $i++)
 {
 	$str = str_replace('class='.$i, 'name="'.$category[$i].'" cls="myproject.'.ucfirst($category[$i]).'Scene" title="'.$title." | ".$category[$i].'"', $str);
 }

 //-----[PRMLとして出力]
 echo $header.$str.'</scene></prml>';
?>

このPHPでやっていることはwp_list_categories()で取得したリストタグ付きカテゴリーを力技でPRML形式のXMLに変換してるだけ。ソースを見てもらえば苦笑いできると思います。ｗ

ここではシーン構造のみをPRMLとして出力してるけど、Progressionの各ページ内にWPから画像を読み込んだり、テキストを流し込む場合は個別にXMLを作ったほうが管理しやすいと思う。その場合は以前エントリーしたこの記事が役立つと思います。

今回参考にさせて頂いたのはMotuLogさんのエントリー。ありがとうございます！またflabakaさんは自分とは違ったアプローチでWordPressやMovableTypeとProgressionを連携させる方法をエントリーされてます。

■参考サイト
・MotuLogさん　Progression(3.1.52) 動的にシーンを作成する
・flabakaさん　ProgressionとWordPressの連携

Progressionでサイトを作る時に、直リンク（ディープリンク）でFlash内のページに直接アクセスされると意図しない状態になることがよくある。トップページから順番に各ページを移動されるのはもちろん問題ないのだけど、いきなり途中のページにアクセスされるとシーンがまだ生成されていなかったり、nullエラーがでたり。作り方が悪いんだろうけども。

Progression側でユーザーが最初にアクセスしたシーンがどこなのかを調べる方法。

var prog:Progression = getProgressionById("index");
var sceneId:String = prog.firstSceneId.toString();
trace(sceneId);

トップページにアクセスされた場合は

/index

アバウトページにアクセスされた場合は

/index/about

みたいなURLの形で取得できるので、ユーザーがどのページから入ってきたのか調べられますよ。

ちなみにProgression側で今どのシーンにいるかを取得するにはcurrentプロパティを使う。

var prog:Progression = getProgressionById("index");
trace(prog.current);

トップページにいる場合は

[IndexScene sceneId="/index" id="index" name="index" group="null"]

アバウトページにいる場合は

[AboutScene sceneId="/index/about" id="about" name="about" group="null"]

と、こんな感じ。

Progressionを使い始めました。Tweenerでモーション作る時によく使う方法で、動かす直前にプロパティを操作するにはaddCommand内でPropコマンドを使う。以下のように書けばmcのx座標を100に移動してからアニメーションを開始できる。

addCommand(
	new Prop(mc, { x:100 } ),
	new DoTweener(mc, { x:0, time:1, transition:"easeOutExpo" } )
);

11/3（月）神戸に乗り込むことにしました。福岡からはるばる参加です。なぜか神戸の回だけぽっかりと空いてるみたいね。中・四国、九州の皆さま、狙い目ですよ。参加される方々、当日よろしくお願いします。