2011年9月28日水曜日

FlashBuilderでStartupサンプルをAIRで実行する

1.プロジェクトファイルの作成
FlashBuilderファイルメニューから新規を選んで、ActionScript プロジェクトを選択します。
プロジェクト名:Startup
Flex SDKのバージョン 特定のSDKを使用する:Flex 4.5.1 (air3.0r1)
終了ボタンを押します。

2.Starling0.9.swcの指定
StarlingFrameworkが利用する為に、Starling0.9を指定します。
Flexライブラリファイルを参照する方法(リンク先へ)

3.SWFのバージョンを設定
StartupプロパティからActionScriptコンパイラーを選択し
追加コンパイラー引数-swf-version=13を追加して下さい。

この引数追加しないと、ビルド時に以下のエラーが出ます。
VerifyError: Error #1014: Class flash.display3D::Context3D could not be found.

4.アプリケーション定義ファイルの修正
Startup-app.xmlrenderModeタグにgpuを定義します。


gpu

gpu定義しないと、This application is not correctly embedded (wrong wmode value)
というエラーが表示されます。

5.Startupにサンプルソースをコピー
PrimaryFeather-Starling-Framework-v0.9-0-ge761589.zipを解凍すると
samplesというディレクトリがありますのでdemoディレクトリの中の
mediaディレクトリとsrcディレクトリをパッケージエクスプローラ
Startup直下へコピーします。これでビルドを行います

AIRからStarlingサンプルを起動する事ができます。

Have Fun!

FlashBuilder-StarlingFrameworkをSWC化

1.プロジェクトファイルの作成
FlashBuilderファイルメニュー新規を選んで、ライブラリプロジェクトを選択します。
新規 Flex ライブラリプロジェクトウィンドウが表示されますので

プロジェクト名:Starling0.9
Flex SDKのバージョン 特定のSDKを使用する:Flex 4.5.1 (air3.0r1)
終了ボタンを押します。

2.StarlingFrameworkのソース一式をコピー
PrimaryFeather-Starling-Framework-v0.9-0-ge761589.zipを解凍すると
starlingというディレクトリがありますので
mediaディレクトリとsrcディレクトリをパッケージエクスプローラ
Starling0.9直下へコピーします。

このような配置になると思います。

3.プロジェクトのビルド
ビルドを行うと、Starling0.9binディレクトリ内にStarling0.9.swcという
ファイルが出来上がります。

StarlingFrameworkのAIRサンプルについて

Stage3Dを簡単に利用できるようになるフレームワークStarlingFrameworkを利用して
以下のAIRサンプルアプリを起動します。

FlashBuilderAIRのダウンロード(リンク先へ)
Flex SDKのバージョン作成方法(リンク先へ)

作成手順
1.FlashBuilderStarlingFrameworkSWC
2.FlashBuilderStartupサンプルをAIRで実行する

StarlingFrameworkのサンプルをAIRで起動

StarlingFrameworkのサンプルをAIRで動かしてみました。
技術仕様は下の参考にさせて頂いたホームページをご覧下さい。

注意
この作成手順は2011年9月時点のものです。今後も仕様変更の可能性があります。
ソースと関連ファイルの使用結果について、一切の保証と責任は負いません。

参考にさせて頂いたホームページ
StarlingFramework(リンク先へ)
Starling (新しい ActionScript 3 の 2D フレームワーク) のご紹介(リンク先へ)
Starling (ActionScript 3 の 2D フレームワーク) のご紹介のつづき(リンク先へ)
SWCを利用したFlash制作の分業ワークフロー:FlashとFlash Builder連携開発(リンク先へ)

Sorry Japanese text only

ActionScript Native Extensionsのサンプルアプリ作成のまとめ

1.ActionScript Native Extensionsのサンプルアプリ作成(リンク先へ)

2.ANEの概要とサンプルアプリ(リンク先へ)

3.ANEサンプルアプリ作成のための環境構築(リンク先へ)

4.VisualC++でDLLの作成(リンク先へ)

5.FlashBuilderでSWCを作成(リンク先へ)

6.FlashBuilderでAIRサンプルを作成(リンク先へ)

7.ANEサンプルアプリのデバッグ(リンク先へ)

2011年9月25日日曜日

ANEサンプルアプリのデバッグ

1.FlexANESampleのディレクトリ内にextdirディレクトリを作成します。

2.extdirディレクトリにFlexANEConnect.aneディレクトリを作成します。
例)c:\[FlexANESampleプロジェクトのディレクトリパス]\extdir\FlexANEConnect.ane

3.前回作成したFlexANEConnect.aneファイルをFlexANEConnect.aneディレクトリの中
入れます。

4.FlexANEConnect.aneのコピーファイルを作成します。

5.FlexANEConnect.zipにファイル名を変更します。

6.FlexANEConnect.zipを解凍します。

7.ファイルの準備が出来たので、adlコマンドでデバッグを行います。
adlコマンドは、FlexANESampleディレクトリの位置で行います。
例)c:\[FlexANESampleプロジェクトのディレクトリパス] adl ...

adl.exe
-runtime "C:\Program Files\Adobe\Adobe Flash Builder 4.5\sdks\air3.0r1\runtimes\air\win"
-profile extendedDesktop
-extdir .\extdir bin-debug\FlexANESample-app.xml bin-debug

8.AIRアプリが起動します。

この他にもスマートフォンでネイティブコードの連携もできます。
自分もまだまだ勉強不足なので、技術調査していきます。

Adobe AIR Extention Have Fun!

FlashBuilderでAIRサンプルを作成

1.プロジェクトファイルの作成します。
ファイルメニューの新規より、Flexプロジェクトを選択します。
プロジェクト名は、FlexANESampleにします。
Flex SDKのバージョンは、Flex 4.5.1 (air3.0r1)を選択します。

2.Flexライブラリファイルを参照します。
パッケージエクスプローラFlexANESampleを右クリックし、プロパティを選択します。
Flex ビルドパスを選択し、右側のプロジェクトの追加をクリックします。
ライブラリプロジェクトの追加というウィンドウが開くので、FlexANEConnectを選択します。

3.FlexANESample.mxmlに処理を書きます。


    
        
    
    
    
        
    
    
    
        <s:TextInput id="inputText" width="300"/>
        <s:Button id="button" click="buttonClickHandler(event)" label="go"/>
        <s:TextInput id="outputText" width="300"/>
    



4.extensionsタグを追加します。
FlexANESample内のFlexANESample-app.xmlにextensionsタグを追加します。
追加する位置は、applicationタグの少し下にします。






  com.example.FlexANEConnect






5.ビルドを行います。
FlexANESamplebin-debugディレクトリに以下のファイルが作成されている事を確認します。
FlexANESample-app.xml
FlexANESample.swf

FlashBuilderでSWCを作成

1.プロジェクトファイルの作成
ファイルメニューの新規より、Flexライブラリプロジェクトを選択します。
新規 Flex ライブラリプロジェクトウィンドウが開きます。
プロジェクト名は、FlexANEConnectにします。

2.Flex SDKのバージョン作成
新規 Flex ライブラリプロジェクトウィンドウの下の項目に
Flex SDKのバージョンという項目があり、右側にFlex SDKの設定というラベルが
ありますので、クリックします。
環境設定というウィンドウが開きますので、右側の追加ボタンをクリックします。

FlexSDKを追加します。


Flex SDKの場所:air3.0rc1のsdkディレクトリ
例)C:\Program Files\Adobe\Adobe Flash Builder 4.5\sdks\air3.0r1

Flex SDK名:SDKの名前
例)Flex 4.5.1 (air3.0r1)

OKボタンをクリックします。

3.プロジェクトファイルの作成完了
新規 Flex ライブラリプロジェクトウィンドウのFlex SDKのバージョン内の
特定のSDKを使用するより、Flex 4.5.1 (air3.0r1)を選択します。
新規 Flex ライブラリプロジェクトウィンドウの終了ボタンをクリックします。

4.FlexANEConnect.asに処理を書きます。
package com.example
{
    import flash.events.EventDispatcher;
    import flash.events.IEventDispatcher;
    import flash.external.ExtensionContext;
    
    public class FlexANEConnect extends EventDispatcher
    {
        private var extContext:ExtensionContext;
        
        public function FlexANEConnect(target:IEventDispatcher=null)
        {
            super(target);
            
            extContext = ExtensionContext.createExtensionContext("com.example.FlexANEConnect","type");
        }

        public function dispose():void {
            extContext.dispose();
        }

        public function getParameter(message:String):* {
            return extContext.call("getParameter",message);
        }
    }
}

5.ビルド
FlashBuilderのパッケージエクスプローラーのFlexANEConnectbinディレクトリに
FlexANEConnect.swcが作成されます。

6.aneファイルの作成に必要なファイルです。
■library.swf
■電子署名ファイル
■ANEConnect.dll
■extension.xml

■library.swf
6-1.作成したFlexANEConnect.swcのコピーファイルを作成します。
6-2.拡張子の名前をFlexANEConnect.zipに変更し、解凍を行います。
6-3.解凍を行うとlibrary.swfというファイルがありますので、これを利用します。

■電子署名ファイル
6-4.FlashBuilderでテスト用の電子署名ファイルを作成します。電子署名タブ内の「作成」をクリックします。
6-5.自己署名の電子証明書を作成というウィンドウが表示されるので発行者名、パスワード、パスワードの確認にtestと入力します。
6-6.「test.p12」というファイルを作成します。FlexANEConnectのbinディレクトリに配置します。

■ANEConnect.dll
6-7.前回のVisualCで作成したdllファイルです。FlexANEConnectのbinディレクトリに配置します。

■extension.xml
6-8.xml形式で作成します。FlexANEConnectのbinディレクトリに配置します。

    com.example.FlexANEConnect
    1.0.0
    
        
            
                ANEConnect.dll
                ExtInitializer
                ExtFinalizer
            
        
    


7.カレントパスでadtコマンドを実行
上記それぞれのファイルがFlexANEConnectbinディレクトリに配置されている事を確認後、
FlexANEConnectbinディレクトリで、adtコマンドを実行します。
adt
-package
-storetype pkcs12
-keystore test.p12
-target ane FlexANEConnect.ane extension.xml
-swc FlexANEConnect.swc
-platform Windows-x86 library.swf FlexANEConnect.dll
コマンド実行時に、passwordを聞かれるので、testと入力してリターンキーを押して下さい
入力したパスワードは表示されませんので、気をつけて入力して下さい
正常に終了をすると、コマンド結果には何も表示されず、FlexANEConnect.anebinディレクトリ内に作成されます。

ANEサンプルアプリ作成のための環境構築

開発環境を整えます
■Flash Builder 4.5 Premium Edition無償体験版ダウンロード(リンク先へ)
■Adobe AIR 3 Release Candidate(リンク先へ)
■Visual C++ 2010 Express(リンク先へ)

FlashBuilder4.5でAIR 3 SDK Release Candidate(RC1)がビルドをできるように設定します
1.ダウンロードしたair3_rc1_sdk_win_090611.zipファイルをsdksディレクトリへ移動します
例)C:\Program Files\Adobe\Adobe Flash Builder 4.5\sdks
2.「4.5.1」のコピーディレクトリを作成します。(4.5.1と同じ内容のディレクトリ)
3.「4.5.1」のコピーディレクトリの名前を「air3.0r1」に変更します。
4.「air3.0r1」ディレクトリ内でair3_rc1_sdk_win_090611.zipを解凍します。
解凍するファイルは全て上書きで行って下さい。

5.Windowsシステムの環境変数の設定から、Pathに追加します。
Pathに追加するディレクトリパス
例)C:\Program Files\Adobe\Adobe Flash Builder 4.5\sdks\air3.0r1\bin

6.adtコマンドが実行できるかテストを行います。3.0.0.3880と表示されればOkです。
C:\>adt -version
3.0.0.3880

VisualC++でDLLの作成

DLL作成のための準備
FlashRuntimeExtensions.hFlashRuntimeExtensions.libを用意します。
この2つのファイルは、FlashBuilder4.5インストールディレクトリの中にあります。

FlashRuntimeExtensions.h
例)C:\Program Files\Adobe\Adobe Flash Builder 4.5\sdks\air3.0r1\include

FlashRuntimeExtensions.lib
例)C:\Program Files\Adobe\Adobe Flash Builder 4.5\sdks\air3.0r1\lib\win

DLLの作成
1.Win32プロジェクトを選択後、アプリケーションの種類からDLLを選択します。

2.プロジェクト名は、ANEConnectで作成します。

3.ソリューションエクスプローラより、FlashRuntimeExtensions.hFlashRuntimeExtensions.lib
インクルードします。

4.stdafx.hに#include "FlashRuntimeExtensions.h"をインクルードします。
// stdafx.h : 標準のシステム インクルード ファイルのインクルード ファイル、または
// 参照回数が多く、かつあまり変更されない、プロジェクト専用のインクルード ファイル
// を記述します。
//

#pragma once

#include "targetver.h"

#define WIN32_LEAN_AND_MEAN             // Windows ヘッダーから使用されていない部分を除外します。
// Windows ヘッダー ファイル:
#include <windows.h>

// TODO: プログラムに必要な追加ヘッダーをここで参照してください。
#include "FlashRuntimeExtensions.h"


5.dllmain.cppに処理を記述します。
// dllmain.cpp : DLL アプリケーションのエントリ ポイントを定義します。
#include "stdafx.h"

#include <stdlib.h>
#include <string.h>

extern "C" __declspec(dllexport) void ExtInitializer(
    void** extDataToSet,
    FREContextInitializer* ctxInitializerToSet,
    FREContextFinalizer* ctxFinalizerToSet
);
 
extern "C" __declspec(dllexport) void ExtFinalizer(
    void* extData
);

void ContextInitializer(
    void* extData,
    const uint8_t* ctxType,
    FREContext ctx,
    uint32_t* numFunctionsToTest,
    const FRENamedFunction** functionsToSet
);

void ContextFinalizer(FREContext ctx);

FREObject getParameter(
    FREContext ctx,
    void* funcData,
    uint32_t argc,
    FREObject argv[]
);

BOOL APIENTRY DllMain( HMODULE hModule,
                       DWORD  ul_reason_for_call,
                       LPVOID lpReserved
      )
{
 switch (ul_reason_for_call)
 {
 case DLL_PROCESS_ATTACH:
 case DLL_THREAD_ATTACH:
 case DLL_THREAD_DETACH:
 case DLL_PROCESS_DETACH:
  break;
 }
 return TRUE;
}

__declspec(dllexport) void ExtInitializer(
    void** extDataToSet,
    FREContextInitializer* ctxInitializerToSet,
    FREContextFinalizer* ctxFinalizerToSet
) {
    *extDataToSet = NULL;
    *ctxInitializerToSet = &ContextInitializer;
    *ctxFinalizerToSet = &ContextFinalizer;
}

__declspec(dllexport) void ExtFinalizer(void* extData) {
    return;
}

void ContextInitializer(
    void* extData,
    const uint8_t* ctxType,
    FREContext ctx,
    uint32_t* numFunctionsToTest,
    const FRENamedFunction** functionsToSet
) {
    *numFunctionsToTest = 1;
 
    FRENamedFunction* func =
       (FRENamedFunction*)malloc(sizeof(FRENamedFunction)*1); 
 
    func[0].name = (const uint8_t*)"getParameter";
    func[0].functionData = NULL;
    func[0].function = &getParameter;
 
    *functionsToSet = func;
}

void ContextFinalizer(FREContext ctx) {
 return;
}

FREObject getParameter(
    FREContext ctx,
    void* funcData,
    uint32_t argc,
    FREObject argv[]
) {
 FREObject retObj;
 FREResult result;
 uint32_t len;
 const uint8_t* message;
 char sendMessage[128] = "ANEConnect from ";

 len = strlen((const char*)argv[0])+1;
 result = FREGetObjectAsUTF8(argv[0],&len,&message);
 
 strcat_s(sendMessage,128,(const char*)message);

 FRENewObjectFromUTF8(128,(const uint8_t*)sendMessage,&retObj);

 return retObj;
}

6.ソリューションのビルドを行い、ANEConnect.dllを作成します。

ANEの概要とサンプルアプリ

ANEの概要
ASからネイティブコードで実装された関数の呼び出しやネイティブコードからASオブジェクトへのアクセスが
可能になります。

サンプルアプリの内容
1.上のテキストに文字を入力します。
2.下のgoボタンを押すとANEを利用してDLL内の処理を行います。
3.その結果を下のテキストに表示します。


動作環境
Windows XPのみで、動作の確認をしています。

ActionScript Native Extensionsのサンプルアプリ作成

AIR3 RC1(3.0.0.388)で動作するANEのサンプルアプリを作りましたので、まとめておきます。
サンプルアプリ作成に焦点を置いて公開していますので
技術仕様は下の参考にさせて頂いたホームページをご覧下さい。

注意
この作成手順は2011年9月時点のものです。今後も仕様変更の可能性があります。
ソースと関連ファイルの使用結果について、一切の保証と責任は負いません。

参考にさせて頂いたホームページ
Extending Adobe AIR(リンク先へ)
akihiro kamijo(リンク先へ)
Akabana(リンク先へ)
ライブラリファイル(*.lib)の参照設定方法(リンク先へ)
ネイティブとAIRを連携する方法、使用するメソッドが書かれているpdfドキュメント(リンク先へ)

I made a sample application of ActionScript Native Extensions
AIR3 RC1 (3.0.0.388) has a built in
Sorry Japanese text only