SQLの窓

2012年07月15日


Android Flex : FLARToolkit を Flex4(AIR) を使って Android にのっけてみました。





動くとは思っていましたが、実機がテスト専用に買った RStream A1 なのでかなりレスポンスが悪かったです。最初、PC の同じ大きさ(320x240)で処理して見事に固まってしまいましたが、半分のサイズにする事でなんとか(コマ送り状態ですが)動作確認できました(Android は 2.2.2 です)

バッケージの中にあるデータは sdcard にコピーして使用します。dae のデータはインターネット経由でも動く事は解っているのですが、なにせ遅い(トラブルは避けたい)のでローカルで読み込んでいます。



本当は、実機側でシャッター押して画像化(あるいは動画化)したいところですが、それはまた個別にやらないと整理が付かないのです。









Flex4 でやる事のメリットは、3D に限らず大きいと思います。Java だけでやろうとするとやたらと面倒な事が、Flex4 ではいとも簡単にできます。反面、Native でないとできない事も多いので、その解決方法もいろいろ補充しましたので近いうちにまとめる予定です。

★ 以下はその基本部分のまとめです。

AIR Native Extentions for Android のフルコマンドラインビルド


関連する記事

7,980円の Rstream A1 をソフマップで買っちゃいました
Adobe AIR 3 が動く Android が 2.2 以降なので、動作確認用に買った Rstream A1 をバージョンアップしないといけない

Android の為の AIR Flex 基本 List で Web からデータ取得



posted by lightbox at 2012-07-15 01:00 | Flex | このブログの読者になる | 更新情報をチェックする

2012年07月04日


Android Flex : AIR Native Extentions for Android のフルコマンドラインビルド



Toast の表示と、ブラウザを開く処理とバージョン文字列の取得



※ 一括バッチを追加しました
cd java
call build
if ERRORLEVEL 1 goto proc_exit1
cd ..

cd ane
call build
if ERRORLEVEL 1 goto proc_exit2
cd ..

call setlib
echo library.swf を配置しました

call build_ane

call build
if ERRORLEVEL 1 goto proc_exit3

call inst

goto proc_normal

:proc_exit1
cd ..
echo java のビルドで失敗しました
goto proc_normal

:proc_exit2
cd ..
echo ane のビルドで失敗しました
goto proc_normal

:proc_exit3
echo 本体 のビルドで失敗しました
goto proc_normal


:proc_normal


Eclipse は必要ありません。Java の SDK と、Flex の SDK (と、最新が必要なら AIR の SDK ) と、Android の SDK があればいいです。( ここでは厳密には、エミュレータのデバックとして処理してます。が、実機でもそのまま動くはずです )

とにかく、一度解ってしまえばコマンドラインでビルドしたほうが小回りが利きます。一連の流れがはっきりすると、swf の作成は -library-path+=lightboxANE.ane でいい事が解るし、つまり、ane ファイルがあって、使い方さえ解れば自由に使える事が解ります( ID は 解凍すれば extension.xml に書かれてますし )

※ とは言うものの、ane のダウンロードって殆ど見かけませんでした( 見つけたものは動作確認しました )

java のコード

これは、http://www.adobe.com/devnet/air/native-extensions-for-air.html にたくさんサンプルがあったのですが、一番簡単だと思われる 『Sharing/SMS/Toast』 を使いました( URL を開くのは少し変更 )

■ Java のソースコード

java フォルダに入って、jc.bat でコマンドラインを開いて、build.bat で jar を作成します
javac -cp C:\android\android-sdk-windows\platforms\android-10\android.jar;C:\AdobeAIRSDK\lib\android\FlashRuntimeExtensions.jar lightbox\ToastFunction.java lightbox\OpenURLFunction.java lightbox\AndroidExtensions.java
del ..\jar\ANElib.jar
jar cvf ..\jar\ANElib.jar lightbox\*.class 


ActionScript のコード

これも、『Sharing/SMS/Toast』のものです。ane フォルダに入って、android.bat でコマンドプロンプトを開いて build.bat を実行します。

■ ActionScript のソースコード

※ 注意するのは、java も ActionScript も同じパッケージ名にする事です
compc +configname=airmobile -source-path . -output ..\lightboxANE.swc -include-classes lightbox.AndroidExtensions lightbox.AndroidExtensionsEvent -swf-version 14
swc を解凍して jar\library.swf として配置

これは、仕様らしいのですが、自動的にやってくれないので自分でします。メインの android.bat を実行してコマンドプロンプトを開いて setlib.bat を実行します。

del jar\library.swf
jar xf lightboxANE.swc library.swf
move library.swf jar

lightboxANE.ane を作成

拡張用のライブラリですが、Flex側のコードをビルドする為のコードも格納されるので、本体のビルドもこのライブラリを使用します。

以下は、見やすくする為に改行を入れています
adt
 -package
 -storetype pkcs12
 -keystore lightbox.p12
 -storepass password
 -target ane lightboxANE.ane extension.xml
 -swc lightboxANE.swc
 -platform Android-ARM -C jar .


本体 Mainw.swf 作成

build.bat で swf が作成されます。この後は、Android 用のパッケージを作成してエミュレータに転送するのですが、それらの処理は inst.bat で行っています。ですから、inst.bat を実行する前に、エミュレータ起動 して、tools\ddms.bat 実行しておきます。

■ Android アプリ用の XML と、拡張用の XML

inst.bat の実行
call adt -package -target apk-debug -storetype pkcs12 -keystore lightbox.p12 -storepass password lightbox_1.apk Mainw.xml Mainw.swf winofsql.png -extdir .
call adt -uninstallApp -platform android -appid lightbox.androidtest
call adt -installApp -platform android -package lightbox_1.apk

SDK 類のパスはそれぞれの PC の環境によって変わりますが、基本 C ドライブのルートに展開しておけば、そのまま使えると思います。

関連する記事

コマンドラインで簡単に AIR アプリを Android エミュレータにインストールして実行
コマンドラインで、Android エミュレータで、dae の 3Dモデルを表示するパッケージ
Android の為の AIR Flex 基本 List で Web からデータ取得
AIR Native Extentions for Android なコマンドライン一覧


参考

ns.adobe.com/air/extension/2.5 > AIR 3+ > -swf-version 13
ns.adobe.com/air/extension/3.1 > AIR 3.1+ > -swf-version 14

らしいです。
( default は必要無いです。入れると余計面倒な仕様になってます )


posted by lightbox at 2012-07-04 01:56 | Flex | このブログの読者になる | 更新情報をチェックする

2012年06月23日


Android Flex : Android の為の AIR Flex 基本 List で Web からデータ取得

Google ドライブからダウンロード




モバイルの基本と思われる List なんですが、基本すぎるせいなのかちょっと探してもあまり良いサンプルが見つからなかったので、WEB Flex3 の内容を移植してみました。List の dataProvider に直接 XMLList をセットできないので変換しましたが、もともと DataGrid 用だったのでこの方法にしました。

List 内に画像も表示してみました



関連する記事

コマンドラインで、Android エミュレータで、dae の 3Dモデルを表示するパッケージ

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	title="最初のビュー"
	creationComplete="initView();"
>

<fx:Script>
<![CDATA[

	// LogCat 出力用
	import mx.logging.targets.*;
	import mx.logging.*;

	// List 用
	import spark.events.IndexChangeEvent;

	// http サーバー関連
	import mx.collections.ArrayList;
	import mx.rpc.AsyncToken;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;

	// LogCat
	private var logger:ILogger = Log.getLogger("MyLogger");

	// *****************************************************
	// 初期処理
	// *****************************************************
	public function initView():void {

		// ログ出力準備
		var traceTarget:TraceTarget = new TraceTarget();
		traceTarget.level = LogEventLevel.ALL;
		traceTarget.filters = ["*"];
		traceTarget.includeDate = false;
		traceTarget.includeTime = false;
		traceTarget.includeLevel = false;
		traceTarget.includeCategory = false;
		Log.addTarget(traceTarget);

	}

	// *********************************************************
	// データを WEB から追加
	// *********************************************************
	public function loadData():void {

		logger.info( "ボタンが押されました" );

		srv.url = "http://homepage2.nifty.com/lightbox/data/list.xml";

		// レスポンス結果のデータフォーマット
		srv.resultFormat = "e4x";
		
		srv.method = "GET";
		
		// リクエストを実行
		var at:AsyncToken = srv.send();


	}


	// *********************************************************
	// リストを選択
	// *********************************************************
	public function myChangedHandler(event:IndexChangeEvent):void {

		// 本来は複数選択用
		var selIndices:Vector.<int> = event.currentTarget.selectedIndices;
		logger.info( selIndices[0].toString() );
		var selItems:Vector.<Object> = event.currentTarget.selectedItems;
		logger.info( selItems[0].toString() );

		// 単体
		logger.info( event.currentTarget.selectedItem.toString() );
		logger.info( event.newIndex.toString() );

	}

	// *****************************************************
	// HTTPServiceが成功
	// *****************************************************
	private function resultHandler(e:ResultEvent):void
	{
		var dataSet:ArrayList = null;

		var aData:Array = new Array();
		for each(var xmlData:XML in e.result.row.name ) {
			aData.push(xmlData);
		}

		dataSet = new ArrayList(aData);
		base.dataProvider = dataSet;

	}
	
	// *****************************************************
	// HTTPServiceでエラーが発生した
	// *****************************************************
	private function faultHandler(e:FaultEvent):void
	{
		logger.info("HTTPService失敗\n\n理由 : " + e.fault.message);
	}

]]>
</fx:Script>
<fx:Declarations>
<mx:HTTPService id="srv" showBusyCursor="true"
		 result="resultHandler(event)"
		 fault="faultHandler(event)" />
</fx:Declarations>

	<s:Button
		x="42" y="27"
		width="131" height="60"
		label="ロード"
		click="loadData()" />

	<s:BorderContainer
		width="100%"
		height="100%"
		y="100"
	>
		<s:List
			id="base"
			width="100%"
			height="100%"
			change="myChangedHandler(event);" 
		>
			<mx:ArrayCollection>
				<fx:String>固定リストデータ1</fx:String>
				<fx:String>固定リストデータ2</fx:String>
				<fx:String>固定リストデータ3</fx:String> 
				<fx:String>サンプル通り</fx:String> 
			</mx:ArrayCollection>
		</s:List>
	</s:BorderContainer>


</s:View>


itemRenderer の中からのイベント処理です。
( ※ 昔と同じでトップを参照するしか方法を見つけられませんでした )

Mainw.mxml
startview.mxml

XML に アイコンの URL を含めるようにしました。


タグ:android AIR
posted by lightbox at 2012-06-23 21:34 | Flex | このブログの読者になる | 更新情報をチェックする

Android Flex : コマンドラインで、Android エミュレータで、dae の 3Dモデルを表示するパッケージ



dae は、Papervision3D の 事実上の最終バージョンである Papervision3D_2.1.932.swc を同梱しています(もちろんオリジナルのソースコードも)。 他に必要なのは、android の SDK と Flex4 の SDK です( android ランタイムを最新にするなら、AIR の SDK ) ※ 以下を参考にして下さい コマンドラインで簡単に AIR アプリケーションを Android エミュレータにインストールして実行 さらに、AIR のランタイムを エミュレータにインストールする必要があるので、こちらを参照して下さい エミュレータと ddms を起動する エミュレータの構築は先にすませておいて、android の SDK フォルダである android-sdk-windows 内の AVD Manager.exe を実行してエミュレータが完全に起動するのを待って、アプリの一覧を表示します その後、tools フォルダの中の ddms.bat を実行して、デバイスをクリックして選択し、LogCat を選択してログが出力されているのを確認します( ここをクリックしないと新しいログが表示されません ) 何かする前には、LogCat をクリックしてログを削除しておいたほうがいいです。以下は、dae ロードした時のログを選択して外部出力したものです
06-23 08:39:37.777: I/air.lightbox.androidtest(528): INFO: Papervision3D 2.0.0 (March 12th, 2009)
06-23 08:39:37.777: I/air.lightbox.androidtest(528):  
06-23 08:39:38.017: I/air.lightbox.androidtest(528): INFO: Viewport autoScaleToStage : Papervision has changed the Stage scale mode. 
06-23 08:39:46.426: I/air.lightbox.androidtest(528): ロードボタンが押されました
06-23 08:39:46.436: I/air.lightbox.androidtest(528): file:///mnt/sdcard/eyes.dae
06-23 08:39:48.046: I/dalvikvm(528): Jit: resizing JitTable from 512 to 1024
06-23 08:39:50.696: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: COLLADA_Scene 
06-23 08:39:50.706: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: eyes_mqo 
06-23 08:39:50.726: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: eye 
06-23 08:39:51.096: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: Lamp 
06-23 08:39:51.107: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: Camera 
06-23 08:39:51.146: I/air.lightbox.androidtest(528): LOAD_COMPLETE
06-23 08:39:56.616: I/air.lightbox.androidtest(528): ロードボタンが押されました
06-23 08:39:56.626: I/air.lightbox.androidtest(528): file:///mnt/sdcard/eyes.dae
06-23 08:40:00.347: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: COLLADA_Scene 
06-23 08:40:00.347: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: tensi 
06-23 08:40:00.777: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: Lamp 
06-23 08:40:00.787: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: Camera 
06-23 08:40:00.797: I/air.lightbox.androidtest(528): LOAD_COMPLETE

何か問題があれば、Log にヒントが出力されるはずですから、コードを function 単位で追えるように工夫しておくといいと思います。

次に、パッケージの android.bat の中の Flex4 の SDK の位置を自分の環境と一致させて、android.bat を実行します。( このコマンドプロンプト内で全て処理します )

1) ソースコードを修正した場合は、build.bat で swf を作成
2) inst.bat で apk パッケージを作成してエミュレータにインストール

この繰り返しのみで処理します。certificate.bat は証明書の作成ですが、テストだけなら同梱されたものでかまいません。アプリがある特定のユーザによって作られたかどうかの同一性をチェックするのが目的なので、アプリのダウンロード管理システムへの更新時にしか必要ありません。

処理部分の詳細コード

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
	title="最初のビュー"
	creationComplete="initView();"
>

<fx:Script>
<![CDATA[

	// LogCat 出力用
	import mx.logging.targets.*;
	import mx.logging.*;

	//papervision3Dクラス
	import org.papervision3d.materials.*;
	import org.papervision3d.view.*;
	import org.papervision3d.objects.primitives.*;
	import org.papervision3d.core.utils.*;
	import org.papervision3d.objects.parsers.*;
	import org.papervision3d.events.FileLoadEvent;
	import org.papervision3d.materials.special.CompositeMaterial;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.core.geom.TriangleMesh3D;
	import org.papervision3d.events.*;

	// 3D 空間
	private var view3D:BasicView;
	private var dae:DAE = null;
	private var lcnt:int = 0;

	// LogCat
	private var logger:ILogger = Log.getLogger("MyLogger");

	// *****************************************************
	// 初期処理
	// *****************************************************
	public function initView():void {

		// ログ出力準備
		var traceTarget:TraceTarget = new TraceTarget();
		traceTarget.level = LogEventLevel.ALL;
		traceTarget.filters = ["*"];
		traceTarget.includeDate = false;
		traceTarget.includeTime = false;
		traceTarget.includeLevel = false;
		traceTarget.includeCategory = false;
		Log.addTarget(traceTarget);

		// 3D空間作成
		view3D = new BasicView();
		// 背景色
		view3D.opaqueBackground = 15247823;

		// SpriteVisualElement に追加
		base.addChild(view3D);

		// カメラの初期位置
		// ( 全て 0 だと LookAT エラー )
		view3D.camera.z = -5;	
		view3D.camera.x = 0;	
		view3D.camera.y = 0;

		// 画面が小さいので、遠近法は使わない
		view3D.camera.ortho = true;
		view3D.camera.orthoScale = 80;	// これで対象の大きさを決定

		// 描画開始
		view3D.startRendering();

	}

	// *********************************************************
	// 3D モデルを WEB から追加
	// *********************************************************
	public function loadData():void {

		logger.info( "ロードボタンが押されました" );

		// sdcard に置く場合は、file.url をロードに使用します
		var file:File = File.userDirectory.resolvePath("eyes.dae");
		logger.info( file.url );

		// 3D モデル作成
		if ( dae != null ) {
			view3D.scene.removeChild( dae );
		}
		dae = new DAE();

		if ( lcnt % 2 == 0 ) {
			dae.load("http://homepage2.nifty.com/lightbox/data/eyes.dae");
		}
		else {
			dae.load("http://homepage2.nifty.com/lightbox/data/tensi.dae");
		}
		dae.addEventListener(FileLoadEvent.LOAD_COMPLETE, function(e:Event):void{

			logger.info( "LOAD_COMPLETE" );

			try {

				// オブジェクトの位置
				dae.x = 0;
				dae.y = 0;
				dae.z = 0;

				// ラジアンでは無くそのまま-15度
				dae.rotationX = -15;
	
				dae.scale = 1;
	
				// 3D 空間に平面オブジェクトを追加
				view3D.scene.addChild( dae );

				lcnt++;
			}
			catch (error:Error) {
				logger.info(error.message);
			}

		});

	}

]]>
</fx:Script>

	<s:Button
		x="42" y="27"
		width="131" height="60"
		label="ロード"
		click="loadData()" />

	<s:BorderContainer
		width="100%"
		height="100%"
		y="100"
	>
		<s:SpriteVisualElement
			id="base"
			width="100%"
			height="100%"
		>
		</s:SpriteVisualElement>
	</s:BorderContainer>


</s:View>

データは WEB から読みだすようにしていますので、インターネット環境によってはうまくいかないかもしれません。その場合は、エミュレータの sdcard 内に保存して実行すると良いです( file.url を使う )

sdcard 内への保存は、ddms で device メニューから file エクスプローラを実行して mnt/sdcard を開いて push( ツールボタン) すれば良いです



※ eyes.dae と eyes.png は同梱しています( 元データは 光陰像型 さんのメタセコイアデータです )



posted by lightbox at 2012-06-23 17:59 | Flex | このブログの読者になる | 更新情報をチェックする

2012年06月20日


Android Flex : コマンドラインで簡単に AIR アプリケーションを Android エミュレータにインストールして実行

Android の SDK と、Flex4 の SDK が必要です。エミュレータは先に動くものを作っておきます。

結論から言うと、Flex を使うので Java は必要ですが、Eclipse は必要ありません。コマンドプロンプトから全て完結させます。今回は、Android 2.3.3 でテストしています。

エミュレータ起動

※ コマンドラインでデバイスを指定していないので、エミュレータの起動は一つだけにしてください。



AIR のランタイムをインストール

Flex4 の SDK に入ってるものでも、AIR の SDK に入っているものでもどちらでも構いません。
adt -installRuntime -platform android -package C:\flex_sdk_4.6\runtimes\air\android\emulator\Runtime.apk

adt -installRuntime -platform android -package C:\AdobeAIRSDK\runtimes\air\android\emulator\Runtime.apk



ソースコード

AIR のインストールができたら、アプリケーションのビルドですが、用意したソースは以下のようになっています。( UTF8N です )
Mainw.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	firstView="startview"
	applicationComplete="initApplication()"
>

<fx:Script>
<![CDATA[

	// *********************************************************
	// アプリケーションの初期化( 画面構築後 )
	// *********************************************************
	public function initApplication():void {


	}

]]>
</fx:Script>

	<s:navigationContent>
		<s:Button label="終了" click="NativeApplication.nativeApplication.exit()"/>
	</s:navigationContent>

</s:ViewNavigatorApplication>
startview.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
	title="最初のビュー"
	creationComplete="initView();"
>

<fx:Script>
<![CDATA[

	import mx.logging.targets.*;
	import mx.logging.*;

	private var logger:ILogger = Log.getLogger("MyLogger");

	public function initView():void {

		var traceTarget:TraceTarget = new TraceTarget();
		traceTarget.level = LogEventLevel.ALL;
		traceTarget.filters = ["*"];
		traceTarget.includeDate = false;
		traceTarget.includeTime = false;
		traceTarget.includeLevel = false;
		traceTarget.includeCategory = false;
		Log.addTarget(traceTarget);

	}

	// *********************************************************
	// アプリケーションの初期化( 画面構築後 )
	// *********************************************************
	public function checkText():void {

		intext.text = "ボタンが押されました";
		logger.info( "ボタンが押されました" );

	}

]]>
</fx:Script>

	<s:Label
		x="43" y="27"
		text="名前を入力して下さい" />

	<s:TextInput
		x="41" y="64"
		id="intext"
		width="300" />

	<s:Button
		x="42" y="150"
		width="131" height="60"
		label="Submit"
		click="checkText()" />

</s:View>
Mainw.xml
<?xml version="1.0" encoding="utf-8" ?> 
<application xmlns="http://ns.adobe.com/air/application/3.1"> 
	
	<id>lightbox.androidtest</id> 
	<versionNumber>1.0</versionNumber> 
	<filename>Android Test</filename> 
	<name>Android テスト</name> 

	<initialWindow> 
		<content>Mainw.swf</content> 
		<systemChrome>none</systemChrome> 
		<visible>true</visible> 
		<autoOrients>true</autoOrients>
	</initialWindow>
	<icon>
		<image48x48>winofsql.png</image48x48> 
	</icon> 

	<android> 
		<manifestAdditions> 
			<![CDATA[ 
				<manifest> 
					<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> 
					<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 
					<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
					<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> 
					<uses-permission android:name="android.permission.CAMERA" /> 
					<uses-permission android:name="android.permission.DISABLE_KEYGUARD" /> 
					<uses-permission android:name="android.permission.INTERNET" /> 
					<uses-permission android:name="android.permission.READ_PHONE_STATE" /> 
					<uses-permission android:name="android.permission.RECORD_AUDIO" /> 
					<uses-permission android:name="android.permission.WAKE_LOCK" /> 
					<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
				</manifest> 
			]]> 
		</manifestAdditions> 
	</android>

</application>
※ Android の permission は、沢山書いていますが検証していません。
一番目は、Mainw.mxml で二番目は startview.mxml です。Flex ではこのファイルがそのままクラスになるので、Mainw.mxml で、firstView に、startview と書かれています。ビューだけをフォルダにまとめればそのフォルダで参照する事になります( views なら、views.startview )
xml の二行目の 3.1 は、バージョンを示しているので環境または将来的にはこの値によってエラーになるかもしれません。その場合は、自分の使っているバージョンをチェックするか、世の中を調べましょう。3.1 は、Flex4 SDK の中のもので、AIR SDK は、3.3 が入っていました。Android には、3.3 を入れましたが動作しています。


コマンドプロンプトを開く

1) path=C:\flex_sdk_4.6\bin;%path%
2) prompt flex3$G
3) build.bat

build.bat の中身は以下のようになっています
call adt -certificate -cn lightbox 1024-RSA lightbox.p12 password
mxmlc +configname=airmobile Mainw.mxml
call adt -package -target apk-debug -storetype pkcs12 -keystore lightbox.p12 -storepass password lightbox_1.apk Mainw.xml Mainw.swf winofsql.png
call adt -uninstallApp -platform android -appid lightbox.androidtest
call adt -installApp -platform android -package lightbox_1.apk

lightbox.p12 は、名前はなんでもいいですし、毎回作る必要はありません。(パスワードはコマンドラインに書かなければ入力になります)
lightbox.androidtest は、アプリの ID になりますが、LogCat で表示されるのは、air.lightbox.androidtest となります
+configname=airmobile

※ adt で call を使っているのは、adt.bat だからです。

ddms 起動

Android SDK の、tools の中の ddms.bat を実行します。実行したら、左上のエミュレータを選択状態にして、LogCat が表示されるようにしておきます。この、LogCat に logger.info(); でログ表示が可能です。



実行


エミュレータからアイコンをクリックするだけです。このアイコンは、winofsql.png として apk パッケージの中に含めたものです。






タグ:android AIR
posted by lightbox at 2012-06-20 21:57 | Flex | このブログの読者になる | 更新情報をチェックする

2012年05月04日


★ 超シンプル FLV プレーヤー ★ / Adobe AIR Flex の簡単サンプル(コンソールビルドパッケージ)

Flex4 の SDK と Java の SDK があれば、テキストエディタだけで開発できます。
推奨エディタは MKEditor で、ビルドが簡単にできるようにプロジェクトしてあり
ます。

AIR は実際問題、配布パッケージを作成しないのであれば、AIR のランタイムは必
要ありません。

※ Java7 は、パッケージ作成時にエラーが出たので、Java6 が推奨環境です。

Flex3 の時に作成したものを flex_sdk_4.6 で動作するように調整しましたので、
Flex4 では、VideoPlayer というコントロールがあって、自前でコントロールする
必要は無いのですが、VideoDisplay で作成しています。その為、コントロールの
イベントやその他の実装のサンプルとしては解りやすいと思います。
( ▼ Flex3 のころの 記述を少しコメントで残しています )
// myVid.playheadUpdateInterval = 1;
// myVid.load();




▼ 実行画面


( ウインドウのサイズ変更は、右下の角をドラッグします )


MKEditotr で簡単に修正やビルドができます

http://www.mk-square.com/
▼
SOFTWARE => MKEditor for Windows => Download Information
▼
MKEditor for Windows Version 3.9.9-J



開発環境

1) Java6 ( Java7 では、パッケージ作成でエラーが出ます )
( SDK の bin ディレクトリを PATH 環境変数に設定する必要があります )
2) flex_sdk_4.6
( SDK の場所は、パッケージ内の設定ファイルに記述します / Java も OK )
3) Microsoft Visual C++ 2010 再頒布可能パッケージ (x86)
( 既にインストールされている場合は fcsh 実行時にエラーが出ません )

※ 日本語ドキュメントのダウンロードは公式では無いですが以下にあるようです
http://help.adobe.com/ja_JP/Flex/4.0/Flex_4_docs.zip
と言うか、以前は公式にリンクがあったのですが内容が古い為、公式なリンクが
消えているのが実情だと思います。過去にも何度かこういう事がありました。

Flex4 リファレンス : 日本語オンライン

その他のオンラインドキュメント

Adobe AIR
Android と iOS 用の設定
Flex3 日本語汎用マニュアル
Adobe Flex 4.6 英文マニュアル

関連する記事

ビルド手順(1) : コマンドプロンプトの設定
ビルド手順(2) : SDKの設定
ビルド手順(3) : コマンドプロンプトでビルド
デバッグ実行
デバッグ用ログ出力
Flex で定義されているスキンを使って『外観』をかっこよく
AIR アプリケーション記述ファイルについて
FLVプレーヤーをもっと簡単に。VideoDisplay を VideoPlayer に変更する
Spark のスキンを使った時のウインドウサイズ変更オペレーション

重要な公式テクニカルアーティクル

Flex 4 マスターシリーズ #04 Flex 4 CSS
Flex 4 マスターシリーズ #05 Spark コンポーネント
Flex 4 マスターシリーズ #07 Spark Skining part 1
Flex 4 マスターシリーズ #10 Flex 4 Spark Layouts


ソースコードを見る
posted by lightbox at 2012-05-04 23:00 | Flex | このブログの読者になる | 更新情報をチェックする

2011年06月20日


Flex4 : ローカルPCデータをテキストエリアにロード、テキストエリアの内容をローカルPC に保存



サンプルでは、Flex 内部のテキストエリアを使用していますが、Flex より
外部の JavaScript にアクセスする事によって、HTML 上にローカル PC の
ファイルの内容を利用する事ができます( 保存も同様です )

新規でテキストエリアに入力すると、改行コードが CR でした。HTML 側の
データを使う場合は、変換は必要無いと思います。

▼ クリックすると、実行ページが開きます

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	initialize="initData()"
	usePreloader="false"
>
<!--
***************************************************
 Flex4 における 絶対位置指定
*********************************************** -->
<s:layout>
	<s:BasicLayout />
</s:layout>

<!--
***************************************************
 現在のクラスの非デフォルト、非ビジュアルプロパ
 ティ を宣言します。例えば、効果、バリデーター、
 およびフォ ーマッターを定義します。
*********************************************** -->
<fx:Declarations>
</fx:Declarations>

<!--
***************************************************
 名前空間が必要になっています
 #id で個別設定が可能です
*********************************************** -->
<fx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace s "library://ns.adobe.com/flex/spark";

s|Button {
	color : #990000;
	font-size : 12;
}

</fx:Style>

<fx:Script>
<![CDATA[

	import mx.formatters.*;

	// HTTPService のイベント用
//	import mx.rpc.events.*;
	// Alert 用
	import mx.controls.*;

	// テキストファイルを読み込む為のオブジェクト
	private var fr:FileReference;

	// ファイル名をパネルのタイトルに表示する為の変数
	[Bindable]
	private var fname:String = "";

	// データ保存用
	import mx.graphics.codec.*;
	private	var png_enc:PNGEncoder;
	private var ba_data:ByteArray;
	private	var text_data:String;
	private var ctype:String = "utf-8";


	// *********************************************************
	// ログ表示
	// *********************************************************
	private function log(data:Object):void {

		// 日付編集用
		var fmt:DateFormatter = new DateFormatter();

		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );

		// JavaScript の呼び出し
		ExternalInterface.call(
			"console.log", logdt,
			" "+data
		);

	}

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	private function initData():void {

		// メッセージ
		log("initData() が実行されました" );

		Security.allowDomain("*");

		// ファイル読み込み用
		fr = new FileReference();
		// PNG 画像作成用
		png_enc = new PNGEncoder();


		// IO エラー
		fr.addEventListener(IOErrorEvent.IO_ERROR, 
			function (event:IOErrorEvent):void {
				Alert.show("IOError:" + event.text );
			}
		);

		// キャンセル
		fr.addEventListener(Event.CANCEL, 
			function (event:Event):void {
				Alert.show( "ファイル選択をキャンセルしました" );
			}
		);

		// ファイルが選択された
		fr.addEventListener(Event.SELECT,
			function (event:Event):void {
				log("ファイルが選択されました" );
				var file:FileReference = FileReference(event.target);
				fname = file.name;
				log("name : " + file.name );
				// 読み込み開始
				fr.load();
			}
		);

		// バイナリロード完了
		fr.addEventListener(Event.COMPLETE,
			function(event:Event):void {

				// ByteArray(バイナリ) を作成
				ba_data = ByteArray(fr.data);

				// ボタンによって、キャラクタセットを変更
				// ( バイナリより、テキストを読み込む )
				text_data = ba_data.readMultiByte(ba_data.length, ctype);

				// CRLF の場合、LF に変更
				var myPattern:RegExp = /\r\n/g;
				text_data = text_data.replace(myPattern,"\n");
				textCheck.text = text_data;

			}
		);

	}

	// *********************************************************
	// ファイル参照ダイアログを開く
	// *********************************************************
	private function selectFile():void {

		try {
			fr.browse();
		}
		catch (e:Error) {
			log(e);
		}

	}

	// *********************************************************
	// 保存
	// ※ テキストエリア内のテキストの直接保存
	// *********************************************************
	private function saveText():void {


		ba_data = new ByteArray();

		// テキストエリア内の文字列
		text_data = textCheck.text;

		// CR を CRLF に変更
		// デフォルト状態で入力すると、改行が \r になるようなので
		// どんな場合もいったん \r に変換してから、\r\n に再変換
		var myPattern:RegExp = /\r\n/g;
		text_data = text_data.replace(myPattern,"\r");
		myPattern = /\n/g;
		text_data = text_data.replace(myPattern,"\r");
		myPattern = /\r/g;
		text_data = text_data.replace(myPattern,"\r\n");

		ba_data.writeMultiByte( text_data, ctype );

		try {
			fr.save( ba_data, "save_data.txt" );
		}
		catch( e:Error ) {
			log( e );
		}

	}

	// *********************************************************
	// 保存
	// ※ Panel オブジェクト全体を画像として保存
	// *********************************************************
	public function saveImage2():void {

		// パネルサイズのビットマップデータを作成
		var bitmapData:BitmapData = new BitmapData(imagePanel.width, imagePanel.height);

		// 用意したビットマップデータにパネルを描画
		bitmapData.draw(imagePanel);

		// ビットマップデータを PNG に変換
		ba_data = png_enc.encode(bitmapData);

		// PNG バイナリ(ByteArray) を保存
		fr.save( ba_data, "save_panel.png" );

	}

]]>
</fx:Script>

<!--
***************************************************
 Flex4 における 絶対位置指定の画面定義
*********************************************** -->

<s:Button 
	id="loadButton1"
	x="10" y="10"
	width="140"
	label="UTF8N テキスト選択"
	click="ctype = 'utf-8';selectFile();"
/>

<s:Button 
	id="loadButton2"
	x="160" y="10"
	width="140"
	label="SJIS テキスト選択"
	click="ctype = 'shift_jis';selectFile();"
/>

<s:Button 
	id="saveButton"
	x="310" y="10"
	width="140"
	label="テキストファイル保存"
	click="saveText();"
/>

<s:Button 
	id="savePanelButton"
	x="460" y="10"
	width="120"
	label="Panel 保存"
	click="saveImage2();"
/>

<mx:Panel
	id="imagePanel"
	title="{fname}"
	x="10" y="40"
	paddingLeft="0"
	paddingRight="0"
	layout="absolute"
>
	<mx:TextArea
		x="0" y="0"
		id="textCheck"
		width="650"
		height="500"
	
	/>
</mx:Panel>

</s:Application>



posted by lightbox at 2011-06-20 02:48 | Flex | このブログの読者になる | 更新情報をチェックする

Flex4 : ローカルPC画像を Image オブジェクトにロード、Image オブジェクトに表示されている画像をローカルPC に保存



Image は、Panel 内に設置しているので、Panel ごと保存する方法も実装しています。

▼ クリックすると、実行ページが開きます

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	initialize="initData()"
	usePreloader="false"
>
<!--
***************************************************
 Flex4 における 絶対位置指定
*********************************************** -->
<s:layout>
	<s:BasicLayout />
</s:layout>

<!--
***************************************************
 現在のクラスの非デフォルト、非ビジュアルプロパ
 ティ を宣言します。例えば、効果、バリデーター、
 およびフォ ーマッターを定義します。
*********************************************** -->
<fx:Declarations>
</fx:Declarations>

<!--
***************************************************
 名前空間が必要になっています
 #id で個別設定が可能です
*********************************************** -->
<fx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace s "library://ns.adobe.com/flex/spark";

s|Button {
	color : #990000;
	font-size : 16;
}

</fx:Style>

<fx:Script>
<![CDATA[

	import mx.formatters.*;

	// HTTPService のイベント用
//	import mx.rpc.events.*;
	// Alert 用
	import mx.controls.*;

	// 画像ファイルを読み込む為の二つのオブジェクト
	private var fr:FileReference;
	private	var loader:Loader

	// 画像名をパネルのタイトルに表示する為の変数
	[Bindable]
	private var fname:String = "";

	// PNG 画像保存用
	import mx.graphics.codec.*;
	private	var png_enc:PNGEncoder;
	private var ba_data:ByteArray;


	// *********************************************************
	// ログ表示
	// *********************************************************
	private function log(data:Object):void {

		// 日付編集用
		var fmt:DateFormatter = new DateFormatter();

		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );

		// JavaScript の呼び出し
		ExternalInterface.call(
			"console.log", logdt,
			" "+data
		);

	}

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	private function initData():void {

		// メッセージ
		log("initData() が実行されました" );

		Security.allowDomain("*");

		// ファイル読み込み用
		fr = new FileReference();
		// Bitmap 変換用
		loader = new Loader();
		// PNG 画像作成用
		png_enc = new PNGEncoder();


		// IO エラー
		fr.addEventListener(IOErrorEvent.IO_ERROR, 
			function (event:IOErrorEvent):void {
				Alert.show("IOError:" + event.text );
			}
		);

		// キャンセル
		fr.addEventListener(Event.CANCEL, 
			function (event:Event):void {
				Alert.show( "ファイル選択をキャンセルしました" );
			}
		);

		// ファイルが選択された
		fr.addEventListener(Event.SELECT,
			function (event:Event):void {
				log("ファイルが選択されました" );
				var file:FileReference = FileReference(event.target);
				fname = file.name;
				log("name : " + file.name );
				// 読み込み開始
				fr.load();
			}
		);

		// バイナリロード完了
		fr.addEventListener(Event.COMPLETE,
			function(event:Event):void {
				// この時点ではまだ ByteArray なので、
				// Bitmap に変換する為に
				//  Loader オブジェクトで再度ロード
				log( "ByteArray ロード完了" );
				loader.loadBytes(fr.data);
			}
		);

		// 画像ロード完了
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
			function(event:Event):void {
				log( "画像ロード完了" );
				// Image コントロールに Bitmap をセットして表示
				imageCheck.source = Bitmap(event.target.content);
			}
		);

	}

	// *********************************************************
	// ファイル参照ダイアログを開く
	// *********************************************************
	private function selectFile():void {

		try {
			fr.browse();
		}
		catch (e:Error) {
			log(e);
		}

	}

	// *********************************************************
	// 保存
	// ※ Image オブジェクトに格納された画像の直接保存
	// *********************************************************
	private function saveImage1():void {


		try {
			// ビットマップデータを PNG に変換
			ba_data = png_enc.encode( Bitmap(imageCheck.content).bitmapData );
		}
		catch( e:Error ) {
			log( e );
		}

		// PNG バイナリ(ByteArray) を保存
		fr.save( ba_data, "save_1.png" );

	}

	// *********************************************************
	// 保存
	// ※ Panel オブジェクト全体を画像として保存
	// ※ Image オブシェクトに適宜縮小されている画像イメージ
	//    を保存したい場合は、imagePanel のかわりに imageCheck
	//    を使用します
	// *********************************************************
	public function saveImage2():void {

		// パネルサイズのビットマップデータを作成
		var bitmapData:BitmapData = new BitmapData(imagePanel.width, imagePanel.height);

		// 用意したビットマップデータにパネルを描画
		bitmapData.draw(imagePanel);

		// ビットマップデータを PNG に変換
		ba_data = png_enc.encode(bitmapData);

		// PNG バイナリ(ByteArray) を保存
		fr.save( ba_data, "save_2.png" );

	}

]]>
</fx:Script>

<!--
***************************************************
 Flex4 における 絶対位置指定の画面定義
*********************************************** -->

<s:Button 
	id="loadButton"
	x="10" y="10"
	width="120"
	label="画像選択"
	click="selectFile();"
/>

<s:Button 
	id="saveButton"
	x="140" y="10"
	width="120"
	label="画像保存"
	click="saveImage1();"
/>

<s:Button 
	id="savePanelButton"
	x="270" y="10"
	width="120"
	label="Panel保存"
	click="saveImage2();"
/>

<mx:Panel
	id="imagePanel"
	title="{fname}"
	x="10" y="40"
	paddingLeft="0"
	paddingRight="0"
	layout="absolute"
>
	<mx:Image
		x="0" y="0"
		id="imageCheck"
		width="650"
		height="500"
	
	/>
</mx:Panel>

</s:Application>



posted by lightbox at 2011-06-20 01:58 | Flex | このブログの読者になる | 更新情報をチェックする

2011年06月13日


Flex4 : ファイルのアップロード( バージョン1 )

Flex4 による最も簡単な1ファイルのアップロードです。

プログレスバーの処理は実装していません。方法としては、Flex 内部の専用
コントロールを使う方法と、外部の JavaScript を呼び出して DIV で表現
する方法または、canvas で表現する方法があります。いずれにしても、その
場合は、Flex 内で fr.addEventListener(ProgressEvent.PROGRESS, progressUpload);
を実行して、進捗処理を実装する必要があります。また、Flex では、複数選
択による、複数ファイルの一括アップロードも可能です
( progressUpload は適当な関数名です )


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	initialize="initData()"
	usePreloader="false"
>
<!--
***************************************************
 Flex4 における 絶対位置指定
*********************************************** -->
<s:layout>
	<s:BasicLayout />
</s:layout>

<!--
***************************************************
 現在のクラスの非デフォルト、非ビジュアルプロパ
 ティ を宣言します。例えば、効果、バリデーター、
 およびフォ ーマッターを定義します。
*********************************************** -->
<fx:Declarations>
</fx:Declarations>

<fx:Script>
<![CDATA[

	import mx.formatters.*;

	// HTTPService のイベント用
//	import mx.rpc.events.*;
	// Alert 用
	import mx.controls.*;

	private var fr:FileReference;

	// *********************************************************
	// ログ表示
	// *********************************************************
	private function log(data:Object):void {

		// 日付編集用
		var fmt:DateFormatter = new DateFormatter();

		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );

		// JavaScript の呼び出し
		ExternalInterface.call(
			"console.log", logdt,
			" "+data
		);

	}

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	private function initData():void {

		// メッセージ
		log("initData() が実行されました" );

		Security.allowDomain("*");

		fr = new FileReference();

		// IO エラー
		fr.addEventListener(IOErrorEvent.IO_ERROR, 
			function (event:IOErrorEvent):void {
				Alert.show("IOError:" + event.text );
			}
		);

		// キャンセル
		fr.addEventListener(Event.CANCEL, 
			function (event:Event):void {
				Alert.show( "ファイル選択をキャンセルしました" );
			}
		);

		// ファイルが選択された
		fr.addEventListener(Event.SELECT,
			function (event:Event):void {

				var req:URLRequest = new URLRequest("upload.php");

				req.method = URLRequestMethod.POST;
				req.data = "MAX_FILE_SIZE=30000000";

				// テストアップロード無し
				// 二つ目の引数は、ファイルのフィールド名
				fr.upload(req, "MyUploadFile", false); 

			}
		);

		// アップロード処理を開始
		fr.addEventListener(Event.OPEN,
			function (event:Event):void {
				// ボタンを使用不可
				file_button.enabled = false;
			}
		);

		// 処理終了
		fr.addEventListener(Event.COMPLETE, 
			function (event:Event):void {
				// ボタンを使用可
				file_button.enabled = true;
			}
		);

		// サーバーよりデータ受信
		fr.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,
			function (event:DataEvent):void {
				Alert.show( event.data );
			}
		);

	}

	// *********************************************************
	// ファイル参照ダイアログを開く
	// *********************************************************
	private function selectFile():void {

		try {
			fr.browse();
		}
		catch (e:Error) {
			log(e);
		}

	}

]]>
</fx:Script>

<!--
***************************************************
 Flex4 における 絶対位置指定の画面定義
*********************************************** -->

<s:Button 
	id="file_button"
	x = "10" y="10"
	width="150"
	label="ファイル選択"
	click="selectFile();"
/>

</s:Application>

実際のアップロードの受け取り側は、PHP で行っているので、PHP の
仕様にあわせた送信処理を行っています
<?
// *********************************************************
// セッションの開始
// *********************************************************
session_start();
// *********************************************************
// HTTP ヘッダ
// *********************************************************
header('Content-type: text/html; charset=UTF-8');
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

foreach( $_GET as $Key => $Value ) {
	$_POST[$Key] = $_GET[$Key];
}
foreach( $_POST as $Key => $Value ) {
	$_POST[$Key] = str_replace("\\'", "'", $_POST[$Key] );
	$_POST[$Key] = str_replace("\\\"", "\"", $_POST[$Key] );
}

mb_language( "ja" );
mb_internal_encoding("utf-8");

// ファイル名が UTF-8 なので、SHIFT_JIS で保存したい場合は
// 変換が必要になります
$_FILES['MyUploadFile']['name'] = mb_convert_encoding(
	 $_FILES['MyUploadFile']['name'], "shift_jis", "utf-8" 
);

$upload = "file/{$_FILES['MyUploadFile']['name']}";

$ret = move_uploaded_file(
	$_FILES['MyUploadFile']['tmp_name'], $upload
);

if ( $ret ) {
	print "アップロードは正常終了しました";
}
else {
	print "アップロードは異常終了しました";
}

?>

Windows 環境で日本語のファイル名を持つファイルをアップロードする
場合は、Flex 内部で UTF-8 になるので PHP 側で SHIFT_JISに戻す必
要があります


posted by lightbox at 2011-06-13 22:51 | Flex | このブログの読者になる | 更新情報をチェックする

2011年06月12日


Flex4 : HTML から DateField に日付をセットする



Flex4 : DateField を使ったHTML上での日付入力 では、DateField で選択
した日付文字列を HTML 側で利用するのが主な目的でしたが、今回は HTML 側
から「初期値」をセットする方法です。もちろん、処理の途中でも変更できる
ように、Flex 側に公開メソッドを追加します。単に初回のみならば、flashvars
でもかまいません。両方使えるようにしています
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	initialize="initData()"
	creationComplete="initControl()"
>
<!--
***************************************************
 Flex4 における 絶対位置指定
*********************************************** -->
<s:layout>
	<s:BasicLayout />
</s:layout>

<!--
***************************************************
 現在のクラスの非デフォルト、非ビジュアルプロパ
 ティ を宣言します。例えば、効果、バリデーター、
 およびフォ ーマッターを定義します。
*********************************************** -->
<fx:Declarations>
</fx:Declarations>

<fx:Script>
<![CDATA[

	import mx.formatters.*;

	// HTTPService のイベント用
	import mx.rpc.events.*;
	// Alert 用
	import mx.controls.*;
	// CloseEvent
	import 	mx.events.*;

	// *********************************************************
	// ログ表示
	// *********************************************************
	private function log(data:Object):void {

		// 日付編集用
		var fmt:DateFormatter = new DateFormatter();

		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );

		// JavaScript の呼び出し
		ExternalInterface.call(
			"console.log", logdt,
			" "+data
		);

	}

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	private function initData():void {

		// メッセージ
		log("initData() が実行されました" );

		Security.allowDomain("*");

		// flashvars の取得
		var f_vars:Object = mx.core.FlexGlobals.topLevelApplication.parameters;
		ExternalInterface.call(
			"console.dir", f_vars
		);

		if ( f_vars['date'] != null ) {
			log("init date");
			var arr:Array = f_vars['date'].split("/");
			dateField.selectedDate = new Date(arr[0],arr[1]-1,arr[2]);
		}

//		dateField.monthNames = 
//		["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];

//		dateField.dayNames = 
//		["日","月","火","水","木","金","土"];

		ExternalInterface.addCallback("close",
			function():void {
				dateField.close();
			}
		);

		ExternalInterface.addCallback("setYmd",
			function(y:Number,m:Number,d:Number):void {
				log("setYmd : " + y + "/" + m + "/" + d );
				var dt:Date = new Date;
				dt.fullYear = y;
				dt.month = m-1;
				dt.date = d;
				dateField.selectedDate = dt;
				// 以下のようにすると一行
				//dateField.selectedDate = new Date(y,m-1,d);
			}
		);

		ExternalInterface.addCallback("setDateString",
			function(str:String):void {
				log("setDateString : " + str );
				var arr:Array = str.split("/");
				dateField.selectedDate = new Date(arr[0],arr[1]-1,arr[2]);
			}
		);

	}

	// *********************************************************
	// コントロールの初期化
	// *********************************************************
	private function initControl():void {

		// 外部から初期画面で初期値を設定する為に内部から	
		// コントロールが使えるようになった事を通知する必要
		// があります
		ExternalInterface.call(
			"loadMyDate"
		);

	}

	// *********************************************************
	// 日付選択イベント
	// *********************************************************
	private function dateChanged(date:Date):void {

		var wk:String = DateField.dateToString(date,"YYYY/MM/DD");
		log(wk);

		ExternalInterface.call(
			"setMyDate", dateField.text
		);

	}

	// *********************************************************
	// HTML 側のエリアを開く
	// *********************************************************
	private function HtmlSpace():void {

		log("rollOver" );
		ExternalInterface.call(	"openMyDate" );

	}

	// *********************************************************
	// カレンダーが表示していない時に、HTML 側のエリアを閉じる
	// *********************************************************
	private function HtmlSpaceEndNoAction():void {

		if ( !dateField.dropdown.visible ) {
			log("rollOut" );
			dateField.close();
			ExternalInterface.call(	"closeMyDate" );
		}

	}

]]>
</fx:Script>

<!--
***************************************************
 Flex4 における 絶対位置指定の画面定義
*********************************************** -->

<mx:DateField
	x = "-70" y="2"
	id="dateField"
	yearNavigationEnabled="true"
	formatString="YYYY/MM/DD"
	change="dateChanged(DateField(event.target).selectedDate)"
	rollOver="HtmlSpace()"
	rollOut="HtmlSpaceEndNoAction()"

	dayNames="['日','月','火','水','木','金','土']"
	monthNames="[
		'1月','2月','3月','4月','5月',
		'6月','7月','8月','9月','10月',
		'11月','12月'
	]"
/>

</s:Application>

flashvars の取得は、mx.core.FlexGlobals.topLevelApplication.parameters
です。Firefox を使用すると、その内容の一覧を Firebug で表示できるように
しています( console.dir の呼び出し )

JavaScript でロード時にセットするには、HTML がロードされても、Flash
はそれとは同期していないので、creationComplete イベントを追加した上
で、そのタイミングでさらに JavaScript を呼び出すようにしています。

呼び出された JavaScript で再度、Flex の公開メソッドを呼び出すので、
多少処理が交差しますが、現在のところ問題は出ていません。もし、問題
が出るようでしたら、JavaScript 側で初期値を return するように書き換
えれば、Flex 側でそれを取得して内部でセットするといいと思います。
( 但しそれだと、初期日付設定専用の外部呼び出しになってしまいます )
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<title>ブラウザの開発者ツールを使った、Flex4 のデバッグテスト</title>
<style type="text/css">
* {
	font-family: "MS Pゴシック";
	font-size: 14px!important;
}
BODY {
	background-color: white;
	color: black;
}
#id_sample {
	border:solid 1px #C0C0C0;
}
</style>
<script type="text/javascript" src="swfobject.js"></script>
<script language="javascript" type="text/javascript"> 

function setMyDate(str) {

	document.getElementById("mydate").value = str;
	document.getElementById("id_sample").width = 30;
	document.getElementById("id_sample").height = 30;

}
function openMyDate() {

	document.getElementById("id_sample").width = 160;
	document.getElementById("id_sample").height = 210;

}

function closeMyDate() {

	document.getElementById("id_sample").width = 30;
	document.getElementById("id_sample").height = 30;

}

// Flex 側がロード完了すると呼び出される
function loadMyDate() {

	document.getElementById("id_sample").setYmd(2000,1,30);
//	document.getElementById("id_sample").setDateString("2000/3/12");

}

</script>
</head>

<body>

<div style='position:relative;'>
<input id="mydate" type="text" style='position:absolute;left:10px;top:20px;'
 onmouseover='closeMyDate();document.getElementById("id_sample").close()'>
<input id="dummy" type="text" style='position:absolute;left:10px;top:60px;width:400px'
	value="この入力部分の上に、Flash のエリアが表示されます"
>

<div style='position:absolute;left:150px;top:17px;'>
<div id="flashcontent"></div>
</div>
</div>

<script type="text/javascript">
var flashvars = {
};
var params = {
  allowScriptAccess:"always"
 ,bgcolor:"#ffffff"
}; 
var attributes = {
  id: "id_sample",
  name: "id_sample"
};
swfobject.embedSWF(
	"Main.swf?reload="+(new Date()).getTime(),
	"flashcontent", 
	"30",
	"30",
	"10.0.0",
	"",
	flashvars,
	params,
	attributes
);
</script>

</body>
</html>



posted by lightbox at 2011-06-12 17:06 | Flex | このブログの読者になる | 更新情報をチェックする

2011年04月25日


Flex4 : HTTPService で入力データを PHP に送る

▼ 実行時の表示のキャプチャ画像



Flex3 のころと比べて、多少記述方法が変わっており、そのまま移行しようとするとエラーになります。

<fx:Declarations>〜</fx:Declarations>を使って、 現在のクラスの非デフォルト、非ビジュアルプロパティを宣言します。

response.php のソースコード
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	initialize="initData()"
>
<!--
***************************************************
 Flex4 における 絶対位置指定
*********************************************** -->
<s:layout>
	<s:BasicLayout />
</s:layout>

<!--
***************************************************
 現在のクラスの非デフォルト、非ビジュアルプロパ
 ティ を宣言します。例えば、効果、バリデーター、
 およびフォ ーマッターを定義します。
*********************************************** -->
<fx:Declarations>
	<!--
	*****************************************
	 Flex4 における HTTP 通信定義
	************************************* -->
	<mx:HTTPService
		id="srv"
		showBusyCursor="true"
		result="resultHandler(event)"
		fault="faultHandler(event)"
	/>
</fx:Declarations>

<fx:Script>
<![CDATA[

	import mx.formatters.*;

	// HTTPService のイベント用
	import mx.rpc.events.*;
	// Alert 用
	import mx.controls.*;
	// CloseEvent
	import 	mx.events.*;

	// *********************************************************
	// ログ表示
	// *********************************************************
	private function log(data:Object):void {

		// 日付編集用
		var fmt:DateFormatter = new DateFormatter();

		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );

		// JavaScript の呼び出し
		ExternalInterface.call(
			"console.log", logdt,
			" "+data
		);

	}

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	private function initData():void {

		// メッセージ
		log("initData() が実行されました" );

	}

	// *****************************************************
	// HTTPServiceを使用してHTTPリクエスト(GET)を行う
	// *****************************************************
	private function sendData(event:Event):void {

		log( event.target.label + " が押されました" );

		// ● リクエストするURLをセット
		srv.url = "response.php";

		srv.request.fld1 = scode.text;
		srv.request.fld2 = sname.text;

		// レスポンス結果のデータフォーマット
		srv.resultFormat = "text";
		srv.method = "GET";
		srv.send();

	}

	// *****************************************************
	// HTTPServiceが成功
	// *****************************************************
	private function resultHandler(e:ResultEvent):void {

		Alert.show(
			e.result.toString(),
			"結果表示",
			Alert.OK | Alert.CANCEL,
			null,
			function(e:CloseEvent):void {
				if ( e.detail == Alert.OK ) {
					log("OK");
				}
				if ( e.detail == Alert.CANCEL ) {
					log("CANCEL");
				}
			}
		);

		log( "Alert が閉じる前にここが実行されます" );

		// 1) 表示するテキスト
		// 2) タイトル文字列
		// 3) ボタンの種類
		// Alert.OK Alert.CANCEL Alert.YES Alert.NO を | で論理和で指定
		// 4) 親オブジェクト
		// 通常は null を指定します
		// 5) イベント
 
	}

	// *****************************************************
	// HTTPServiceでエラーが発生した
	// *****************************************************
	private function faultHandler(e:FaultEvent):void {

		Alert.show(e.fault.message);

	}

]]>
</fx:Script>

<!--
***************************************************
 Flex4 における 絶対位置指定の画面定義
*********************************************** -->

	<s:Label
		x="10" y="10"
		text="社員コード"
	/>
	<s:TextInput
		x="100" y="10"
		id="scode"
	/>

	<s:Label
		x="10" y="35"
		text="社員名"
	/>
	<s:TextInput
		x="100" y="35"
		id="sname"
	/>

	<s:Button
		x="10" y="80"
		label="送信"
		click="sendData(event);"
	/>

</s:Application>

ビルド方法に関する記事

Flex4 : バッチビルドキット (110417)


posted by lightbox at 2011-04-25 21:26 | Flex | このブログの読者になる | 更新情報をチェックする

2011年04月17日


Flex4 : バッチビルドキット (110417)

このサンプルでは、Flex4 で WEB 用のツールを作成する事を想定して、
コンテンツを絶定位置指定で表示するようにしています。
全て、Flex4 の推奨のクラスを使用して、背景も白色ですぐ利用できま
す。

Flex で問題になるのは、デバッグ方法ですが、現在主たるブラウザで
利用できる console.log の利用方法が記述されています。

このパッケージでは、FlashPlayerTrust フォルダを使用して、ファイル
システムでも( http サーバー無し ) でも表示のテストができるように
なっています。

Flex4 の日本語リファレンスは、アドビ - Flexデベロッパーセンター
からフルドキュメンテーションセットをダウンロードすると中に
書庫が入っているので、その中の index.html を Google Chrome で見る
ようにすると軽快に使えます。





■ 1) Flex4 SDK ダウンロードより SDK をダウンロードしてC:\ に解凍して使用します。
( 他の場所でもかまいません )
■ 2) Java SE 6 Downloads ( Oracle ) より JDK をインストールします
■ 3) 作業を簡単にする為に MK-SQUARE.COM HOMEPAGE より MKEditor をインストールします
■ 4) _FLEX4_WEB_BUILD.mkp を MKEditor で開きます
■ 5) 「パラメ−タ1 : SDK の場所」で SDK の位置を一致させます
■ 6) 「クリップボードへコピー : コマンド」を実行します
  (コマンドラインをクリップボードにコピーします)
■ 7) 「開く : 対話ビルド用コマンドライン」を実行してプロンプトを開きます
■ 8) クリップボードのコマンドを貼り付けてビルドします
  ( 2回目以降は、上矢印キーで、Compile 1 を表示して実行します )
■ 9) ロ−カル実行 : Main.htmを使って実行 します
  ( http 経由で実行するほうがより良いです )


実際の実行ページ





posted by lightbox at 2011-04-17 16:22 | Flex | このブログの読者になる | 更新情報をチェックする

2010年10月17日


Flex4 : 条件付きコンパイルの使用

Flex3 のコードを Flex4 でビルドすると、mx.core.Application.application
の参照で警告が出る他、スキン関連のスタイルの使用でも警告が出るようなので。

警告: "application" は 4.0 以降推奨されていません。
"FlexGlobals.topLevelApplication" を使用してください。
※ スキン(スタイル)の対処は -compatibility-version=3.0 です。 以下のような警告が出た場合も上記オプションで対応できます
警告: CSS セレクター "Application" 内の型 "Application"
は、名前空間で修飾されている必要があります。
この警告は、スタイルで @namespace "http://www.adobe.com/2006/mxml"; を指定すると消えますが、結局以下のような警告が出るので ビルドオプションを使用したほうがいいと思います。
警告: スタイル "backgroundGradientColors" は、テーマ "halo"
を含む型 "mx.core.Application" でのみサポートされています。
// パラメータをプロパティとして持つ Object を取得
CONFIG::Flex3
var param:Object = mx.core.Application.application.parameters;
CONFIG::Flex4
var param:Object = mx.core.FlexGlobals.topLevelApplication.parameters;

以下は、Flex4 と Flex3 でのコマンドライン
;
;
;Flex4 用
mxmlc -compatibility-version=3.0 -define=CONFIG::Flex4,true -define=CONFIG::Flex3,false Main.mxml

;Flex3 用
mxmlc -define=CONFIG::Flex4,false -define=CONFIG::Flex3,true Main.mxml

Adobe へのリンク

Flex3 : 条件付きコンパイルの使用


posted by lightbox at 2010-10-17 22:13 | Flex | このブログの読者になる | 更新情報をチェックする

2009年12月02日


Flex3 : 3D対応 Google MAP for Flash : 汎用ブログパーツ

ちょっと目を離すと、Google の API が 3D対応になっていました。
単に設定するだけなので、以前作ってあった平面バージョンを更新しました

3D対応 Google MAP for Flash : 汎用ブログパーツ






posted by lightbox at 2009-12-02 16:13 | Flex | このブログの読者になる | 更新情報をチェックする

2009年11月22日


Flex3 : WEBに貼った MXML ベースの Papervision3D で、のローカルのPCにあるZIPファイル内DAEをその場でロードするサンプルです

Dae_in_zipfile_load2

これでマテリアルに関してはたいていにおいて網羅したので、
後はどういうコンテンツにしていくかです。ゲーム系とかパーツに
するには、もうちょい 3D データについて慣れる必要がありますが、
CPU パワーとライブラリ作る情熱のある人が揃えば、上の画像
(Google SketchUp のデータです)のような3D フィールド内で
紙芝居くらいすぐ簡単にできそうですね。

専門外なのでアニメーションが良く解りません・・・・

▼ Mouse Over すると、彼女に対するカメラ位置が変わります。
Ha2
ねぎミク Collada ファイルはこちらにあります

Papervision3Dソースの内情を言うと、そんなに完璧なものでは無く、
コンテンツに利用するには、それなりの橋渡しする知識がかなり必要
になります。Papervision3D レベルの処理はこの作者さんに任せて、
次の段階に進まないと、いつまでたっても楽しい事は起きそうにもありませんよね。

ビジネスベースの技術の進歩は完全にエンドユーザをほったらかし。
そりゃ、利益優先だもの仕方無いです。しかし、Microsoft や Adobe の都合なんかに
合わせていると不幸になります。間違い無く。


ダウンロードできるパッケージは、ビルド環境として SDK さえ別に
ダウンロードすればリビルドできますが、背景画像や初期画像なら、
images の中の画像を入れ替えれば雰囲気が変わります。


ソースコード解説はこれから順を追って作っていきます。
Flex は、ちゃんとした説明があればいたって簡単。
面白いものがいくらでも作れます。



関連する記事
Flex3 : Metasequoia 拡張クラス : ローカルの zip ファイルからメタセコイアデータをロードする




posted by lightbox at 2009-11-22 23:06 | Flex | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり