FDT4でASDocをサクっと書き出せる、プロジェクトテンプレートを作成しました。

※追記2010.11.04 sparkにコミットしました。アップデートなど今後こちらにしていきます。
http://www.libspark.org/wiki/FDT4_ASDocProjectTemplate

[ 確認環境 MacOS 10.6.4 / FDT4 ]

使用方法

1. (macの場合)　ダウンロード後、解凍したフォルダを下記ディレクトリに設置。
/User/FDT/projectTemplates/Web/
※追記　FDT4スタンドアロンでインストールした場合は下記のフォルダになっています。(thx Alan)
User / Library / Application Support / FDT / projectTemplates

2. FDTを起動して　File ＞ New ＞ New Flash Project を選択し、出てきたウィンドウで「AsDoc Build」を選択。

3. 出来たプロジェクト内のsrcフォルダに、ASDoc化したいクラス群をコピー。

4. ant/asdoc_build.xmlを開き、6行目あたりで、flex sdkのパスを設定。

5. Window ＞ Show View ＞ Ant で Antウィンドウを開き、asdoc_build.xmlをドラッグドロップしダブルクリック！

これでASDocが作成されました！。（・∀・）

※Asdoc作成の場合はJRE設定をしなくてもANT実行が出来ますね。（なぜかはよくわかりませんが）

よく使っている、AS3のFDTテンプレート10個です。

「importや宣言って結局書かなきゃいけないから使うのメンドイよね?」と思ったあなた!
QuickFixで処理すればザクザクっと瞬殺で実装できまっすよ。（・∀・）

[1] 簡易スプライト作成

「あれっ?表示されるはずのMCが表示されない!?」なんて時に、その中にサクっと作って確認したり。

1
2
3
4

${name} = addChild(new Sprite()) as Sprite;
${name}.graphics.beginFill(0xcc0000);
${name}.graphics.drawRect(0,0,100,100);
${name}.graphics.endFill();

[2] 簡易テキストフィールド作成

何かとよく使います。

1
2

var ${_tf}:TextField = addChild(new TextField( )) as TextField;
${_tf}.text = "${cursor}";

[3] 簡易グラデーションボックス作成

背景にサクっと敷いたりする時に。

1
2
3
4
5
6
7
8
9

var gradType:String = GradientType.LINEAR;
var gradColors:Array = [ ${0xffffff} , ${0x0} ];
var gradAlphas:Array = [ 1, 1 ];
var gradRadios:Array = [ 0, 255 ];
var gradMrx:Matrix = new Matrix( );
gradMrx.createGradientBox( ${800},  ${600} , Math.PI/2, 0,0);
var gradSpread:String = SpreadMethod.PAD;
${this}.graphics.beginGradientFill( gradType , gradColors ,  gradAlphas , gradRadios , gradMrx ,gradSpread);
${this}.graphics.drawRect( 0 , 0, ${800}, ${600} );

[4] 配列を作る(要素番号指定で)

ループで作成できない配列作る時ってメンドいですよね。
下記だと、name とvalueの値が一気に指定できて便利。とりあえず10個

1
2
3
4
5
6
7
8
9
10
11

var ${name} : Array= new Array();
${name}[0]=${value};
${name}[1]=${value};
${name}[2]=${value};
${name}[3]=${value};
${name}[4]=${value};
${name}[5]=${value};
${name}[6]=${value};
${name}[7]=${value};
${name}[8]=${value};
${name}[9]=${value};

[5] 簡易ローダー作成

LoaderContext(true)にしているので、wonderflなんか用にサクっと使っています

1
2
3

${loader}= new Loader();
${loader}.contentLoaderInfo.addEventListener(Event.COMPLETE, loadCompleteHandler);
${loader}.load(new URLRequest("${cursor}"), new LoaderContext(true));

[6] ラジアン、角度、変換公式

覚えろって話ですが（ ´д｀; )、いつも忘れるので。

1
2
3

//radian<->angle
//var rad = angle *(Math.PI/180)
//var angle = rad * 180 / Math.PI;

[7] FlashVersを列挙する

デバッグ時などに何かと使えます。

1
2
3
4

var vars:Object = loaderInfo.parameters;
for (var i:String in vars) {
    _txt.appendText(i + "=" + vars[i] + "\n");
}

[8] プレイヤーのバージョンとタイプをトレース。

同じくデバッグ時などに何かと使えます。

1
2
3
4

trace( "************************************" );
trace( "[Player Version] " + Capabilities.version );
trace( "[Player Type]    " + Capabilities.playerType );
trace( "************************************" );

[9] Loggerテンプレート

@cellfusioinが作成したLoggerクラスを使用するためのテンプレート。
sosMaxと組み合わせると強力なログ出力環境が整います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// @see http://github.com/cellfusion/Logger
Logger.initialize(Logger.LEVEL_FATAL);
//Logger.initialize(Logger.NONE);
 
Logger.trace(${cursor});
 
Logger.debug(${cursor});
 
Logger.info(${cursor});
 
Logger.warning(${cursor});
 
Logger.error(${cursor});
 
Logger.fatal(${cursor});

[10] コンパイルオプションで一部のコードを無視させる。

詳細はこちらの記事を御覧ください。
FDTでコンパイル時に一部のコードを無視させる

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 //-define=CONFIG::Debug,true
//-define+=CONFIG::Release,false
/*FDT_IGNORE*/
CONFIG::Debug
{
/*FDT_IGNORE*/
		trace( 'Debug' );
/*FDT_IGNORE*/
}
CONFIG::Release
{
/*FDT_IGNORE*/
		trace( 'Release' );
/*FDT_IGNORE*/
}
/*FDT_IGNORE*/

上記10個セットをダウンロード

動作確認環境 [FDT4 M3 / MacOS10.5]

2010.7.18 に東京てらこ6「SWF最適化・制作効率アップ術」で発表した内容です。

発表した内容

FDTでANTを使用し、操作一発で
1. swfコンパイル
2. FTPアップロード
3. Firefoxでリロード表示”する方法。
ついでにFirefoxで再生されたswfのトレースもFDT内で確認しちゃう。

サンプルデータ

利用方法

詳細はREADMEファイルを御覧ください。
また、このエントリを元に発表しましたのでご参考下さい。

そもそもANTを使用するメリット

自動化によるヒューマンエラーの防止。に尽きるかと思います。
ANTは設定するまでがちょっとメンドく、シンプルなプロジェクトであれば、作成するまでもないかもしれません。
が、少し複雑なプロジェクト構成なら設定する価値があります。

例えばカスタムクラスAを継承した、ドキュメントクラスB,C,D,Eがあったとして、Aを修正しB,C,D,Eから全てswfを書き出し直し、アップしなおし、クライアント確認に出す。等の場合。
これを使用することでミスが起こりにくくなります。
プロジェクトも後半になると、頻繁にこういった作業を行うかと思いますので、最初に作成しておくと、後々楽だったりします。

その他

元エントリにプラスアルファされている内容

<fdt.startDebugger>タスクを利用し、FireFoxで再生されたswfのトレースを、そのままFDTで確認出来るようにしています。

ANTの実行にショートカットを割り当てる!

僕の場合、環境設定 > General > Keysで”Run Last Launched External Toool”に「Command+Shift+Return」を割り当てています。
これにより操作一発で全てを実行できますし、ローカル確認、サーバー確認の切り替えが容易になります。

FDT Progressionプロジェクトテンプレートをバーションアップしました。
※FDT4 Millestone2以上で利用可

Ver2.5リリースノート

前バージョンからの主な変更点など。

ANTからindex.htmlを生成

ANTで下記パラメータを設定しindex.htmlを生成できます。

• titleタグ
• swf埋め込み時のサイズ
• 背景色
• GoogleAnalyticsのID
• 書き出しバージョン

ANTに設定必須だったProject名を設定不要に

具体的にはANTのbasenameタスクを使用しルートのプロジェクト名を取得するようにしています。

<basename property="flashproject.name" file="${basedir}/../"/>

使用にあたって注意点

ANTを実行するたびにindex.htmlが上書きされます。

上書きしたくない場合、下記行を削除してください(デバッグとリリースの2箇所)

<antcall target="Create index.html"></antcall>

ANTを使用せずにコンパイルする場合はCompilerArgumentsを設定。

これは前バージョンからですが、詳細は src/index.as のコメントを参考下さい。

アップデート履歴

ANTのマニュアルを見ていてBasenameというタスクがあった。

これを使えば、FDTのProjectフォルダ名を動的に取得出来る。

こんな感じで、ビルドタスクを実行するまえにdependsを実行し取得すればよい。
※<ant call=”Get Project Name”>とすると上手くいかなかった。

ex) ant/build.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!--Project Nameを取得-->
<target name="Get Project Name">
　<basename property="flashproject.name" file="${basedir}/../" />
</target>
 
<!--ビルドターゲット。dependsでプロジェクトフォルダ名を取得-->
<target name="Test Build" depends="Get Project Name">
    <!--取得できたかトレース--> 
    <echo message="${flashproject.name}"></echo>
    <!--コンパイルなど-->
    <fdt.launch.application 
        projectname="${flashproject.name}" 
        <!--以下略-->
    />
</target>

“FDT”の、Progressionプロジェクトテンプレートを修正し、
Ver2としてアップしました。

DOWNLOADは下記から

利用方法

こちらのエントリーの利用方法をご参照下さい

変更内容

・リリースビルド時、Debugクラスを空クラスに上書きしswfの容量を減らす。
※前回のテンプレートに対し@matsumosさまにReply頂きまして、リリースビルド時の挙動を教えていただきました。

具体的にはANTで、compilerargumentsで空クラスにパスを通しています。
※thx! @cellfusion

1
2
3
4
5
6
7
8
9
10
11

<property name="release.path" value="${basedir}/../lib/ProjectRelease" />
<!--略-->
<fdt.launch.application 
	projectname="${flashproject.name}" 
	mainclass="${src.dir}/Index.as"
	debug="false" 
	target="${release.dir}/index.swf" 
	startswf="false"
	compilerarguments="-define=CONFIG::Debug,false -define+=CONFIG::Release,true
				-sp ${release.path}"
/>

また、下記の表通り、僅かではありますがリリースビルドswf容量が減ります。
※thx! 検証@fumix

これでまた一つ、本家Progressionの挙動に近づけました（・∀・＊）
FDTでもやろうと思えば結構できるもんです。

FDTのANTを使用し操作一発で下記を実行する設定方法です!（・∀・）
・swfコンパイル
・FTPアップロード
・Firefoxで更新(リロード)表示

こちらのサイトを参考にさせて頂きました。
My workflow with ANT and FDT | base42.nl
スゴク良く出来たANTファイルがあるのでダウンロードおすすめします!
※それを見ながらこのエントリをみるとよりよくわかるかと。

[環境:MacOS10.6 / FDT4 Milestone2]

コンパイルする

これは普通に”fdt.launch.application”タスクで設定します。
以前のエントリーを参考下さい。
R o m a t i c A : Blog : Archive » FDTでANTを使って色々な処理を自動化！

FTPアップロードする

[1] JARを設定

FTPを機能させるためにまず、下記サイトからjarファイルをダウンロード。(2ファイル)
Rumbling BlogFDT, ANT and FTP
その2ファイルを、下記ディレクトリに設置。
/Applications/FDT***/plugins/org.apache.ant_***/bin/

[2] JARにパスを通す

FDTから、その2ファイルにパスを通します。
“Preferences” > “ANT” > “Runtime” > “Classpath” を開き”Add External JARs”で
さきほどのjarを選択し追加。
・commons-net-2.0/commons-net-2.0.jar
・jakarta-oro-2.0.8/jakarta-oro-2.0.8.jar

これでFTPが動作する環境が整いました!。

[3] FTPのANT記述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

	<ftp server="FTPホストアドレス"
		port="21"
		userid="FTP User Name"
		remotedir="/"
		password="FTP Password"
		depends="no" 
		passive="yes" 	
		binary="yes"
		verbose="yes"
		>
		<!--deployフォルダ以下すべてアップロード-->
		<fileset dir="${deploy.dir}" />
		<!--deployフォルダ以下にある全てのswfファイルをアップロード
		<fileset dir="${deploy.dir}" >
			<include name="*.swf" />
		</fileset>
		-->
	</ftp>

一部ftpプロパティの説明です。
remotedir:アップロード先ディレクトリ
depends : “yes”にすると、タイムスタンプが新しいファイルだけ転送する。
verbose : “yes”に設定された場合、 ファイルが転送される毎に情報を表示します。 デフォルトは”no”です。
その他のプロパティは下記サイトの下部に日本語説明があります。
Apache Ant User Manual FTP
※これみると他にも色々できそうですね!

これでANTでFTP出来るようになりました!（・∀・）

FireFoxを開き、リロードする

ANTから”fresno”を実行することで”MozRepl”を動作させ、FireFoxをリロードさせます。

[1] FireFox機能拡張”MozRepl”をインストール

Home – mozrepl – GitHub (コンソールを使ってFirefoxを操作する機能拡張だそうです)
・MozRepl 1.0 – release
・MozRepl – development branch

FireFox再起動後 “ツール” > “MozRepl” > “Start”で、スタートさせておく。

[2] “Fresno”をダウンロード

下記からSVNで”Fresno”をダウンロード
Fresno – SIMILE(FireFox機能拡張を実行する、コマンドライン?のようです)
※冒頭のURLからDLしたfresnoは上手く動作しなかったので、上記SVNからダウンロードをおすすめします。

ダウンロード後、プロジェクト内の任意の位置に置く。
ex) ./ant/builders/tools/fresno

[3] ANTからFresnoを実行

1
2
3
4
5
6

	<exec executable="open">
		<arg line="-a Firefox" />
	</exec>
	<exec executable="${basedir}/ant/builders/tools/fresno">
		<arg line="-j 'content.location.reload()'" />
	</exec>

これでFireFoxがリロードされる設定が出来ました!（・∀・）

FirefoxにFlashTracerをいれておけば、そのままトレースも確認できますね。
設定するまではちょっと面倒だけど、
一度ベースを設定してしまえば、スゴクラク！

追記

(追記 2010.8.1)—————–
このエントリを元に東京てら子6で発表しました。
その内容はこちらです。
東京てらこ6「SWF最適化・制作効率アップ術」で発表した内容

(追記 2010.5.31) —————-
<fdt.browse url=”url”>でもブラウザを開けますが、ブラウザ指定方法がわからず。。
また、fdt.browseだと実行の度に新規でウィンドウが開いてしまいます。
同ウィンドウで開く方法があったらオシエテだれか（ ´д｀; )

(追記 2010.5.31)—————-
<fdt.starDebugger>を使えばブラウザで開いたswfもFDT内Consoleでトレース確認ができます!
thx @cellfusion

FDTでswfをコンパイル時に、条件をつけて「一部のコードを無視させる」方法です。
Conditional Compilation With FDT – ActionScriptWiki

(エキサイト翻訳)
/*FDT_IGNORE*/キーワードを使用することによって、コードのある一定の領域を無視させることができる。

なるほどー。（・∀・）

(続きを読む…)

@fumixさんのTweetで知りましたが、FDTがMilestone2にバージョンアップして、
過去のバージョンでExportされたTemplate類がもろもろImportできない状態になっているようですので、その解決法など。
(下記３箇所確認済み)
※環境設定 > FDT > Editor > Templates
※環境設定 > ANT > Editor > Templates
※環境設定 > XML > XML Files > Templates

解決法

import側のテンプレート(XML)の1行目該当部分を下記のように修正。

1

<?xml version="1.0" encoding="UTF-8"?>

↓standalone=”no”を追加

1

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

これで読み込めるようになりました！（・∀・＊）
※standalone=”no”を”yes”にするとどうなるか等は未確認です。

次期バージョンではどちらでも読めるように対応してほしいところです（期待）

関連エントリー

FDTテンプレート作りました。

個人的に最強のFlash制作環境”FDT”。
先日、最新β版”FDT4 Milestone2“がリリースされました!。
(ダウンロードはこちらから、30日間無料で使用できます。[win/mac])

“Project Template” 機能!

いくつか新機能が追加されていますが、そのうちの一つ”Project Template”について。

これつまりは「プロジェクトのディレクトリ構造」のテンプレート。
デフォルトでいくつか用意されていますが、自作もできます。

ということで、みんな大好きProgressionのテンプレートを作りました（・∀・） 。
ANTを使用して「デバッグ/リリースビルド」を書き出しわける機能も付いています!。
(追記 2010.05.28)デバッグリリースビルドを修正したバージョンに置き換えました。
詳細はこのエントリーを御覧下さい

Downlaodは下記ボタンから。

(続きを読む…)