海賊王をめざす男 マツです。こんにちは。

高校野球も終わり、暑い夏も残りわずか。今年も熱闘甲子園！でした。チームプレーって大切ですよね。

Flex と Flash で開発するとき、また複数（チーム）で開発するとき作業の分業や効率化をする手法のひとつにモジュールを使用します。

メインからモジュールをロードするサンプル

モジュール

Flex Builder のモジュール新規作成は、[ファイル]_[新規]_[MXML モジュール]です。
私は、あえてモジュールを選択しません。[ファイル]_[新規]_[MXML アプリケーション]を選択してます。

MyModule.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="300">
	<mx:VBox width="100%" height="100%" backgroundColor="#aaaaaa" horizontalAlign="center" verticalAlign="middle">
		<mx:Label text="Test" />
	</mx:VBox>
</mx:Application>

それは、モジュールは、単独で実行しても何も表示されないからです。
そこで、アプリケーション（仮）で開発して最終的にモジュールにします。途中経過をモジュール単位で確認しながら開発してます。

モジュール化

十分に開発を行ったら、アプリケーション（仮）をモジュールにします。

mx:Application
↓
mx:Module

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="300">
	<mx:VBox width="100%" height="100%" backgroundColor="#aaaaaa" horizontalAlign="center" verticalAlign="middle">
		<mx:Label text="Test" />
	</mx:VBox>
</mx:Module>

Flex Builder 上のこのファイルのアイコンは、アプリケーションのままですが、モジュールとして扱われる様です。

シェル

モジュールをロードするシェル。

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#ffffff">
	<mx:Script>
		<![CDATA[
			public function createModule(moduleLoader:ModuleLoader, urlStr:String):void
			{
				if (!moduleLoader.url) {
					moduleLoader.url = urlStr;
					return;
				}
				moduleLoader.loadModule();
			}
			public function removeModule(moduleLoader:ModuleLoader):void
			{
				moduleLoader.unloadModule();
			}
		]]>
	</mx:Script>
	<mx:ModuleLoader id="myModuleLoader"/>
	<mx:HBox>
		<mx:Button id="loadButton" label="load" click="createModule(myModuleLoader, 'MyModule.swf');"/>
		<mx:Button id="unloadButton" label="unload" click="removeModule(myModuleLoader);"/>
	</mx:HBox>
</mx:Application>

これで、シェルからモジュールをロードすることが可能です。

ルールが決まっていれば後は、シーンや機能ごとに担当を決めてモジュール単位で制作をします。
全体的なレイアウト構造や機能的なコンポーネントをつくるひとやアニメーションが得意なひと、パーティクルやエフェクトが得意なひと、これらの人たちの能力をなるべく生かした開発が可能です。

actionScriptProperties

プロジェクト ディレクトリの直下に .actionScriptProperties があります。このファイルを編集することで、アプリケーションやモジュールの構成を指定できます。

モジュール部

<modules>
<module application="src/main.mxml" destPath="MyModule.swf" optimize="true" sourcePath="src/MyModule.mxml"/>
</modules>

アプリケーション部

<applications>
<application path="main.mxml"/>
<application path="MyModule.mxml"/>
</applications>

ここはモジュールも全部アプリケーションを指定してます。

Flex Builder 上のこのファイルのアイコンは、アプリケーションのままですが、ソースを mx:Application, mx:Module と切替えればちゃんとモジュールとして扱われてるみたいです。