GINPRO / SQLの窓と銀プログラマ

ベースアーティクル

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")が指定できますし、ブラウ
ザでの知識を超える事は無く、自然に使えるはずです。

ベースアーティクル

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


▼ この記事の本文



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

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

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

ここでは、元々の乱数が xyz いずれも同様の範囲ですが normalize()では、
たとえ xyx 値の値にバラ付きがあっても、1以内の値に収めるようです。

multiplyScalar() では、全ての値に一定の値をかけて、任意の範囲の値を
作成しているようです。

xyz に Math.random() * 2 - 1 をセットしているのは、Math.random() が
1以内の正の値なので、倍にして 0〜2 に変換してから 1 を引く事によって
マイナス座標を作成しています。

particle = new THREE.Particle( material );
particle.position.x = Math.random() * 2 - 1;
particle.position.y = Math.random() * 2 - 1;
particle.position.z = Math.random() * 2 - 1;
particle.position.normalize();
particle.position.multiplyScalar( Math.random() * 10 + 450 );

position は、Vector3 オブジェクトです

関連する記事

Three.js : Vector3 オブジェクトのコンストラクタ

ベースアーティクル

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

ベースアーティクル

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 );
と書くと良いでしょう

ベースアーティクル

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 の下に作成されます )


ソースコード

２年半ぶりに 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 が使えるので普通に利用できるはずです

ベースアーティクル

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


▼ この記事の本文

『実行(デバッグ)』をダブルクリックして下さい



アプリケーションが、adl.exe を使って実行されます。
コマンドプロンプトから実行されているのは、アプリケー
ション内から出力するログを、このコンソールに表示する
事が可能だからです。

但し、日本語の出力はキャラクタセットの関係で設定が面倒
なので、ファイル出力にしたほうがいいと思います。ただ、
日本語を表示しないのであれば、コンソールへの出力も効率
が良い場合もあります



実行コマンドラインは、adl Mainw.xml としているだけです。Mainw.xml は、
Flex で作られた内容を Windows アプリケーションで実行する為の定義で、
これはビルドされるのでは無く、実行毎に読み込まれるテキストファイルです。

このアプリケーションでは、外観を Flex が定義したスキンで表示する為に
systemChrome が none となっています。これを standard に変更すると、外
観が以下のようになります



Mainw.xml

<?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>none</systemChrome> 
		<!--transparent>true</transparent--> 
		<!--visible>true</visible--> 
		<minimizable>true</minimizable> 
		<maximizable>true</maximizable> 
		<resizable>true</resizable> 
	</initialWindow>
	<icon>
		<image32x32>winofsql.png</image32x32> 
	</icon> 

</application>

versionNumber に注意して下さい。Flex3 の頃とは仕様が変更されています
( 以前は version だったので古い定義はエラーになります )

http://ns.adobe.com/air/application/3.1 の 3.1 も重要です。
現在使用しているバージョンと一致する必要があるので、adl.exe
のプロパティでバージョン番号を確認して下さい

ベースアーティクル

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


▼ この記事の本文

『対話ビルド用コマンドライン』をダブルクリックすると、ビルド用のコマンド
プロンプトが開いて、fcsh が起動します





『クリップボードにコピーします』をダブルクリックすると、クリップボード
に『開発用ビルド』の内容がコピーされるので、コマンドプロンプトで右クリ
ックします。すると、自動的にビルドが開始されます( １回目のビルド )



ソースを修正して２回目以降のビルドは最初からビルドするのでは無く、差分
でビルドする為に、上矢印で compile 1 を表示させて実行します

ベースアーティクル

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


▼ この記事の本文

ダウンロードした flex_sdk_4.6.zip は、C ドライブのルートに置いて解凍するのが
パスが短くて、いろいろな意味で都合が良いです。ですから、Flex SDK のパスは
C:\flex_sdk_4.6\bin となるので、MKEditor で _FLEX4_AIR_BUILD.mkp を開いて、
『SDKの場所』で書き換えて下さい( C:\flex_sdk_4.6\bin ならそのままです )




■ 検索パスとして丸ごと埋め込むので、java の sdk のパスを含めてもかまいません
C:\flex_sdk_4.6\bin;C:\Program Files\Java\jdk1.6.0_14\bin

ベースアーティクル

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


▼ この記事の本文

コマンドプロンプトを使うので、まずコマンドプロンプトでクリップボード
の操作が簡単に行えるように設定します。

1) ファイル名を指定して実行で、cmd と入力してコマンドプロンプトを開きます
( ファイル名を指定して実行は、Winキー+R でも開く事ができます )

2) タイトルバーよりプロパティダイアログを開きます





3) 簡易編集モードにチェックします

これによって、右クリックでコピー&ペーストが可能になります
( ここでは ペーストに使います )