feb19.jp

Nobuhiro Takahashi
Designer / Engineer

Flex SDK 3で、Flash Player 10(Astro)を予習する

Flex SDK 3で、Flash Player 10(Astro)を予習する

Flash Player 10コンテンツにおける、現状の開発環境を整えていきましょい。

現状はFlash Player 10 beta 2が公開されています。まだベータ版で自動更新みたいに親切設計になってないので、インストールは一回自分のPCの入っているFlashPlayerをアンインストーラーでアンインストールしてから、インストールする必要があります。

ちなみにWindows版に関しては、「ActiveX Control for Windows」ってのはIE用で、「Plugin for Windows」ってのがFirefox/Safari用。

で、Flash Player 10をインストールしたら次は開発環境(Flex SDK 3)。

まずこのページから、Nightly Buildの中の一番最新のAdobe Flex SDKを入手します(現時点ではBuild 3.1.0.2511が最新なのでこれを使って説明します)。クリックした先の下のほうにチェックボックスがあるので、それにチェックするとダウンロードの文字が出てくるので、それをクリックでダウンロードして解凍。解凍してできるフォルダに「flex_sdk_3」とかいう名前をつけて(Mac解凍するとデフォルトでこの名前かも)、とりあえずデスクトップに置いてみます。

次にこのページを参考に、flex_sdk_3\frameworks\の中にある、「flex-config.xml」をFlash Player 10用に編集します。

17行目の

<target-player>9.0.124</target-player>

を、

<target-player>10.0.0</target-player>

に。

52行目の

<external-library-path>
	<path-element>libs/player/{targetPlayerMajorVersion}/playerglobal.swc</path-element>
</external-library-path>

を、

<external-library-path>
	<path-element>libs/player/10/playerglobal.swc</path-element>
</external-library-path>

に。

69行目の

<library-path>
	<path-element>libs</path-element>
	<!-- keep the original location in the libpath for backwards-compatibility -->
	<path-element>libs/player</path-element>
	<path-element>libs/player/{targetPlayerMajorVersion}</path-element>
	<path-element>locale/{locale}</path-element>
</library-path>

を、

<library-path>
	<path-element>libs</path-element>
	<path-element>libs/player/10</path-element>
	<path-element>locale/{locale}</path-element>
</library-path>

にします。

これで一応環境設定は完了。

というわけで、Astro専用ActionScriptを即興で書いてみます。

AstroTest.as
  
package
{
	import flash.display.Sprite;
	import flash.display.Graphics;
	import flash.events.Event;
	
	[SWF(backgroundColor="0x000000", frameRate="50")]
	
	public class AstroTest extends Sprite
	{
		public function AstroTest()
		{
			this.stage.align = "TL";
			this.stage.scaleMode = "noScale";
			
			this.x = Math.floor(this.stage.stageWidth/2);
			this.y = Math.floor(this.stage.stageHeight/2);
			
			var sp:Sprite = new Sprite();
			
			var g:Graphics = sp.graphics;
			
			g.beginFill(0xffffff);
			g.drawRect(-50, -50, 100, 100);
			g.endFill();
			
			addChild(sp);
			
			sp.addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
		}
		private function onEnterFrameHandler(e:Event):void
		{
			e.currentTarget.rotationY++;
		}
	}
}

これをFlex SDK 3でコンパイルします。上のファイルをデスクトップに置いてください。

Windowsの場合は、スタートメニューからプログラム→アクセサリ→「コマンドプロンプト」を開きます。(Macはまだ試してませんが、アプリケーション→ユーティリティ→「ターミナル」を使えば同じことができるはずです)

まず表示されたら、

cd デスクトップ

とすると、現在のディレクトリ階層をデスクトップに移動できます。日本語をコマンドプロンプトで入力するには、「Alt + 半角全角キー」を使います。

その次に、

cd flex_sdk_3\bin

と入力し、コンパイラがあるディレクトリに移動します。

というわけで、コンパイル実行します。

mxmlc.exe ../../AstroTest.as

Macの場合は「.exe」を省いてください。

と入力すると、コンパイルが実行されます。もしエラーが出たら画面に表示されます。エラーが出ずに、きちんとコンパイルされたらAstroTest.asと同じ階層に(つまりデスクトップ)、AstroTest.swfというファイルができます。

これは、Flash Player 10専用コンテンツなので、Flash Player 10プラグインをインストールしたブラウザにドラッグアンドドロップで表示すると。。。

こんな感じになれば成功です。(Flash Player 10専用)

四角形がY軸を中心に3D回転しています。。。が。。。あまり3Dにみえませんが。。。そのへんの質感は今後ということで。。。デフォルトだとパース利きすぎ?Sprite.rotationYで実装していますが、自分で実際にdrawTriagleでトライアングル作って変換とかした方がいろいろ出来そうかも。

とりあえずこれでFlash Player 10 beta 2 (Astro)の予習ができそうですね。(ブログ更新用のネタができた)

Tweet Share Bookmark

Navigation

prev: AS2で読み込んだ外部画像にスムージングを適用する
next: Flash Player 10 Astroを予習。Dynamic Sound Generate編 #1

Recently Entries