Progression4でHTMLのデータを読み込む

| コメント(2) | トラックバック(0)

時の経つのは早いものでProgression4のベータ版が世に出て2ヵ月になろうとしています。

様々な新機能がありますが、いかんせんドキュメントがASDocのみと(それだけでも凄い事なのですが)いう事もあり、意外と話題になっていないProgression4の凄い機能を紹介したいと思います。

Progression4のWebConfigで作成した場合、swfファイルをパブリッシュした際に以下メッセージが出力される事に気づかれる方も多いかと思います。
prog4html_1.jpg

Progression4ではWebConfigの第3引数、useHTMLInjectorをtrueにする事により(デフォルトでtrueになっています)HTMLファイルを読みにいきます。

簡単なサンプルを作成しましたのでまずはご覧下さい。

http://www.northprint.net/progression_test/HtmlData/

このサンプルをJavaScriptをOFFにしたブラウザで見てくださると分かるのですが、Progression側に読み込ませるデータをHTMLの方で設定しています。

さて、方法なのですが、まずHTMLの方です。(Index.html)
Progression4で書き出されたHTMLにも記述されています。id="htmlcontent"のブロック内に記述します。
※注意:シンタックスハイライターのせいでimgタグが閉じられていませんが、実際はきちんと閉じてください。

HtmlDataTest

このサイトについて

クマンバチ

Progression4ではHTMLの内容を取得する事が出来ます。

トンボ

非常に画期的な機能です。とりわけ、SEO対策に効果があります。

カマキリ

HTML側をルールに沿って作りこめば、JavaScriptOFF時にも同内容のコンテンツを見せる事が可能です。

以下、スクリプト側です。(ImageSceneクラス)

//HTMLデータ参照
if (WebDataHolder(dataHolder).html.toXMLString()) {
	//xml形式に変換
	var contentXml:XML = XML(WebDataHolder(dataHolder).html);
	//pタグの値は配列としてアクセス可能
	trace(contentXml.p[1]);
	_dispText.text = contentXml.p[1];
	//imgタグがあれば
	if (contentXml..img.length()!=0){
		addCommand(
			//画像をロードしBitmapDataとして取得します
			new LoadBitmapData(new URLRequest(contentXml..img[0].@src)),
			function():void {
				//ロードした画像を取得し、表示します
				_imageContainer.bitmapData = BitmapData(getResourceById(contentXml..img[0].@src).toBitmapData());
			}
		);
	}
}


プロジェクト生成時に設定したドキュメントクラスと同名のHTMLファイルを読みにいきます。
htmlcontentブロック内に、シーンパスと同じidのブロックを設定する事で当該シーンの際にシーンオブジェクトのdataHolderより取得出来ます。
そのままではデータとして認識出来ないので
WebDataHolder(dataHolder).htmlと、WebDataHolderクラスを使用してあげます。

詳しくはサンプルソースコードをじっくりご覧になって下さい。

さすがにHTMLからシーンを作成する(やれば出来る様な気もしますが)などという荒業は出来ないものの、xmlやjsonからデータを取得するのとほぼ同様にデータの取得が可能です。

サンプルプロジェクト一式はこちらからダウンロードして下さい。

この機能はProgression4のなかでも結構目玉となる機能なんじゃないかと思います。特に、デプロイしない状態でもFlashのプレビューで表示可能という点が凄い。凄すぎる。ばんざーい。

という事で、みなさんフォーラムもどんどん活用して下さいね。それではー。

トラックバック(0)

トラックバックURL: http://www.northprint.net/mt5/mt-tb.cgi/150

コメント(2)

とても参考になりました。
なんて素晴らしい機能なのでしょう!すごいです。
最近Progressionで似たようなフォトスライドを制作したばかりだったので、
この方法で制作すればよかったです。
次回、挑戦してみようと思います。

littlepadさま>
すごい機能ですよね!
私ももっと使いこなせるようがんばろうと思います。

コメントする

このブログ記事について

このページは、northprintが2009年11月 8日 21:18に書いたブログ記事です。

ひとつ前のブログ記事は「Flash制作に欠かせない3つのツール:便乗しました」です。

次のブログ記事は「Progression4 beta1.3の驚異的進化」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。