SQLの窓 イラストAC フリー素材

2012年06月17日

AIR + Papervision3D でメタセコイアの 3D キャラを遊ぶサンプルパッケージ

3D モデルをクリックしたら終了してしまうバグがあったので修正しました。それと、zip 書庫はテクスチャが1枚でないとうまくいかないので、ふつうの DAE にしました。そこで、3D モデルデータも増やして、追加ロードできるようにしました。







Papervision3D_2.1.920 を使って昔 Web 上で動作する Flex のアプリを Flex4 の AIR に書き換えてみたものです。データは、もともとはメタセコイアのものですが、Blender で読み込んで .dae で出力しました。

Papervision3D は、もう更新がされていない見はなされたライブラリですが、Canvas 使った Three のライブラリを Google Chrome 上で動かすより CPU 付加は低かったりします。時代が変わったせいで、Papervision3D の書き方と Three.js の書き方を比較したりしていますが、これはこれでアリだと思っているのは、iPhone では Canvas は 3D 目的では使い物ににならない(Safariの話)ので、AIR ならひょっとして iPhone のアプリとして動作するようなので、しばらくはプログラマの趣味として意味あるかな・・・なんて。

Papervision3D は、zip 書庫の処理も実装されているので、.dae と テクスチャを zip 書庫にして参照できるのもちょっとうれしいです。このパッケージに入っている DAE_v.as は、昔必要だったのでそのへんを最適化したコードのはずなんですが・・・あんまりよく覚えていません。

ま、動くからいいか。


関連する記事

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★
Three.js で使う為に、メタセコイア等のデータを変換して WEB で表示する

Papervision3D

Papervision3D Official Documentation

SDK

Download Adobe Flex SDK










下のキャプチャは、Google ギャラリーのデータをスケールや座標を調整してロードしたものです(テクスチャを dae と同じところに置いて、dae の中のバス記述を変更しています)。



dae2.x = 5;
dae2.y = -30;
dae2.z = -140;
dae2.scale = 4;

3Dデータについて

モンスター 3D モデルは、光陰像型さんが作成されたメタセコイアデータを
Blender で、Collada( dae ) に変換して使用しています


posted by at 2012-06-17 22:13 | AIR Flex( WEB Flex ) | このブログの読者になる | 更新情報をチェックする

2012年05月27日

AIR+FLARToolkitサンプル開発キット / collada(dae)とメタセコイア(mqo)ローダ実装済



吹き出しはデータとして添付しました。表示エリアと同じ大きさで、吹き出し部分以外は透過です。セリフとモンスターの汗はマウスドラッグで直書きです。miku(はちゅね) の向こうに見えている手は、ALT + PrintScreen ですね、すいません。



左の miku は、メタセコイアで、右の miku は、collada です。



さて、やっと AIR におもちゃがのっかりました。あとは、これを Android の apk でビルドしてどーなるかなんですが・・・。これが動かないと、いまどき papervision3d を引っ張り出した意味が無いんですが、メタセコデータがそのままロードできるし、Google ギャラリーの dae がロードできるはずです。3年前の WEB 上で結構な建物とかが回ってたので、ローカルのいまどきの PC ならストレス無く動くと思うのです。

結構多くのいろいろな著作物が同梱されています。

AIR の入れ物と、zip でロードして来るところを自分で作成しました。(沢山のフリーソフトに感謝です)

■ リソースの著作権とライセンス等

Metasequoia.as
Copyright (c) 2007-2008 rch850
Metasequoia_v.as
改造 : lightbox

TGADecoder.as
 Copyright (c) 2008 rch850

BMPDecoder.as
Copyright (c) 2007 munegon

FLARToolkit
saqoosha
[GPL License]

Papervision3D
[MIT ライセンス]

zip 書庫の処理
David Chang
[GPL License]

モンスター 3D モデル
光陰像型

negimiku_dae.zip
note.x さん

muku01.mqo
ファイル保管庫@七葉(nh0019.zip)

初音ミクのライセンス
クリプトン・フューチャー・メディア株式会社
[ピアプロ・キャラクター・ライセンス]


本当はオブジェクト毎に設定できるようなものを作ってしまえば、ジオラマ的なおもちゃ箱が出来上がると思うんですが、そんな時間は無いのが現実なのです・・・・。ははは

※ ちなみに、こんな画像をディスプレイに表示してカメラ向けても AR は作動します。




posted by at 2012-05-27 20:50 | AIR Flex( WEB Flex ) | このブログの読者になる | 更新情報をチェックする

2012年05月21日

AIR Flex4 で WEB カメラを最も簡単に実装する方法

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★

VideoDisplay を使って、ムービを簡単に再生できましたが、ムービーをロードした状態からだと、特に難しい事を意識しなくてもWEB カメラを表示できます。ダミーでお好きな画像が初期表示される mp4 等を用意すれば OK です。







撮影した画像





Panel を画像化しているので全体が画像化されています。撮影ボタンを押すと、ファイルを保存する為のダイアログが表示されるので、このままではつかいにくいので注意して下さい。
ソースを見る
タグ:AIR flex
posted by at 2012-05-21 20:58 | AIR Flex( WEB Flex ) | このブログの読者になる | 更新情報をチェックする

2009年末に作った Flex3 + FLARToolkit のソースを Flex4 に書き直しました

2009年バージョンはこちらです。zipfile ボタンで、.mqo と テクスチャの入ったファイルを読み込んで表示させる事ができます。当時作りっぱなしで放置していて、ソースを公開するのを忘れてたので再構築しました。

2009年バージョン + はちゅね



けっこういろんな人がかかわったソースが同梱されています。基本は FLARToolkit ですが、これのライセンスは GPL です。あと、メタセコイアをロードする為のソースとかもろもろ。

FLARToolkit のソースは当時の一番古いものです。今はもうちょっと新しいのがありますが( 二つ対象表示できる? )、3D 表示の元となるのが Papervision3D で、これは 2010 年に開発が止まってしまったソフトウェアで、忘れられてしまった感があります。しかし、PC もよくなったし、AIR で動かしていると結構なレスポンスなので、再び引っ張り出していろいろテストしています。ブラウザで動かす WebGL よりもレスポンスいいし、AIR ならアンドロイドで動くかもしれないので、おもしろいかもしれません。

Flex4バージョン



AR では、マーカーが必要なので、簡単にテストできるように画面上に画像貼っているので、そこへカメラを向ければ 3D モデル等を表示できます。画面上でドラッグすると字が書けますし、透過の画像をうまく配置すると吹き出しにセリフいれたり、その画像を 3D としてロードしてもいいです。ただ、3D 平面と 3D 球は位置固定なので使い勝手は悪いです。3D モデルは、データの座標を移動すれば位置は変えれますけど。



モデルは複数ロードできるので、座標を調整すると並んで表示できますが、なにもしないとこんな事になりますwww



※ 書いた文字は、色を白に変えて書くとリセットされます。


<?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"
	applicationComplete="initOk();"
	usePreloader="true"
>

<fx:Script>
<![CDATA[

	import mx.controls.*;
	import mx.events.*; 
	import mx.formatters.*;
	import mx.graphics.codec.PNGEncoder;
	import flash.external.*;
	import flash.media.Camera;
	import org.libspark.pv3d.Metasequoia_v;

	private var camera:Camera;
	private var fRef:FileReference;
	private var loader:Loader;
	private var actType:int = 0;

	private var sc:SimpleCube;

	private var m_status:Boolean = false;
	private var cvs_thickness:Number = 4;
	private var cmd_cnt:Number = 0;
	private var bmp:BitmapData = null;
	private var mqo_v:Metasequoia_v = null;

	// *********************************************************
	// ログ表示
	// *********************************************************
	public function firebug(data:Object):void {
	
		var fmt:DateFormatter = new DateFormatter();
	
		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );
	
		ExternalInterface.call(
			"console.log", logdt,
			data+""
		);
	
	}

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

		// NumericStepper のイベント処理
		ns.addEventListener( flash.events.Event.CHANGE,
			function(e:flash.events.Event):void {
				if ( mqo_v != null ) {
					mqo_v.scale = ns.value;
				}
			}
		);
		ns2.addEventListener( flash.events.Event.CHANGE,
			function(e:flash.events.Event):void {
				if ( mqo_v != null ) {
					mqo_v.rotationX = ns2.value;
				}
			}
		);

		camera = Camera.getCamera();
		if ( camera ) {
			sc = new SimpleCube();
			myImage.rawChildren.addChild(sc);
			firebug("FLARToolKit を追加しました");
		}


		// ファイルリファレンスの準備
		fRef = new FileReference();
		// ファイル保存用ダイアログを表示して保存する
		// ビルドに -target-player=10.0.12 オプションが必要
		// 以下の例では、エラー以外のイベントには空の無名関数が関係づけられています
		fRef.addEventListener(Event.OPEN, function(e:Event):void {} );
		fRef.addEventListener(ProgressEvent.PROGRESS, function(e:ProgressEvent):void {} );
		fRef.addEventListener(Event.COMPLETE, function(e:Event):void {

			firebug( actType );
			// 処理完了後の処理

			// 読み出す
			if ( actType == 0 ) {
				loader = new Loader();
				loader.loadBytes(FileReference(e.target).data);
				loader.contentLoaderInfo.addEventListener(Event.INIT,function(e:Event):void{

					firebug( "追加しました1" );
					myImage.rawChildren.addChild(e.target.content);
					firebug( "追加しました2" );
					firebug( e.target.content );
				});
				firebug( "ロードが完了しました" );
			}
			if ( actType == 2 ) {
				loader = new Loader();
				loader.loadBytes(FileReference(e.target).data);
				loader.contentLoaderInfo.addEventListener(Event.INIT,function(e:Event):void{

					firebug( "追加しました1" );
					if ( camera ) {
						sc.loadImageNormal(e.target.content);
					}
					firebug( "追加しました2" );
					firebug( e.target.content );
				});
				firebug( "ロードが完了しました" );
			}

			if ( actType == 3 ) {
				loader = new Loader();
				loader.loadBytes(FileReference(e.target).data);
				loader.contentLoaderInfo.addEventListener(Event.INIT,function(e:Event):void{

					firebug( "追加しました1" );
					if ( camera ) {
						sc.loadImageBall(e.target.content);
					}
					firebug( "追加しました2" );
					firebug( e.target.content );
				});
				firebug( "ロードが完了しました" );
			}

			// 保存が完了
			if ( actType == 1 ) {
				firebug( "保存が完了しました" );
			}
		} );
		fRef.addEventListener(Event.CANCEL, function(e:Event):void {} );
		fRef.addEventListener(Event.SELECT, function(e:Event):void {
			// ファイル選択後の処理
			if ( actType == 0 ) {
				firebug( "ロードします" );
				FileReference(e.target).load();
				firebug( "ロードを開始しました" );
			}
			if ( actType == 2 ) {
				firebug( "3D平面ロードします" );
				FileReference(e.target).load();
				firebug( "3D平面ロードを開始しました" );
			}
			if ( actType == 3 ) {
				firebug( "3D球面ロードします" );
				FileReference(e.target).load();
				firebug( "3D球面ロードを開始しました" );
			}
			if ( actType == 1 ) {
				firebug( "保存します" );
			}
		} );
		fRef.addEventListener(IOErrorEvent.IO_ERROR, fRefError );


		// *************************************************
		// メタセコイア拡張のロード完了
		// *************************************************
		mqo_v = new Metasequoia_v();
		mqo_v.addEventListener(Event.COMPLETE, function(e:Event):void {

			sc.loadMqo(mqo_v);
			mqo_v.rotationX = -90;
			mqo_v.scale = 1;
			ns.value = 1;
			ns2.value = mqo_v.rotationX;

		});

	}

	// *********************************************************
	// 撮影と保存( Flash 全体 )
	// *********************************************************
	public function shot():void {

		myPanel.title = comment.text;

		var bitmap:Bitmap = new Bitmap();
		var bitmapData:BitmapData = new BitmapData(shotarea.width, shotarea.height);
		bitmap.bitmapData = bitmapData;
		bitmapData.draw(shotarea);

		var pngEnc:PNGEncoder = new PNGEncoder();
		var png:ByteArray = pngEnc.encode(bitmap.bitmapData);

		firebug( "撮影しました" );

		actType = 1;
		fRef.save( png, "shot.png" );

	}

	// *********************************************************
	// IOエラー
	// *********************************************************
	public function fRefError( e:IOErrorEvent ):void {
		Alert.show(e.text);
	}

	// *********************************************************
	// マウスダウン
	// *********************************************************
	public function Mouse_Down(e:flash.events.MouseEvent):void {

		m_status = true;
		cvs.graphics.moveTo(
			e.localX,
			e.localY
		);

	}

	// *********************************************************
	// マウスアップ
	// *********************************************************
	public function Mouse_Up(e:flash.events.MouseEvent):void {

		m_status = false;

	}

	// *********************************************************
	// マウス移動
	// *********************************************************
	public function Mouse_Move(e:flash.events.MouseEvent):void {

		if ( m_status ) {

			cvs_thickness = 4;
			if ( cp.selectedColor == 0xffffff ) {
				bmp = new BitmapData(640,480,true,0x00000000);
				cvs.graphics.clear();
				cvs.graphics.beginBitmapFill(bmp); 
				cvs.graphics.drawRect(0, 0, bmp.width, bmp.height); 
				cvs.graphics.endFill(); 
				cp.selectedColor = 0x000000;
				cvs.graphics.moveTo(
					e.localX,
					e.localY
				);
				return;
			}
			cvs.graphics.lineStyle(
				cvs_thickness,
				cp.selectedColor,
				1
			);
			cvs.graphics.lineTo(
				e.localX,
				e.localY
			);
			cmd_cnt++;
			if ( cmd_cnt > 20 ) {
				cmd_cnt = 0;
				Convert_bmp();
			}
			cvs.graphics.moveTo(
				e.localX,
				e.localY
			);
		}
	}

	// *********************************************************
	// 変換
	// *********************************************************
	public function Convert_bmp():void {

		if ( bmp == null ) {
			bmp = new BitmapData(640,480,true,0x00000000);
		}

		bmp.draw(cvs);
		cvs.graphics.clear();
		cvs.graphics.beginBitmapFill(bmp); 
		cvs.graphics.drawRect(0, 0, bmp.width, bmp.height); 
		cvs.graphics.endFill(); 

	}


]]>
</fx:Script>

<s:Panel
	id="myPanel"
	title="{comment.text}"
	top="10"
	left="10"
	right="10"
	bottom="10"
	mouseDown="Mouse_Down(event)"
	mouseUp="Mouse_Up(event)"
	mouseMove="Mouse_Move(event)"
	mouseOut="Mouse_Move(event)"
>
<s:BorderContainer id="shotarea" left="10" top="10">
	<mx:Canvas
		id="myImage"
		width="640"
		height="480"
	>
	</mx:Canvas>
	<s:SpriteVisualElement
		id="cvs"
		width="640" height="480"
	>
	</s:SpriteVisualElement>
</s:BorderContainer>

<s:VGroup left="10" y="500">
	<s:HGroup paddingTop="10">
		<mx:ColorPicker id="cp" showTextField="true" />
		<s:Button
			styleName="blackButton"
			id="shotButton"
			label="シャッターを押す"
			click="shot();"
			toolTip="撮影"
		/>
		<s:Button
			styleName="blackButton"
			id="loadButton"
			label="ローカル画像のロード"
			click="actType=0;fRef.browse();"
		/>
		<s:TextInput
			id="comment"
			width="250"
			text="メタセコイアとその他のロード"
		/>
	</s:HGroup>
	<s:HGroup paddingTop="10">
		<s:Button
			styleName="blackButton"
			id="load3DButton1"
			label="3D平面ロード"
			click="actType=2;fRef.browse();"
		/>
		<s:Button
			styleName="blackButton"
			id="load3DButton2"
			label="3D球面ロード"
			click="actType=3;fRef.browse();"
		/>
		<s:Button
			styleName="blackButton"
			id="load3DButton6"
			label="メタセコイアとテクスチャの入った ZIP 書庫"
			click="mqo_v.browse('zip');"
		/>
	
		<s:NumericStepper
			id="ns" 
			minimum="0.1"
			 maximum="5" 
			stepSize="0.1" 
			value="1.0" 
			width="60"
		/>
	
		<s:NumericStepper
			id="ns2" 
			minimum="-180"
			 maximum="180" 
			stepSize="10" 
			value="-90" 
			width="60"
		/>
	
	</s:HGroup>
</s:VGroup>


</s:Panel>


</s:Application>

Flex3 から Flex4 の移行にあたって、FLARToolkit のベースとなる Canvas はそのままにしていますが、他は Flex4 仕様です。ColorPicker は、mx しか無いようなのでそのままですが、Flex4 になって結構面倒な仕様変更が多かったですね。やっぱこれじゃあ、日本じゃまだはやんないと思います・・・・はあ。





著作者情報

FLARToolkit
saqoosha
[GPL License]

Metasequoia.as
Copyright (c) 2007-2008 rch850
Metasequoia_v.as
改造 : lightbox

TGADecoder.as
 Copyright (c) 2008 rch850

BMPDecoder.as
Copyright (c) 2007 munegon

Papervision3D
MIT ライセンス

モンスター 3D モデル
光陰像型(3Dキャラ)
初音ミクのライセンス
■ 権利者 : クリプトン・フューチャー・メディア株式会社
■ ライセンス名 : ピアプロ・キャラクター・ライセンス
( ※ キャラクター利用のガイドライン )



しかし、Google Chrome に埋め込まれてる Flash は、Flex でテキスト入力しようとすると、日本語が入力されないというバグがあります。標準の Flash に変更すれば正常になりますが、一般の人には無理でしょうから、作り手は HTML 上で入力させて取り込むという作業が必要ですね。やっぱはやんないなぁ・・・・

▼ 以下はその手順です。



chrome:plugins で表示したページの右上から詳細表示にしてすべての Flash プラグインを表示して、Windows なら gcswf32.dll を無効にする。


ひとりごと

マーカーを 3D 表示させて、そこに カメラ向けるとどうなるんだろ。


タグ:AIR flex FLARToolKit
posted by at 2012-05-21 11:50 | AIR Flex( WEB Flex ) | このブログの読者になる | 更新情報をチェックする

2012年05月04日

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★

2012/5/4 : バグ修正

ビデオのロード後のイベントは、durationChangeでは無く、
creationComplete で行う必要がありました。
( 大きいファイルでは情報を取得する為の準備が完了していませんでした )
Flex3 の時に作成したものを flex_sdk_4.6 で動作するように調整しました。 AIR の SDK は必要ありません。出来上がったアプリケーションを、自身の PC にインストールしないのであれば、AIR の ランタイムも必要ありません。 ▼ 実行画面 ( ウインドウのサイズ変更は、右下の角をドラッグします ) MKEditotr で簡単に修正やビルドができます http://www.mk-square.com/ ▼ SOFTWARE => MKEditor for Windows => Download Information ▼ MKEditor for Windows Version 3.9.9-J 開発環境 1) Java6 ( Java7 では、パッケージ作成でエラーが出ます ) ( 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 と言うか、以前は公式にリンクがあったのですが内容が古い為、公式なリンクが 消えているのが実情だと思います。過去にも何度かこういう事がありました。 Flex3 はこちら http://livedocs.adobe.com/flex/3_jp/flex3jp_documentation.zip ちなみに、Flex2 のダウンロードも生きているようです http://download.macromedia.com/pub/documentation/jp/flex/2/flex201_documentation.zip オンラインドキュメント Flex4 リファレンス : 日本語オンライン Adobe AIR Android と iOS 用の設定 Flex3 日本語汎用マニュアル Adobe Flex 4.6 英文マニュアル 重要な公式テクニカルアーティクル Flex 4 マスターシリーズ #04 Flex 4 CSS Flex 4 マスターシリーズ #05 Spark コンポーネント Flex 4 マスターシリーズ #07 Spark Skining part 1 Flex 4 マスターシリーズ #10 Flex 4 Spark Layouts 関連する記事 ビルド手順(1) : コマンドプロンプトの設定 ビルド手順(2) : SDKの設定 ビルド手順(3) : コマンドプロンプトでビルド デバッグ実行 デバッグ用ログ出力 Flex で定義されているスキンを使って『外観』をかっこよく AIR アプリケーション記述ファイルについて FLVプレーヤーをもっと簡単に。VideoDisplay を VideoPlayer に変更する Spark のスキンを使った時のウインドウサイズ変更オペレーション ▼ こちらでは、まとめた時のちょっとした情報とソースを貼ってあります 2年半ぶりに Air Flex のコードを整備しましたが、 相変わらず欲しい情報が見つからないのが Adobe のようです
posted by at 2012-05-04 22:46 | Comment(0) | AIR Flex( WEB Flex ) | このブログの読者になる | 更新情報をチェックする

2012年03月25日

Spark のスキンを使った時のウインドウサイズ変更オペレーション : Adobe AIR Flex

ベースアーティクル

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★


▼ この記事の本文



サンプルの Panel の背景色を黒にしていたのでサンプルでは見えませんが
右下の隅にドラッグできる小さな三角形のエリアがあり、それを使ってウイ
ンドウサイズを変更します。

※ 画像は、背景を白にしています
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";

s|Panel {
	backgroundColor:white;
}

</fx:Style>
Flex4 の CSS 指定は基本的には Flex3 の時と同じ記述方法なんですが、
名前空間の指定が無いと、そもそも対象を限定できないようになってい
ます。

要素記述でも xmlns:s="library://ns.adobe.com/flex/spark" となっていますが、
それと合わせて @namespace s "library://ns.adobe.com/flex/spark"; という記述
で表現を統一しているようです( 実際には s は変更できるはずです )

機能としてのバージョンアップは、# による id セレクタと 子孫セレクタが使える
ようになっています。

Flex 4 マスターシリーズ #04 Flex 4 CSS

<fx:Style> では、外部ソース(source="style_sheet")が指定できますし、ブラウ
ザでの知識を超える事は無く、自然に使えるはずです。


posted by at 2012-03-25 01:39 | Comment(0) | AIR Flex( WEB Flex ) | このブログの読者になる | 更新情報をチェックする

FLVプレーヤーをもっと簡単に。VideoDisplay を VideoPlayer に変更する : Adobe AIR Flex

ベースアーティクル

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★


▼ この記事の本文



ベースアーティクルのソースコードの VideoDisplay を VideoPlayer に変更するだけで、
赤い部分が追加されて、VideoDisplay の為に作ったユーザーコントロールが全くいらな
くなります。

ボタンは [stop] だけが特別な意味を持ちますが、[play]と[pause] は VideoPlayer の
機能として実装されています。さらに、実行位置もドラッグできるなどより便利になって
いますし、Video の Full スクリーンも本来の目的に合ったものとなっています。
( VideoDisplay では、コードのサンプルとして作ったので機能は後回しです )

※ VideoDisplay は、mx 名前空間には無かったコントロールです


posted by at 2012-03-25 01:01 | Comment(0) | AIR Flex( WEB Flex ) | このブログの読者になる | 更新情報をチェックする

2012年03月23日

Adobe AIR Flex : AIR アプリケーション記述ファイルについて

ベースアーティクル

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★


▼ この記事の本文

Adobe AIR アプリケーションの構築
AIR アプリケーション記述ファイル
<?xml version="1.0" encoding="utf-8" ?> 
<application xmlns="http://ns.adobe.com/air/application/3.1"> 
	
	<id>lightbox.SimpleFlvPlayer</id> 
	<versionNumber>1.0</versionNumber> 
	<filename>simple_flv_player</filename> 
	<name>超シンプル FLV プレーヤー</name> 
	<installFolder>lightbox</installFolder> 

	<initialWindow> 
		<title>AIR アプリケーション</title> 
		<content>Mainw.swf</content> 
		<x>300</x>
		<y>200</y>
		<width>500</width>
		<height>500</height>
		<systemChrome>standard</systemChrome> 
		<!--transparent>true</transparent--> 
		<!--visible>true</visible--> 
		<minimizable>true</minimizable> 
		<maximizable>true</maximizable> 
		<resizable>true</resizable> 
	</initialWindow>
	<icon>
		<image32x32>winofsql.png</image32x32> 
	</icon> 

</application>

上のソースと、Adobe のリンク先でだいたいの概要は掴めるとは思いますが、
要点はなかなか解りにくいので以下を良く読んで下さい

application 要素のバージョンと adl.exe のバージョンを一致させる
※ ここでは3.1


versionNumber 要素は、Flex3 の時 version だったので古い定義を使う時は注意
( AIR 2.5 以降では、version 要素は versionNumber、versionLabel要素に置き換えられました )

systemChrome は、standard と none で外観が変わるが、none ではスキンを適用する
maximizable と minimizable と resizable と transparent は内部から変更できません
( AIR アプリケーション記述ファイルは、ビルドとは無関係で変更してから実行できます )

Adobe ドキュメント

AIR アプリケーション記述エレメントの仕様
public class WindowedApplication



posted by at 2012-03-23 18:12 | Comment(0) | AIR Flex( WEB Flex ) | このブログの読者になる | 更新情報をチェックする

Adobe AIR Flex : Flex で定義されているスキンを使って『外観』をかっこよく

ベースアーティクル

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★


▼ この記事の本文

一般的な外観を使うと、Windows の環境に依存して以下のようになってしまいます。
( <systemChrome>standard</systemChrome>  )



Flex3 の時は、AIR アプリケーション記述ファイル で、systemChrome を none に
するだけで良かったのですが、Flex4 で spark を使うと以下のようにタイトルが表
示されずに、ウインドウをドラッグできません。



この対処は、skinClass に spark.skins.spark.SparkChromeWindowedApplicationSkin
をセットする事で解決しますが、記述方法としては、要素のプロパティとして設定する
方法と、ActionScript で記述する方法の二通りがあります。
<s:WindowedApplication 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();"
	nativeDragEnter="Check_DragEnter(event)"
	nativeDragDrop="Check_DropFile(event)"

	usePreloader="true"
	showStatusBar="false"

	titleIcon="{imgSmile}"
	title="エクスプローラから flv をドラッグ・ドロップできます"

	skinClass="spark.skins.spark.SparkChromeWindowedApplicationSkin"
>

ActionScript で書く場合は、import spark.skins.spark.*; を記述しておいて、
this.setStyle( "skinClass", SparkChromeWindowedApplicationSkin );
と書くと良いでしょう






posted by at 2012-03-23 01:50 | Comment(0) | AIR Flex( WEB Flex ) | このブログの読者になる | 更新情報をチェックする

2012年03月22日

Adobe AIR Flex : デバッグ用ログ出力( ついでなんで HTML 上の Flex のログ出力方法も書いておきます )

ベースアーティクル

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★


▼ この記事の本文

Flex3 の時は、trace メソッドで出力されたのですが、何故かうまくいかない
ので、王道の 『logging API』を使用します。

まず最初に以下の定義をします

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

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

ここで、MyLogger はなんでもいいです。ログの出力行の最後に出力される文字列
で、ここでは結局出力していません(includeCategory )。その設定も含めて、以下
のコードで利用します。

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);

■ includeDate 〜 includeCategory はログ行に出力するかどうかです
( 詳細は、オンラインドキュメント解説ページ )
■ Log クラスは、mx.logging に定義されています

▼ 出力です
( info 以外にもメソッドはありますが、ここでは必要無いでしょう )

logger.info( "initData() が実行されました" );

ログの環境設定

これは、Flex3 の時と同じでした。『C:\Documents and Settings\ユーザ』ディレクトリに
mm.cfg ファイルを作成して、TraceOutputFileEnable=1 を書き込むとファイルに出力されて
TraceOutputFileEnable=0 にすると標準出力に出力されます。出力されるファイルは、
C:\Documents and Settings\ユーザー\Application Data\Macromedia\Flash Player\Logs
の flashlog.txt です。( これを変える方法はまだ知りません )

※ 標準出力を使いたい場合

日本語が化けるので、Flex3 のころの内容ですが参考になると思います
( Adobe AIR Flex をだれでも簡単に作成できるパッケージ内の記述 )
【実行中の trace の日本語処理について】
デフォルトでは、Flex 内が UTF8 なので化けます。
ファイルに書き込めば、正しく表示されますが、

どうしてもコマンドプロンプト上で日本語トレースしたい場合は以下のようにします。

1) ファイル名を指定して実行から、cmd.exe を実行してコマンドプロンプトを表示
2) プロパティのフォントで MS ゴシックを選択して、「同じタイトルのウインドウに適用する」を選ぶ
3) コマンドプロンプトを閉じる
4) __air_start.txt を開いて、chcp 65001 を実行させるように ; を削除する
5) air_start.wsf を実行する
※ mode con: cp select=65001 でもコードページは変更できます

このオプションは、バグってるようなので、日本語は表示されますが欠けたりします。
コンソールの再描画が正しくされていないようなので、ウインドウのサイズを変更したり
最小化して戻したりすると正しく表示されます。

「同じタイトルのウインドウに適用する」を解除したい場合は、
HKEY_CURRENT_USER\Console\%SystemRoot%_system32_cmd.exe のレジストリキーを削除します。
( 環境毎に違うと思いますが、HKEY_CURRENT_USER\Console の下に作成されます )
ソースコード 2年半ぶりに Air Flex のコードを整備しました Web Flex のログコード
	import mx.formatters.*;

	// *********************************************************
	// ログ表示
	// *********************************************************
	public 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
		);

	}

昔は Firebug 使ってずっとこれで出力してましたが、今では全てのブラウザで
console.log が使えるので普通に利用できるはずです


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

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

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

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

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


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

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

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

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

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


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX