Tag : flashdevelop

10 月 20 2008

FlashDevelopでAstro開発できるようにセットアップ

Posted by tanjo at 6:43 AM

先日 Flash Player 10 が正式リリースされたこともあり、そろそろバージョン10(Astro)向けの開発ができるようにと Flex SDK と FlashDevelop をセットアップしておきました。

Flex SDK の入手

私が今まで使ってたのはAstro未対応のバージョンでした。まずは Flex SDK を更新します。
Adobe Open Source のページからいろいろなリビジョンの Flex 3 SDK が入手できます。
» Download Flex 3 - Flex SDK - Confluence

最新マイルストーン・リリースの 3.1.0 build 2710 を使うことにしました。Adobe 製品ページから入手できる Flex 3 SDK も現在はこのリビジョンみたいです。

が!なぜだか build 2710 の Adobe Flex SDK リリースには Astro 向けコンパイルに必要な playerglobal.swc が含まれていません!Open Source Flex SDK の方には含まれていたので、オープンソース版の frameworks/libs/player/10 フォルダをそのままコピーして追加しました。

frameworks/libs/player/10/playerglobal.swc がちゃんと含まれているリビジョンでは、もちろんこの作業は不要です。ちなみに公式のFAQによると、[Adobe版] = [オープンソース版] + [非オープンソースのコンポーネント] という構成らしいので、中身に違いはないはずなのに…。

Flex SDK の設定

ほとんど設定する必要ないみたいです(^^
以前は Flash Player 10 に対応するために frameworks/flex-config.xml を編集する必要があったようですが(» 解説ページ)、3.1.0.2710 ではセットアップ済みでした。
そういうわけで、追加クラス(Papervision3Dとか)を再設定してやるだけで、他はやることなし!

スタンドアロン版 Flash Player 10 の入手

Flex 3 SDK にもスタンドアロン・プレーヤーは含まれています。(runtimes/player 以下のフォルダ)
だけどせっかく Flash Player 10 の正式版がリリースされたことだし、そっちをインストールしておきます。
» Adobe Flash Player - Downloads

上記ページの Get older versions 項のリンク先から Flash Player 10 (debugger versions) (26 MB) をダウンロードしました。Windows では flashplayer10r12_36_win_sa_debug.exe というのがスタンドアロン・プレーヤーの実行ファイルです。

FlashDevelop の設定

FlashDevelop最新版は公式サイトから入手できます。以前インストールしたときのメモはこちら
» FlashDevelop.org

グローバル設定は変更する必要ありません。Flash Player 10 をターゲットにするプロジェクトの設定だけでOK。ちなみに FlashDevelop のバージョンは 3.0.0 Beta9 を使っています。
こんなふうに設定しました。

  • Project > Propaties の Output タブにて、Platform を「Flash Player 10」に設定。
  • 同じく Propaties の Compiler Options タブにて、Advanced > External Libraries の[...]をクリックして Astro 用 SWC ライブラリのパスを入力。

2つ目は、Astro で追加された新プロパティなどの入力補完をするための設定です。これで rotationX とかを補完してくれるようになります。設定しなくても、コンパイルはできるみたいですが。
ライブラリパスは、私の環境では C:\flex_sdk_3\frameworks\libs\player\10\playerglobal.swc でした。さっきオープンソース版から追加したファイルのことですね。

なお、入力補完用のクラス定義ファイルを作ってくれたかたがいるようです。お好みでこちらもどうぞ。
» FlashDevelop3 beta9 で Shader クラスのコードヒントを表示する - blog.seyself.com

7 月 02 2008

Papervision3Dのセットアップ&プラクティス

Posted by tanjo at 1:24 AM

前回紹介したActionScriptの3Dライブラリ「Papervision3D」をインストールし、FlashDevelopやFlash CS3で使えるようにセットアップしてみます。ついでにサンプル作成も。

Papervision3D 2.0 Alpha (GreatWhite) の入手

正式リリース版はGoogle Codeで配布されていますが、先日(といっても結構前に)リリースされた、2.0 Alpha(GreatWhite)を使うことにします。Papervision3D 2.0 Alphaは公開リポジトリから入手できるようです。
http://papervision3d.googlecode.com/svn/trunk/

Subversion形式で公開されているので、クライアントソフトが必要です。
私はTortoiseSVNを利用しました。Windowsのシェル拡張で、インストールすると右クリックにメニューが追加されます。

リポジトリからPapervision3Dをダウンロードするには、エクスポート先のフォルダを(作成して)選択し、右クリック > TortoiseSVN > Export、表示されるダイアログで URL of repository に上記 http://papervision3d.googlecode.com/svn/trunk/ を入力して、OKをクリック。
2.0 Alphaは branches/GreatWhite フォルダ以下にあります。

Flex 3 SDK の設定

まずはクラスライブラリ(ソース版)用のディレクトリ、たとえば C:\flex_sdk_3\frameworks\sources を作成します。
その中に、Papervision3Dの branches/GreatWhite/src 内にある com、fl、org フォルダをコピー。
次にFlexコンパイラのコンフィグを設定します。設定ファイルは C:\flex_sdk_3\frameworks\flex-config.xml。
<source-path> 部分がデフォルトでコメントアウトされていたので、それをはずし、以下のように記述しました。

<source-path>
  <path-element>sources</path-element>
</source-path>

これでfcshでmxmlcを実行するときにPapervision3Dが使えるようになるはずです。

<library-path>はSWCファイル形式のライブラリ専用。ソースをこちらに指定しても意味がないので注意しょう。
fcshコマンドラインからのコンパイル方法についてはこちら

FlashDevelop の設定

FlashDevelopもfcshを使っているだけなので、上記設定でコンパイルはできるようになっていると思います。
ただし、入力補完や宣言参照が効くようにするには Tools > Global Classpaths で指定してやる必要があるようです。

どうやら、Global Classpathsを設定していれば、Flexのコンフィグで設定していなくても、FlashDevelopでライブラリを使用できるっぽいです。まあ、両方やっておいて損はないでしょうが。

Flash CS 3 の設定

Flash CS3を使ってパブリッシュするとき用です。編集 > 環境設定 > ActionScript > ActionScript 3.0 設定 にて、C:\flex_sdk_3\frameworks\source にクラスパスを通します。

ためしに3D Flashを作ってみました。

さてさて、インストール確認がてら、Papervision3Dを使って簡単なFlashを作ってみました。

まずはFlashDevelop編。

Project > New Project を選択し、ActionScript 3 - Default Project を選んで、myPlane と名前をつけてプロジェクトを作成します。
プロジェクトフォルダ内、src/Main.as を次のように編集します。Papervision3Dのひな形的なソースですね。

package
{
    import flash.display.*;
    import flash.events.*;

    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.materials.*;
    import org.papervision3d.materials.special.CompositeMaterial;

    [SWF(backgroundColor=0x000000)]

    public class Main extends Sprite
    {
        private var scene:Scene3D;
        private var viewport:Viewport3D;
        private var camera:Camera3D;
        private var renderer:BasicRenderEngine;
        private var objPlane:Plane;

        public function Main()
        {
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.quality = StageQuality.MEDIUM;
            init3D();
        }

        private function init3D():void
        {
            //ビューポート設定
            viewport = new Viewport3D(0,0,true);
            viewport.opaqueBackground = 0x000000;
            addChild(viewport);

            //レンダー設定
            renderer = new BasicRenderEngine();

            //カメラ設定
            camera = new Camera3D();
            camera.z = -300;
            camera.focus = 500;
            camera.zoom = 1;

            //シーン設定
            scene = new Scene3D();

            //マテリアル設定
            var colorMat:ColorMaterial = new ColorMaterial( 0x006699, 1 );
            var wireMat:WireframeMaterial = new WireframeMaterial( 0x0099cc );
            var compoMat:CompositeMaterial = new CompositeMaterial();
            compoMat.addMaterial(colorMat);
            compoMat.addMaterial(wireMat);
            compoMat.doubleSided = true;

            //Plane生成
            objPlane = new Plane(compoMat, 300, 300);
            scene.addChild(objPlane);

            addEventListener(Event.ENTER_FRAME, onEnterFrame);
        }

        private function onEnterFrame(event:Event):void
        {
            objPlane.rotationY += 2;
            renderer.renderScene(scene,camera,viewport);
        }
    }
}

そして、[F5]!このような bin/myPlane.swf が作成されました。

pvsmp1

今度はFlashDevelop+Flash CS3編。

FlashDevelopで Project > New Project から、ActionScript 3 - Flash IDE Project を選択し、新規プロジェクト myPlane2 を作成。
Flash CS3で 新規作成 > Flash ファイル(AS 3.0)、プロパティウィンドウのドキュメントクラス欄にクラス名 Main と入力し、先ほどのプロジェクトフォルダ内に app.fla として保存します。

FlashDevelopに戻って、Projectウィンドウのプロジェクトフォルダを右クリック、Add > New Class を選択し、Main.as というActionScriptファイルを作成します。ソース内容は上記と同じものを。

そして、[F6]!先ほどと同じような app.swf が作成されました。
Flash CS3の設定がデフォルトのままだと12FPSなので、こちらの方がカクカクしてますね。

……また文字ばっかになってしまったorz

6 月 30 2008

FlashDevelopとFlash CS3の連携

Posted by tanjo at 8:13 AM

fdfl

今回は、FLAファイルからActionScriptを分離させ、FlashDevelopでコーディング→Flash CS3でパブリッシュ、という連携の開発をしてみます。
実はtrick7.com blogさんの記事にて、丁寧にビデオ解説されているので、正直そちらを参照してねって感じなんですが、一応要点だけ書いておきましょう。

1.まず、FlashDevelopでプロジェクトを作成します。
Project > New Project から、ActionScript 3 - Flash IDE Project を選択し、新規プロジェクトを作成。
今回はプロジェクトフォルダがまだ空のままですね。

2.次にFLAの作成。
今度はFlash CS3で 新規作成 > Flash ファイル(AS 3.0) を作成し、プロパティウィンドウのドキュメントクラス欄にクラス名(たとえば、Main)と入力し、先ほどのプロジェクトフォルダ内にFLAファイルを保存します。

3.ActionScriptファイルの作成。
FlashDevelopに戻って、Projectウィンドウのプロジェクトフォルダを右クリック、Add > New Class を選択し、ASファイルを作成、ファイル名はドキュメントクラス名と同じものにします(Main.as)。
Flash CS3の出力を試してみようと、traceするスクリプトにしてみました。

package
{
	import flash.display.Sprite;
	public class Main extends Sprite
	{
		public function Main()
		{
			trace("Hello, World!");
		}
	}
}

4.そして、ムービープレビュー!
FlashDevelopで[F5]もしくは[F6]を押すと、自動でFlash CS3に切り替わり、ムービープレビュー(Flashの[Ctrl]+[Enter]のやつですね)ができます。
SWFファイルはプロジェクトフォルダ直下に作成されます。

…だいたいこんな流れですね。
文字だと分かりにくッ。

さてさて、最初の準備がちょっと面倒くさかったり、同一フォルダで管理しないといけなかったりはしますが、これなら、従来のデザイナー的制作手法で、FlashDevelopの強力なエディタ機能を利用できるようになりました。
ライブラリ管理とムービークリップ作成をFlashで行って、あとはスクリプトで制御する派(?)の人にはオススメです。

6 月 30 2008

FlashDevelopをインストール&セットアップ

Posted by tanjo at 3:12 AM

fdui

さて、Flexをセットアップできたということで、今度こそAS開発環境FlashDevelopのインストールです。*参考サイト
現在の最新版は ver.3.0.0 Beta7。これを使いました。
*ただしこのバージョンはUAC関連の問題を抱えています。詳しくはこのエントリ中程を見てください。

公式サイトFlashDevelop.orgからReleasesとたどり、FlashDevelop-3.0.0-Beta7.exe をダウンロード、インストーラを起動すればOK。

さっそくFlashDevelopを起動させて、設定を見直します。とりあえず重要そうなのはこの3点でしょうか。

  • Tools > Program Settings にて、FlashDevelop > その他 > Default CodePage が “UTF8″ になっているか確認。
  • AS3Context > AS3 > Flex SDK Location が “C:\flex_sdk_3″ になっていることを確認。
  • プロジェクトのテンプレートが作成するファイルのエンコード File > Encoding が “UTF-8″であることを確認。

なんだ、全部デフォルトで大丈夫じゃないですか~。
なお、UIのフォントはProgram Settingsから設定できますが、肝心のコードビューのフォントは直接設定ファイルを編集しなければなりません。Tools > Application Files をクリックするとアプリケーションデータのフォルダが表示されるので、その中の Settings\ScintillaNET.xml をテキストエディタで編集します。name=”default-font” あたりですね。

さて、Beta7ではVistaのUAC関連の問題があるらしく、Flash Developを起動するたびに「管理者として実行」のダイアログがでてきたりします。
まあ、(それが関係しているのか分かりませんが)ごくまれに起動時に妙なエラーを吐くこと以外は問題なく動作しているのでたぶん大丈夫でしょう。。 公式フォーラムの様子を見るかぎり次のバージョンでは解決してくれるかも、です。よろしくお願いします、Mikaさん (> <)

FlashDevelopでサンプルプロジェクトを作って、コンパイルしてみます。

Project > New Project を選択し、ActionScript 3 - Default Project を選んで、適当な名前をつけてプロジェクトを作成します。
プロジェクトフォルダ内、src/Main.as をとりあえず前回と同様以下のように編集します。

package
{
	import flash.display.Sprite;
	[SWF(backgroundColor=0xFFFFFF)]

	public class Main extends Sprite
	{
		public function Main():void
		{
			graphics.lineStyle(5, 0×8888FF);
			graphics.moveTo(150, 50);
			graphics.lineTo(250, 250);
			graphics.lineTo(50, 250);
			graphics.lineTo(150, 50);
		}
	}
}

そして、[F5]を押す(または Project > Test Movie)と、こんな感じのSWFファイルが bin/(プロジェクト名).swf として生成されるはずです。

6 月 30 2008

FlashDevelopの前に、、Flex 3 SDKのインストール

Posted by tanjo at 1:57 AM

fxlogo

前回のエントリで紹介したAS開発環境FlashDevelopのインストールメモです。
ちなみに私の環境Windows Vista (32bit)でAS3の開発を行う、という前提でのメモです。
CodeZineの記事を参考にしました。あわせてどうぞ。

FlashDevelopで開発するためには、Flex SDKとJava(ver.6以降)が必要です。私の場合はFlash IDEとの連携も考えているので、あらかじめFlash CS3がインストールされています。

というわけで今回はまずFlex SDKのインストールから。
Flex SDKにはASクラスライブラリやコンパイラ、デバッグ用Flashプレイヤーなどが含まれています。

今回は先日オープンソース化された、最新版のFlex 3 SDKを使いました。
AdobeのFlexページからリンクをたどり、flex_sdk_3.zip をダウンロード、解凍フォルダを C:\flex_sdk_3 として保存すればインストール完了。
*以前と違い、ダウンロードにAdobe IDは必要ありません。
*フォルダ名は flex_sdk_3 でなくてもかまいませんよ。
 ただし、ドライブ直下、半角スペースを含まないフォルダにしておいた方が無難です。
 以降このブログでは上の通りにインストールしたとして記事を書きます。

参考サイトにしたがい、C:\flex_sdk_3\bin\jvm.config を次のように編集しました。

# Arguments to VM

java.args=-Xmx384m -Dsun.io.useCanonCaches=false -Duser.language=en -Duser.region=JP

が、デフォルトのままでも問題ないかもしれません。(動作しました。)

Flex 2の頃は、コンパイルを高速化させるための fcsh(Flex Compiler Shell)を追加インストールしたりしたものですが、どうやら3ではFlex SDK自体に同梱されているみたいです。
というわけで、Flex 3 SDKの導入はこれだけで完了~。

ためしに動作確認をしてみましょうか。
まだIDEがインストールされていないのでコマンドラインからの操作となります。
コマンドプロンプトで次のように入力します。

C:\>cd C:\flex_sdk_3\bin [Enter]
C:\flex_sdk_3\bin>fcsh [Enter]
Adobe Flex Compiler SHell (fcsh)
Version 3.0.0 build 477
Copyright (c) 2004-2007 Adobe Systems, Inc. All rights reserved.

(fcsh)

こんな感じで fcsh のプロンプトが開始できればOK。
せっかくですので、Flashをコンパイルしてみましょう。
テキストエディタで適当なActionScriptファイルを作成し、C:\as\Main.asにでも保存します。

package
{
	import flash.display.Sprite;
	[SWF(backgroundColor=0xFFFFFF)]

	public class Main extends Sprite
	{
		public function Main():void
		{
			graphics.lineStyle(5, 0x8888FF);
			graphics.moveTo(150, 50);
			graphics.lineTo(250, 250);
			graphics.lineTo(50, 250);
			graphics.lineTo(150, 50);
		}
	}
}

そしてfcshでコンパイル!

(fcsh) mxmlc c:\as\Main.as [Enter]
fcsh: Assigned 1 as the compile target id
Loading configuration file C:\flex_sdk_3\frameworks\flex-config.xml
C:\as\Main.swf (639 bytes)
(fcsh)

こんな感じのMain.swfが生成されました。
なお、fcshを終了するには、[Ctrl]+[C] と入力すると通常のコマンドプロンプトに戻れます。

ローカルのSWFファイルが開けない場合は、C:\flex_sdk_3\runtimes\player\win にある FlashPlayer.exe を一度起動しておくと、SWFがFlashPlayerに関連づけされるみたいです。

6 月 30 2008

AS開発環境FlashDevelopを使ってみました

Posted by tanjo at 12:31 AM

fdlogo

オープンソースのActionScript開発環境、FlashDevelopを導入しました。
なかなか使いやすいです。

  • いろいろな開発スタイルに対応。
    Flex SDKを使用したActionScript開発、MXML+ASのウェブ開発、Adobe Airの開発、Flash CS3との連携などなど。ActionScriptは3.0と2.0両方に対応しています。基本FLAで管理しつつスクリプトだけ外部ASに分離、みたいなライトな使い方ができるのもいいですね。もちろん、Flex Builderの代替or併用として使ってるユーザも多そうです。
  • 入力補完機能。
    ActionScript標準クラスだけでなく、インポートした外部ライブラリ、自分で定義した変数や関数も補完してくれます。しかも、その候補は、現在インポートしているクラス、クラスが対応しているメソッドやプロパティに限定されるので、関係ない候補がやたらと表示されて煩わしい…なんてことはありません。おりこうさん。
  • 自動補完・整形。
    たとえば、コード中にBitmapクラスを使うと、自動で冒頭部分にimport flash.display.Bitmapが挿入されます。これは便利。ほかにも、関数の「 } (カッコとじ)」だとか、演算子の隣の半角スペースを追加してくれたりします。
    *そういうのがイヤな人は、設定でオフにもできるそうです。
  • クラスの定義やドキュメントの参照。
    F4キーを押すと、カーソル上のクラスの定義(ソースファイル)が参照できます。これもAS標準のものだけでなく、カスタムクラスにも対応しているので、Papervision3Dみたいな外部ライブラリを多用する私にとってはありがたいことですね。
    F1キーを押すと、Adobeのオンラインドキュメントが参照できます。(厳密には、オンラインドキュメントからキーワードをGoogle検索したページが、ブラウザで開きます。)

ほかにも、動作がカナリ軽かったり、(コード内で)日本語が標準で使えたり、FlashDevelop自体の開発も結構ハイペースだったりと、好感が持てます。FD2.0の頃と比べて日本語情報が増えてきているのもありがたいかぎりです。