Flash/ActionScript Archive

最上位ＳＥＯ

大体、思いつく限りだと、ActionScript3.0で制作するためのツール・環境は、下記の様になると思います。

No.	ツール	ライセンス	Windows	Mac
1	Flash CS	有料	◯	◯
2	Flex Builder	有料	◯	◯
3	Flex SDK + テキストエディタ	無料	◯	◯
4	FlashDevelop	無料	◯	×
5	Carbon Emacs + ECMAScript-mode	無料	×	◯
6	XCode +CoreSWF	無料	×	◯
7	Eclipse + AXDT	無料	◯	◯

スタンダートなところだと、FlashDevelopか、FlexBuilderだと思いますが、お金がないのと、会社だとWindows,家だとMacという困った環境なので、IDEが違うと作業効率が悪いのと、Android SDK、Google Apps Engineで、Eclipseを使用していたので、Eclipseに、AXDTプラグインをインストールする方法を試してみました。

1. Eclipseを入手する。

もし、Eclipseをまだインストールしていなければ、こちらから入手して、インストールします。

私は、Google Apps EngineやAndroidで、Javaを勉強中なので、「Eclipse IDE for Java Developers」を使っています。

2.EclipseのActionScript用プラグイン「Axdt」を追加する。

Axdt(ActionScript x Development Tools)とは

http://axdt.org/
ActionScript3開発用Eclipseプラグイン。
EclipseでFlexでのActionScriptやMXML開発を支援します。

• Flex Design View：ドラッグ＆ドロップでの、UIデザイン
• xsd4mxml project：ソースコードの自動補完
• ActionScript・MXMLのビルド＆実行

3. Eclipse にAXDTをインストールする

Eclipse 3.5での設定方法の履歴です。
※他のVersionの方は、こちらから。

1. Eclipseを起動します。

「Help」- 「Install New Software」を選択します。

2. IMPサイト「http://download.eclipse.org/technology/imp/updates」を、追加します。

Eclipseを再起動します。

3. AXDTサイト「http://update.axdt.org/」を追加します。

Eclipseを再起動します。

4. Parspectiveを開きます。

「Window」-　「Open Parspective」- 「Other」-「AXDT」を開きます。

これで、Eclipseで、ActionScript3.0の記述とビルド環境が整いました。
次に、サンプルコードを入れて、ビルドできるか確認してみます。

4. ActionScript3.0 を書いて、Buildしてみる

新規AXDT Projectを作成します。

とりあえず、円を作るサンプルを動かすので、「circle」としておきます。

「src」フォルダに、新規ActionScript3.0ファイルを作成します。
左メニューから、「src」フォルダを、右クリックして、「New AS3 File」を選択します。

ファイル名「circle」の、ラジオボタン「Class」で作成します。

src/circle.as に、以下のような、円を表示するサンプルActionScript3.0を記述します。

circle.as 円を描くサンプル

// Test ActionScript3.0 on AXDT
package  {
	 	import flash.display.*;

        public class circle extends Sprite {
                //--------------------------------------
                //  CONSTRUCTOR
                //--------------------------------------
                public function circle() {
                        //Setting Stage
                        stage.align = StageAlign.TOP_LEFT;
                        stage.scaleMode = StageScaleMode.NO_SCALE;

                        var circle:Sprite = new Sprite;
                        circle.graphics.beginFill(0x333333);
                        circle.graphics.drawCircle(320, 240, 100);
                        addChild(circle);
                }
        }
}

ビルドします。

SWFが実行され、円が表示されました。尚、実行ファイルは、/deployにあります。

Flash CS4で、ボタンシンボルのインスタンスに、
アクションが記述できなくて驚きました。

AS3.0からは、ボタンシンボルに、
直接アクション記述出来なくなったんですね。（今更！）

• ActionScript 3.0 イベント処理の以前のバージョンとの違いhttp://livedocs.adobe.com/flash/9.0_jp/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000136.htm

FlashのSWFファイルを<object>タグ, <embed>タグを使用せずに、
JSライブラリで、手軽にHTMLに埋込める、SWFObjectを使ってみました。

ダウンロード＆資料

• SWFObject v2.0
  http://code.google.com/p/swfobject/
• SWFObject v2.0 ドキュメント日本語訳
  http://mtl.recruit.co.jp/blog/2007/10/swfobject_v20.html
• SWFObject 2 HTML and JavaScript ジェネレーター v1.2
  http://www.tonpoo.com/docs/swfobject_generator/

サンプルページ

• http://splitchin.com/sample/javascript/swfobject/index_dynamic.html

1. swfobject.jsを読み込む

<script type="text/javascript" src="swfobject.js"></script>

2. swfobject.jsを読み込む

<script type="text/javascript">
var flashvars = {
// ここに、swfに渡す引数
}
var params = {
wmode: "transparent"　//params指定
};
var attributes = {};
// swf(FLASH素材)ファイル名、
// 置き換えるオブジェクト名(swfを組み込むdivタグのid名)、
// 横の長さ、
// 縦の長さ,
swfobject.embedSWF("mp3moji.swf", "mp3moji", "180", "15", "9.0.0","", flashvars, params, attributes);
</script>

3. Flash組み込み部分　＆　Flash代替コンテンツ

<div id="mp3moji">
<!--  Flash代替コンテンツ -->
<a href="test.mp3">voice01</a>
<!-- / Flash代替コンテンツ -->
</div>