‘Progression’ タグのついている投稿

大阪ひよこの会でやった内容を少し

2011 年 3 月 7 日 月曜日 正宗

Flashの今さら人に聞けない初歩的な何かをみんなで勉強する大阪ひよこの会。
その第三回「シーン遷移とは?」を開催しました。

シーン遷移と言えばFlashの画面展開として最も重要な部分。
FlashサイトからFlashゲーム、Flashアニメに至るまで、必ずといっていいほど考えなくてはいけない部分です。
必ずぶち当たる問題なのに、ほとんど直接作品とは関係ない部分でもありますし、かといってこれまた必ず制作の途中段階で変更を余儀なくされる部分でもあります。
なので本来の作品性に関係ない部分を出来る限り省力化をしながら作らないといけないし、かといって出来る限り柔軟に作っておかないと作品の作り込みに影響するという、ほぼ全てのFlasherのジレンマとして君臨し続けているのではないでしょうか(言い過ぎか)。

そんなシーンに対する、僕たちひよこたちの方法とは?
僕はProgressionのシーン遷移の部分に焦点を当てて(本来僕はProgressionの目玉を大きく三つにわけて、シーン遷移、キャスト、コマンドとしています。今回はそのシーン遷移の部分)、技術的なお話はおいておいて「何故Progressionを使うのか」についてお話しさせて頂きました。
ほとんど資料無しのお粗末な内容ですが、皆様ご静聴ありがとうございました!
「本やネットにある情報だけど、あえて口頭で説明した方がわかりやすいな」みたいな内容も交えてたので、ブログに残せるほど有意義な情報はありませんでしたが、一旦レポートしておきたいと思います。
(続きを読む...)

SWC+Progressionで快適コーディング生活はじまる!

2010 年 10 月 21 日 木曜日 正宗
中段あたりにチェックボックスがあるよ

中段あたりにチェックボックスがあるよ

いきなりですがswcファイルって「スウィック」って読むらしいですね。アドビの中の人もそう読んでたんで確かな情報です。
しかしながら僕は慣れなくていつも「エスダブルシー」って読んでしまうんですね。そこらへんのモサさが自分流さ、なんて無頼を決め込んで今日も「エスダブルシーエスダブルシー」と 読んでいます。
僕が「エスダブルシー」って言う度に周りが若干イラっとした顔されるんですが、それでもかわまず「エスダブ…エスダボースィー」とか呼び続けてるのに未だ怒られた事がないのは 、ひとえに僕の人徳だと思います。

無駄な軽口はこのくらいにして、先日行われたひよこの会で少しだけ要望があったのでSWCと連携してProgressionでのFlashサイト開発環境を超快適にする方法をご紹介したいと思います。
今までのやり方にもよりますが、体感100倍速いと言っても全くおおげさでないくらい、爆速開発が可能になりますよ!
(続きを読む...)

Progression 4 Flashフレームワーク入門ノート発売!

2010 年 7 月 19 日 月曜日 正宗

著者である大重美幸様より、2010/7/17に発売したばかりの「詳細!Progression 4 Flashフレームワーク入門ノート」(クリック先はアマゾンで買う)を献本いただきました!

俗に言う「大重本」 この写真はクリックするとアマゾンへ

俗に言う「大重本」この写真はクリックするとアマゾンへ

著者である大重様、発送いただいたソーテック社様、この場をお借りしてお礼申し上げます。

献本していただくなんていう体験、僕自身の人生の中でそうあることでもないのでものすごくうれしいです。ましてやAS3を覚えるときに相当お世話になった大重さんからとなっては、これはもう本気でレビューするしかありません!!
僕も業務フレームワークとしてProgressionをがっつり使っている人間の一人として、また実際に自分が入門の時にどこでつまづいたのかとかも思い出しながら、かなり突っ込んでレビューしたいと思います!
考えてみれば本のレビューなんてそんなにやったことがなくて、もしかしたらかなりとんちんかんなことになるかもしれませんが、少しでも皆さんのほんの購入時の参考になればと思います。がんばります。

(続きを読む...)

Progression4をいい感じにFlashBuilderで作業できるようにする

2010 年 7 月 8 日 木曜日 正宗

FlashBuilderはじめてみました。正宗です。

Progression4がFlashBuilderとの連携ができるようになっていたのがきっかけだったのと、あとFlashのコンパイル(パブリッシュ)がその都度グラフィックを書き出し直すので時間がかかるようになったのが嫌でグラフィックはあらかじめswc書き出ししておいてFlashBuilderからasだけをコンパイルできるようになったらいいなと思ったので、FlashBuilderを使いこなせるように勉強してみることにしました。

常々お伝えしているように、うちのFlash請負制作業務のほぼ100%をProgressionフレームワークを使用していますので、ProgressionとFlashBuilderがうまいこと連携できていないと困ります。いろいろ試してみてうまい感じに連携できるようになったので書いておきたいと思います。

あとFlashBuilderについての本や情報が多いですがだいたいがFlex技術者向けになっていて、MXMLとか僕もよくわからないのですが僕のやりたいFlash開発とは微妙に違う気がするので、Flash向けにFlashBuilderの設定方法なんかの情報があっても良いなーと思っていたので、今回の記事はProgressionとあわせて是非ともマスターしたい技術だと思います。

(続きを読む...)

Progression4でコンポーネントスタイルとクラススタイルを行き来する

2010 年 5 月 20 日 木曜日 正宗

先日書きました、Progressionのコンポーネントとクラスを混在させるやり方の記事を、コンポーネントスタイルからの視点で書きました。いちおうProgressionのコンポーネントでの作成スタイルを一回でもやった方を対象に書いています。もしまだProgressionのコンポーネントスタイルを試されてない方は最初はそっちをやってみないと意味が分からないと思うし、このスタイルが何故必要なのかもわかりにくいかと思います。
それでも一般に誤解されているようにコンポーネントは初心者だけがやるものではなく、こういった工夫一つで非常に表現力の高いサイトを作ることもできるので、ぜひ参考にしてもらってみなさんのProgressonライフに役立てば幸いです。

(続きを読む...)

Progression4:SceneObjectでシーンの構造管理はしない

2010 年 5 月 15 日 土曜日 正宗

みなさんはもう手に入れましたか?ProgressionによるFlashコンテンツ開発ガイドブック
なんでも発売から二週間足らずで重版決定だそうで。おめでとうございます!

僕はと言うと、先週行われたProgression本を朗読する会に参加してきました。せっかく買った本なんだから読まなきゃね!
で、この朗読会、スーパー肩パッドさんとシナチクさんがTwitterで音頭をとって開催された企画でして、非常に面白くてためになりました。

まず14時から開始して19時半まで5時間半、ぶっとおしでProgression談義。その後居酒屋に移動して3時間またぶっとおしでFlash談義。
僕自身も大阪てら子でProgressionを勉強したのが2年前。出会って以来この2年間で覚えてるだけで15案件、実際には20案件以上は実践投入してきたほどハマりまくってるProgressionについて、ここまでディープに語り合える場と仲間がいなかったので(個人事業なので家内以外仕事のパートナーが居ないので孤独)ここまで時間を忘れて、ほぼ初対面の方々たちと語らいだのは生まれて初めての経験でした。

本当にいい刺激になりました。

で、いちおう自分がとってたノートもあるんだけど、皆さんの喋った内容がまとめきれていないので、せめて自分のネタだけでもまとめておこうと思ったわけです。

21日の僕の勉強会でもこれやります。
不思議なことに全く同じ記事を「クラススタイル向け」と「コンポーネント向け」で2回書きます。今回はその第一回目です。
第一回目は、「クラススタイル向け」に書いてみようと思います。

(続きを読む...)

5/21(金) Progressionお勉強会やります

2010 年 4 月 27 日 火曜日 正宗

Progressionお勉強会 UTWEB5/21にProgressionの勉強会をやります-!

詳しい内容はこちらのリンクを参照して下さい。

以前も何度かProgressionのコンポーネントとクラスの話題はこのブログでもやってきていますが、いろいろと情報も古くなってきてたり微妙に間違えているところがあったりしてたので、Progression4も正式公開したことだしここいらへんで情報共有の良い機会ではないかと思ったわけです。

(続きを読む...)

Progression3でクラススタイルにコンポーネントを連携させる(1/3)

2009 年 12 月 2 日 水曜日 正宗

世間はProgression4の話題でもちきりですが、いまだProgression3の話題を書こうとしている流行にうとい男、正宗です。
以前紹介した「Progressionでコンポーネントスタイルにクラスを連携させる」の続きです。
今回から進めて全3回の予定でやってみます。

以前紹介したやり方は「まずコンポーネントスタイルで作ってみて、ちょっとずつクラスを混ぜ込んでみよう」というものでしたが、今回からは「いかにスクリプトを書かずにすむようにスクリプトを書くか」です。

一見、矛盾してそうなコンセプトですが、前回よりも研究結果がだいぶ洗練されてきたので、スクリプトアレルギーの方も、よりコピペだけでまともに動かせるようにはなっていったかなと思います(^^;
(続きを読む...)

Progressionでコンポーネントスタイルにクラスを連携させる

2009 年 5 月 25 日 月曜日 正宗

こんにちは。最近引っ越しましたが取引先にまだ挨拶を済ませていない正宗です。前回に引き続きProgressionの話題をしたいと思います。

Progressionではスクリプトを一切使わない「コンポーネントスタイル」やタイムラインスクリプト派の「タイムラインスタイル」、クラスでわしわし書きたい人向けの「クラススタイル」など制作者のスタイルにあわせたとても柔軟な開発スタイルが用意されていますが、今回はその中でも「コンポーネントスタイル」と「クラススタイル」を連携させた開発手法についてまとめてみました。

(続きを読む...)

ProgressionのCommandが良い感じ

2009 年 5 月 21 日 木曜日 正宗

こんにちは。
正宗です。
今日はProgressionのCommandのお話をしたいと思います。
毎度ながら僕個人の備忘録となっているので、誰も役に立たない情報ですが僕が便利だと感じるならそれでいいんです。

Flashサイト制作の上でもはや手放せないフレームワーク、その名も「Progression
Scene管理も秀逸ですが僕がProgressionを使ってて何よりも惚れ惚れするのがCommandがよく練られていてとっても使いやすいところなのです。
「こういうこともCommandで出来ないかな?」とリファレンスを読み読みしてると必ず上手いやり方が用意されていて、どんどん使っていくうちにいわゆる「Progression的な」コードの書き方に身が染まっていって毎日新しい発見があってコードを書くのがとても楽しいです。
(もちろん、Progression的な書き方を強制されるわけでは無くって、我流の書き方も完全に許容されているところもこのフレームワークを好きな理由の一つです)
ということで、今まで勉強してきたCommandの使い方の途中段階までをまとめておきたいと思います。

基本のキホン

まずCommandがどこで実行されるかですが、一番簡単なのは
SceneObjectでしたら_onLoad、_onInit、_onGoto、_onUnloadの関数の中に直接addCommandしておく方法。
CastSpriteやCastMovieClipなどは_onCastAddedや_onCastRemovedなんかに直接addCommandしておきます。
このへんのシーン管理やイベント管理もとっても面白いんでいろいろとまとめたいところなんですが、今日のまとめはあくまでCommandだけにとどめておきたいと思います。

SerialListとParallelList

  • SerialListは順番にコマンドを実行する
  • ParallelListは一度に同時にコマンドを実行する
  • SerialListに配列としてコマンドをaddCommandすればその配列内のコマンドはParallelListとして実行される
  • 逆にParallelListに配列としてコマンドをaddCommandすればその配列内のコマンドはSerialListとして実行される
  • _onInitなんかの関数の中は最初はSerialList

こんなところでしょうか。
使い方はこんな感じ。

 
private function test():void {
	var list:SerialList = new SerialList();
	list.addCommand(
		new LoadURL(new URLRequest("hoge.xml")),//XMLの読み込みを開始
		function():void {
			trace(new XML(this.latestData));//読み込んだXMLを出力
		},
		[
			new DoTweener(front, { alpha:0, time:1 } ),//前面のMCを1秒かけて透明に
			new DoTweener(back, { alpha:1, time:1 } )//背面のMCも同時に1秒かけて不透明に
		]
	);
	list.execute();//SerialListを実行
}
 

最初にSerialListで実行させているので、XMLの読み込みを待って完了したら自動的に次の処理に移ります。
その後配列で登録してあるのでクロスフェードの処理はParallelListとして同時に実行されることになります。
そうめんもそうなんですが、もうaddEventListenerだらけで「えっと、ここが完了したら次こうなって…」と悩まされなくて済むようになりました。

外部swfのクラスを使いたい

こんだけイケてるCommandなのですから、シーンの読み込みの際に外部swfを取得してそこからクラスを参照するやり方も何か用意されているのではないかと思って調べてたら、やっぱりありました。
LoadObjectといって、CastLoaderを監視するコマンドがありました。
さすがtaka:nium先生!もう俺は一生Progressionについていくぜー!

 
package
{
	import flash.display.Sprite;
	import jp.progression.casts.*;
	import jp.progression.commands.*;
	import jp.progression.commands.display.LoadObject;
	import jp.progression.events.*;
	import jp.progression.loader.*;
	import jp.progression.*;
	import jp.progression.scenes.*;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import flash.system.ApplicationDomain;
	public class Test extends CastSprite
	{
		private var _loader:CastLoader;
		private var _context:LoaderContext;
		public function Test( initObject:Object = null )
		{
			super( initObject );
			_loader = new CastLoader();
			_context = new LoaderContext();
			_context.applicationDomain = ApplicationDomain.currentDomain;
		}
		protected override function _onCastAdded():void
		{
			addCommand(
				new DoTweener(this, { alpha:0 } ),
				new LoadObject(_loader, new URLRequest("hoge.swf"), {
					context:_context,
					onCastLoadComplete:function():void {
						var myDomain:ApplicationDomain = _loader.contentLoaderInfo.applicationDomain;
						var myClass:Class = _myDomain.getDefinition("onigiri") as Class;
						var mc:Sprite = new myClass();
						addChild(mc);
					}
				}),
				new DoTweener(this, { alpha:1, time:1 } )
			);
		}
	}
}
 

実際にはLoadObjectのonCastLoadCompleteに登録しなくっても、そのままシリアルリストに次の処理を書いていってもよさげ。

だけどここで少しばかり問題が。
上に挙げたサンプルはCastなにがしで処理を行っているので問題ないんだけれど、SceneObjectでこれをやろうとするとCommandの参照の問題が出てくるような気がする。

例えばある特定のScene以下からは"hoge.swf"を読み込んでその階層以下からのSceneでは"hoge.swf"を使い回したい場合

 
package
{
	import jp.progression.casts.*;
	import jp.progression.commands.*;
	import jp.progression.events.*;
	import jp.progression.loader.*;
	import jp.progression.*;
	import jp.progression.scenes.*;
	import jp.progression.commands.display.LoadObject;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import flash.system.ApplicationDomain;
	import HogePage;
 
	public class HogeScene extends SceneObject
	{
		private var _page:HogePage;
		private var _singleton:Singleton;
		private var _loader:CastLoader;
		private var _context:LoaderContext;
 
		public function HogeScene( name:String = null, initObject:Object = null ) {
			super( name, initObject );
 
			title = "hogehogeシーン";
 
			_loader = new CastLoader();
			_context = new LoaderContext();
			_context.applicationDomain = ApplicationDomain.currentDomain;
 
		}
 
		private function init():void {
			var myDomain:ApplicationDomain = _loader.contentLoaderInfo.applicationDomain;
			_page = new HogePage(myDomain);
 
			removeAllScenes();
			var fugaHelp:DressHelpScene = new fugaHelpScene(myDomain);
			fugaHelp.name = "help";
			addScene(fugaHelp);
		}
 
		protected override function _onLoad():void
		{
			addCommand(
				new LoadObject(_loader, new URLRequest("dressshop.swf"), {
					context:_context
				}),
				init,
				new AddChild(progression.container, _page)
			);
		}
 
		protected override function _onInit():void
		{
			addCommand(
			);
		}
 
		protected override function _onGoto():void
		{
			addCommand(
			);
		}
 
		protected override function _onUnload():void
		{
			addCommand(
				new RemoveChild(progression.container, _page),
				function():void {
					_loader.unload();
				}
			);
		}
	}
}
 

こんなふうに書くと動かなくなる。
何故これがだめなのかは

 
package
{
	import jp.progression.casts.*;
	import jp.progression.commands.*;
	import jp.progression.events.*;
	import jp.progression.loader.*;
	import jp.progression.*;
	import jp.progression.scenes.*;
	import jp.progression.commands.display.LoadObject;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import flash.system.ApplicationDomain;
	import HogePage;
 
	public class HogeScene extends SceneObject
	{
		private var _page:HogePage;
		private var _singleton:Singleton;
		private var _loader:CastLoader;
		private var _context:LoaderContext;
 
		public function HogeScene( name:String = null, initObject:Object = null ) {
			super( name, initObject );
 
			title = "hogehogeシーン";
 
			_loader = new CastLoader();
			_context = new LoaderContext();
			_context.applicationDomain = ApplicationDomain.currentDomain;
 
		}
 
		private function init():void {
			var myDomain:ApplicationDomain = _loader.contentLoaderInfo.applicationDomain;
			_page = new HogePage(myDomain);
 
			removeAllScenes();
			var fugaHelp:DressHelpScene = new fugaHelpScene(myDomain);
			fugaHelp.name = "help";
			addScene(fugaHelp);
 
			trace(this, _page);
		}
 
		protected override function _onLoad():void
		{
			addCommand(
				new LoadObject(_loader, new URLRequest("dressshop.swf"), {
					context:_context
				}),
				init,
				new Trace(this),
				new Trace(_page),
				new AddChild(progression.container, _page)
			);
		}
 
		protected override function _onInit():void
		{
			addCommand(
			);
		}
 
		protected override function _onGoto():void
		{
			addCommand(
			);
		}
 
		protected override function _onUnload():void
		{
			addCommand(
				new RemoveChild(progression.container, _page),
				function():void {
					_loader.unload();
				}
			);
		}
	}
}
 

こう書いてみるとなんとなくわかるんだけれど、じゃあどうすればいいかというと僕はこうしました。

 
package
{
	import jp.progression.casts.*;
	import jp.progression.commands.*;
	import jp.progression.events.*;
	import jp.progression.loader.*;
	import jp.progression.*;
	import jp.progression.scenes.*;
	import jp.progression.commands.display.LoadObject;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import flash.system.ApplicationDomain;
	import HogePage;
 
	public class HogeScene extends SceneObject
	{
		private var _page:HogePage;
		private var _singleton:Singleton;
		private var _loader:CastLoader;
		private var _context:LoaderContext;
 
		public function HogeScene( name:String = null, initObject:Object = null ) {
			super( name, initObject );
 
			title = "hogehogeシーン";
 
			_loader = new CastLoader();
			_context = new LoaderContext();
			_context.applicationDomain = ApplicationDomain.currentDomain;
 
			_page = new HogePage(myDomain);
		}
 
		private function init():void {
			var myDomain:ApplicationDomain = _loader.contentLoaderInfo.applicationDomain;
			//_page = new HogePage(myDomain);
			_page.myDomain;
 
			removeAllScenes();
			var fugaHelp:DressHelpScene = new fugaHelpScene(myDomain);
			fugaHelp.name = "help";
			addScene(fugaHelp);
 
			trace(this, _page);
		}
 
		protected override function _onLoad():void
		{
			addCommand(
				new LoadObject(_loader, new URLRequest("dressshop.swf"), {
					context:_context
				}),
				init,
				new Trace(this),
				new Trace(_page),
				new AddChild(progression.container, _page)
			);
		}
 
		protected override function _onInit():void
		{
			addCommand(
			);
		}
 
		protected override function _onGoto():void
		{
			addCommand(
			);
		}
 
		protected override function _onUnload():void
		{
			addCommand(
				new RemoveChild(progression.container, _page),
				function():void {
					_loader.unload();
				}
			);
		}
	}
	public class HogePage extends CastSprite
	{
		private var _myDomain:ApplicationDomain;
		public function set myDomain(value:ApplicationDomain):void
		{
			_myDomain = value;
		}
	}
}
 

他にもどうしても_onLoadのときに動的にクラスを生成しなければならなかったりした場合はもうちょっと違う書き方をするんだけど、僕の書いたどれもが根本的にCommandで処理できる流れになってなくて、ものすごい気持ち悪いです。
ひとえに僕がCommand内のthisの参照をよくわかっていないからだとは思いますが、もうちょっとCmmandだけで完結できる方法を勉強してみたいと思います。
目指せ!ProgressionのCommandマスター!