SSブログ

Apache Flex 4.10.0 + AIR3.9Beta + FB4.7(Mac編) [Flex]

久しぶりのアップです。
Apache Flexも4.10にアップされていたようですね。
今回のアップでインストールがさらに楽になりました。

(1)Apache Flex 4.10.0インストール
Apache Flex Installerをダウンロードします。
20100201.png

ダウンロードしたファイルを実行します。
もし古いバージョンがインストールされているときは
先に古いSDK Instller削除してから実行してください。

20100202.png

インストールしたいFlex SDK,AIR,Flash Playerのバージョンを選択します。
今回は最新のFlex SDK 4.10.0,AIR 3.9,Flash Player 11.9を選択して
インストールしてみました。

AIR 3.9はまだβ版なので今日時点だとほかの人に開発したアプリを配布するならば
まだAIR3.8がいいですかね。

(2)Flash Builderの設定
Flash Builderのコンパイル設定でインストールしたFlex SDKを設定します。
20100207.png
これだけで設定は終わりです。

そういえばTlemetryがFlexでも使えるようになったみたいですね。
Adobe Scout でプロファイリングするときに詳細な解析できるようになった?

有効にするときはFlexコンパイラーの設定項目の
追加コンパイルオプションに以下を設定してください。
-advanced-telemetry

(3)Macでのリリースビルドのやり方
そういえばFlash Builder4.7になってからWindows版だとうまくいくのに
Mac版だとリリースビルドしようとすると電子署名がでなくて困ってしまいますよね。

20100208.png

今まで、adtコマンドでたたいてやるとかしていましたが面倒ですよね。
いつ直るかまっていましたが、いいやり方を発見しました。

今までメニューにあるリリースビルドのアイコンやプロジェクトリリースビルドの
エクスポートでやっていました、これだと電子証明書がでてこない。

で、新しいやり方は、ビルドするプロジェクトファイルを選択して
右クリックでエクスポートを選択します。

20100203.png

次にFlash Builderのリリースビルドを選択します。

20100204.png

その後、コンパイルされ、その次にあら不思議、電子署名の入力画面がでます。

20100205.png

これでadtコマンドをたたなくてもリリースビルドできるようになりました。

(4)Youtub Player 'Mu' Serrisaでの確認
新しい環境で次期版の'Mu' をコンパイル、実行してみました。
エラーもなくコンパイル、実行できました。

20100206.png

AIR3.9の正式版でたらそろそろSerrisaも正式版として公開しようかなぁ〜

Apache Flex 4.9.1 + AIR3.8Beta + FB4.7(アップデート編) [Flex]

AIR3.8βがでていたのでFlash Builder4.7環境(Flex)に入れてみた。

Flex環境はApache Flex4.9.1をベースにします。
確かAIR3.7+Apache Flex4.9.1うまくいかなかったような気がしますが
いつものやり方でトライしてみます。以下はOSX環境です。

(1)AIR3.8Beta SDKファイルダウンロード
Adobe Labs DownloadsからSDKファイルをゲットします。
SDKファイルが通常のSDKファイルとFlex用SDKファイルは分かれているもよう。
AIR 3.8 SDK for Flex Developersのファイルair3-8_sdk_sa_mac.tbz2をダウンロード
AIR3.8B_SDK_FLEX.png

(2)SDKファイルの作成
Apache Flex4.9.1のSDKフォルダをAIR3.8β用にコピーします。
今回、ApacheFlex4.9.1+AIR3.8Bとして作成
次にダウンロードしたファイルを作成したApacheFlex4.9.1+AIR3.8Bフォルダーに解凍します。

cd ApacheFlex4.9.1+AIR3.8B2
sudo tar jxvf air3-8_sdk_sa_mac.tbz2

(3)コンパイル環境設定
Flash BuilderのFlex SDKの設定画面でApacheFlex4.9.1+AIR3.8Bを選択し、
Flexアプリのapplication xmlファイルとコンパイルオプションを変更します。

application xmlns="http://ns.adobe.com/air/application/3.8"
-swf-version=21

(4)コンパイルしてアプリで試してみる。
Youtube Player 'Mu' 次期バージョンSerissaで試してみた。
一応コンパイルは通ったので、実行してみました。
Apache Flex4.9.1+AIR3.7のときはs:stageとか他にもエラーがでていましたが
AIR3.8βでは、すんなりコンパイルが通りました。
だからかは知りませんが、AIR3.8からFlex用にSDK分かれたのかなぁ〜 [わーい(嬉しい顔)]

Serissaの実行画面。Flash Player Versionも11,8,800,80でよさそうですね。
Serisa_AIR3.png

これでAIR3.8β環境構築おしまいです。簡単ですね。[手(チョキ)]

そうだやろうと思って後回してにしていた'Mu'のスペクトラムアナライザ
MessageChannel や SharedProperty方式だったので
Woker間での ByteArray オブジェクトの共有試してみよう。

Twitter API1.1対応 AS3版 [Flex]

まだ使えているようだけど、Twitter API1.0そろそろまずいか?

とりあえず、Youtube Player 'Mu' Serissaの方でAPI1.1にしてみるか。

変更点の覚書

1.APIのバージョン変更
 https://api.twitter.com/1https://api.twitter.com/1.1

2.リクエストURLのxmlをjsonに変更
 /statuses/home_timeline.xml→/statuses/home_timeline.json
他多数

3.取り出しデータXML形式からJSONに変更
 定番のas3corelibを使おうと思ったけど、そういえばネイティブのJSONあったよな
 これを使うことにした。意外に簡単にxmlのソースをJSON化できた。
 
 元のXML DataParserクラス
        public static function parseUserInfo(xml:XML):Array
        {
            var statusData:StatusData;
            var userData:UserData;
            var extendedData:ExtendedUserData;
            var array:Array = [];
            var list:XMLList = xml..user;
            var n:Number = (list.length() == 0) ? 1 : list.length();
            for (var i:Number = 0; i < n; i++)
            {
                var node:XML = (n > 1) ? list[i] as XML : xml;
                if (node.id.toString() == "")
                    node = list[i] as XML;
                if (node)
                {
                    statusData = new StatusData(node.status.created_at,
                                         node.status.id,
                                                          :
                                                          :

 JSONに変更したDataParserクラス
		public static function parseUserInfo(json:Object):Array
		{
			var array:Array = new Array();
			var parseData:Object = JSON.parse(String(json));
			var statusData:StatusData;
			var userData:UserData;
			var extendedData:ExtendedUserData;
			statusData = new StatusData(parseData.status.created_at,
				parseData.status.id,
                                                          :
                                                          :


Twitter APIで取り出されたJSON形式のデータはparseでデシリアライズして
var parseData:Object = JSON.parse(String(json));
簡単にデータ取り出せた。


Adobe AIRアプリのアンインストール [Flex]

Windows8のUI変わってしまって、まだ慣れない。

Serissaテストのため、古いバージョン消そうとしたんだけど
コントロールパネルはどこだ・・・

【覚書】〜Adobe AIRアプリの消し方〜

Windows8のスタート画面から消したいアプリを右クリック
uninstall01-01.png
するとアプリにレ点が付いて、下の方にアンインストールの文字がでる。
これをクリックするとアプリ消えるんだなぁと思ってクリックすると・・・・
なんだコントロールパネルのアプリアンインストール画面がでるだけじゃん。

uninstall01-02.png
どんなインターフェースなんだ、WIndows8は・・、面倒だな。

アンインストールしたいアプリをコントロールパネル上で選んで、
今度こそアンインストール。アンインスールの文字をクリック。
アンインストールが開始された。

おそらく、普通はコントロールパネルださないで、即アンインストールプログラムが
動くんじゃないかなぁ、ですよね。普通こんなインターフェースつくりませんよね。
Adobe AIRアプリはだめなのかなぁ〜

ちなみにOSXの場合は、プログラムファイルの中から消したい
アプリを選択してゴミ箱に入れるだけ。手の動作は1.2.3でやりたいことができます。
uninstall02.png

こっちのほうが、私には直感的で使いやすい。

ActionScript Worker (Flash Player マルチスレッド) [Flex]

Flash Builder4.7+Apache Flex4.9+FP11.4でマルチスレッドを試してみた。

Music Playerのスペクトラムイコライザーの計算部分を別スレッドにしてみた。

スクリーンショット 2013-02-17 12.00.38.png

Flash BuilderでまずFlexプロジェクトを作成する。
次にファイル−新規−ActionScriptワーカで子スレッド用クラスを作成する。
このときに子スレッドとのやり取りするWorkersクラスが自動で作成される。

こちらが子スレッドとして動作するMuWorkerクラス
package info.akiboi.worker
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.system.MessageChannel;
	import flash.system.Worker;
                                 :	
	public class MuWorker extends Sprite
	{
		private var commandChannel:MessageChannel;
		private var resultChannel:MessageChannel;
		private var _snd:SoundData;
		public function MuWorker()
		{
			super();
			initialize();
		}
		
		private function initialize():void
		{
			// Get the MessageChannel objects to use for communicating between workers
			// This one is for receiving messages from the parent worker
			commandChannel = Worker.current.getSharedProperty("incomingCommandChannel") as MessageChannel;
			commandChannel.addEventListener(Event.CHANNEL_MESSAGE, handleCommandMessage);
			resultChannel = Worker.current.getSharedProperty("resultChannel") as MessageChannel;
                                 :	
		}        
		private function handleCommandMessage(event:Event):void
		{
			if (!commandChannel.messageAvailable)
				return;
			//Objectでメインスレッドからのメッセージを受け取とる
			var obj:Object = commandChannel.receive() as Object;
        //子スレッド処理
                                 :	
        //子スレッド処理終了したらメインスレッドにメッセージを送る
       result:Object = new Object();
                                 :	                 
			resultChannel.send(result);
			}
		}
	}
}


上記子スレッドのクラスを作成すると以下のWorkersクラスファイルが作成されます。
必要な処理を追記します。

package 
{
	
	import flash.events.Event;
	import flash.system.MessageChannel;
	import flash.system.Worker;
	import flash.system.WorkerDomain;
	import flash.system.WorkerState;
                                 :		
	public class Workers
	{
		private var bgWorker:Worker;
		private var bgWorkerCommandChannel:MessageChannel;
		private var resultChannel:MessageChannel;
		
                                 :	
		public function Workers() {
			initialize();
		}

		//子スレッド、メッセージのチャンネル作成して子スレッド起動
		private function initialize():void
		{
			// Register the alias so we can pass CountResult objects between workers
			
			// Create the background worker
			bgWorker = WorkerDomain.current.createWorker(info_akiboi_worker_MuWorker);
			
			// Set up the MessageChannels for communication between workers
			bgWorkerCommandChannel = Worker.current.createMessageChannel(bgWorker);
			bgWorker.setSharedProperty("incomingCommandChannel", bgWorkerCommandChannel);
			
			resultChannel = bgWorker.createMessageChannel(Worker.current);
			resultChannel.addEventListener(Event.CHANNEL_MESSAGE, handleResultMessage);
			bgWorker.setSharedProperty("resultChannel", resultChannel);
			
			// Start the worker
			bgWorker.addEventListener(Event.WORKER_STATE, handleBGWorkerStateChange);
			bgWorker.start();
		}
		
     //メインタスクからの子スレッドにメッセージ送信するメソッド`
     // Main -> Workders -> 子レッド
		public function sendMessage(obj:Object):void
		{
			bgWorkerCommandChannel.send(obj);
		}
		
     //子スレッドのステータスをリスナしておきここで受け取る
		private function handleBGWorkerStateChange(event:Event):void
		{
			if (bgWorker.state == WorkerState.RUNNING) 
			{
        //例 子スレッドが準備できたことをカスタムdispatcherでMainに通知している例
				_dispatcher.muWorkerAPI(EventConst.WORKER_READY,"",true,null);
			}
		}
		
               //子スレッドからメッセージが送信されたら行う処理
		private function handleResultMessage(e:Event):void
		{
        //子スレッドからresultChannelを通して結果を受け取る。
			var result:Object = resultChannel.receive() ;

          //例 子スレッドから結果をカスタムdispatcherを使ってMainに返す
			_dispatcher.muWorkerAPI(result.action,result.msg,result.err,result.obj);
		}
		
     //FBでActionScriptワーカクラスを作成するとこのWorkersクラスが自動作成され、以下のようなマッピング情報が書き込まれます。
		[Embed(source="../workerswfs/info/akiboi/worker/MuWorker.swf", mimeType="application/octet-stream")]
		private static var info_akiboi_worker_MuWorker_ByteClass:Class;
		public static function get info_akiboi_worker_MuWorker():ByteArray
		{
			return new info_akiboi_worker_MuWorker_ByteClass();
		}
		
	}
}

あとは、必要な処理をメインクラスにWorkersクラスをコントロールする処理を追加。

コンパイルは、オプションに-swf-version=17を追加してコンパイル。

子スレッドで他にいくつか処理をやってみたが使えるものが限定されるもよう。
サーバとのやり取りをすると今まで出なかったクロスドメインセキュリティの
エラーがでてしまう。

コントロールできるサーバはcrossdomain.xmlを作成して対処したが
YouTube APIはcrossdomain.xmlが読めてもAPIが拒否されてしまう。
もうちょとよく見ないと・・・

単純な負荷がかかる計算処理などは子スレッドに任せるのはできそう。
あとは通信系が子スレッドにもっていけるといいのになぁ

今回はActionScriptマルチスレッドの仕様よくみないでヘルプのサンプルみて作成。
シリアライズとかJavaでのスレッド鉄則の7パターンでのクラス作成みたいなことは
考えないで単純なやり方で実装。
マルチスレッドは非同期なので乱用は注意しないとね。

Apache Flex 4.9.0 + AIR3.6Beta + FB4.7(インストール編) [Flex]

自宅に戻ったので最新のFlex、AIR、FlashBuilderに
アップデートして遊んでみた。

以下覚書

(1)Flash Builder4.7インストール
 デザインビューが4.7から無くなっているとのこと。(´・ω・`)
 FB4.6とは別にインストールする。
 FB4.5,4.6からは無償アップデートできるがシリアルナンバが使えないぽい
 以下から無償アップグレード シリアル番号申請するらしい。
 
 とりあえず、体験版をダウンロードしてインストール。

(2)AIR3.6Betaのインストール
 Adobe LabsからAIR 3.6 Betaをダウンロード
 今回は、Windows版とAndroid版。

lab001.png
 
 PlayストアにあるAdobe AIRは、3.1だったのでAndroid版もここからダウンロード

 Android携帯へのインストールは、USBケーブルをPCに接続してダウンロードした
 APKファイルをコピーして、Android携帯でAPKファイルタップしてインストール
 
(3)AIR3.6 SDKイントール
 Adobe LabsからAIR 3.6 SDK BetaをダウンロードしてFBから使うためのフォルダに展開
 今回は、フォルダー名を\flexSDK\Apache Flex 4.9.0+AIR3.6とした。

lab002.png

(4)Apache Flex 4.9.0ファイルダウンロード
 Download Apache Flexページからbinary版をダウンロード

lab003.png 
 
(5)Flex SDK作成(Apache Flex 4.9.0 + AIR3.6 SDK)
 ダウンロードしたApache Flex 4.9.0を解凍してAIR3.6SDKフォルダーに
 上書き保存する。
 
 Flash Builderでコンパイルするとairglobal.swcが読めないと怒られるので
 frameworksフォルダにあるair-config.xmlとairmobile-config.xmlを修正します。

{airHome}/frameworks/libs/air → libs\air
 
(6)Flash Builderで確認
 インストールしたFB4.7を立ち上げます。
 [新規]-[Flexモバイルプロジェクト]を選択し、Flex SDKの設定画面から
 作成したSDKを選択します。

lab004.png
 Flex SDKの場所に作成したSDKのフォルダを選択します。
 Flex SDKの名前がApache Flex 4.9.0 FP11.1 en_USと表示。

 私の場合、FPのバージョン11.6(\frameworks\libs\player\11.6\playerglobal.swc)
 なので、名前をApache Flex 4.9.0 + AIR3.6 + FP11.6に変更し登録。

 SDKを追加できたので、特定のSDKを使用するで、Apache Flex 4.9.0 + AIR3.6 + FP11.6を選択

 次へをクリックして、ターゲットプラットフォームをGoogle Androidを選択し
 ビューペースアプリケーションを選択して終了ポタンをクリックします。

 これでエラーなどなければ、[実行]-[デバッグ]でデバッグを実行します。

lab005.png
 Android携帯をUSBで接続、設定画面で起動方法を「デバイス上」、
 ビルドターゲットを「device」に設定しデバッグボタンをクリック
 
 携帯でHomeViewの画面がでれば成功です。
lab006.png


追記)
上記環境でもう少し実用的なものとしてYouTube クライアントを作ってみた。floretDemo004.png

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。