Adobe AIR本を書かせてもらいました

本日、8/28より発売になっています。

数人の共著本で、僕は一番最後の「第９章　Papervision3Dによる3Dアプリケーション開発」の項を書いています。

ご興味がある方は読んでみてください。
よろしくおねがいしますー。

開発のプロが教える 標準Adobe AIR完全解説 (デベロッパー・ツール・シリーズ) 著者：永井 孝,最田 健一,夢を見る株式会社ZAPA,電脳空間カウボーイズ シン石丸 販売元：アスキー・メディアワークス Amazon.co.jpで詳細を確認する

Adobe AIR 1.0でPapervision3Dで書いた画像をJPEG、PNGファイルに保存する

JPG保存、PNG保存ボタンを押すと画像が、test.jpg、test.pngがデスクトップに作成されます。

JPG、PNGの保存には、adobeのcorelibを使用しています。

実行ファイルはこちら。

DOWNLOAD:Pv3dGrapFile.air

AIRなんで、Windowsでも動きますよ。

Pv3dGrapFile.as

TextButton.as

Adobe AIR 1.0でウインドウを生成して、Papervision3Dで描画する

これもβ版から、AIR正式版への摺り合わせ。

Adobe AIRでは、ウインドウ作成機能が追加されたわけですが。

それを使用して、作成したウインドウにPapervision3Dでポリゴン描画するサンプルを作りました。

NativeWindow3DEx.as

Pv3dWindow.as

Adobe AIR 1.0でメインウインドウを透明にしてPapervision3Dで描画する

はい、これも正式版情報にすり合わせ。

メインウインドウを透明にするには、アプリケーションディスクリプタファイル(プロジェクト名-app.xmlというファイル名のファイル)を編集。

<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
<systemChrome>none</systemChrome>

<!-- Whether the window is transparent. Only applicable when systemChrome is false. Optional. Default false. -->
<transparent>true</transparent>

ここだけ設定したら、普通にいつものPapervision3Dのコードを書けば動きます。

スクリーンショット画像は、このコードをビルド。

Adobe AIR 1.0で、画像ファイルをドラッグ＆ドロップで読み込ませて、Papervision3Dのテクスチャとして3D表示する

はい、これも前に書いたβ１用のコードから、1.0へのすりあわせシリーズ。

実行したら、このウインドウに対して、画像ファイルをドラッグ＆ドロップ。

すると、このように画像ファイルを読み込んで、3Dの平面に対してテクスチャとして描画されます。

DragDrop3D.as

Adobe AIR 1.0で、画像ファイルをドラッグ＆ドロップで読み込ませる

これも去年β１の時に作ったんだけど、正式版のコードにすりあわせ。

実行したら、このウインドウに対して、画像ファイルをドラッグ＆ドロップ。

すると、画像ファイルが読み込まれ、表示されます。

DragDropBmp.as

Adobe AIR 1.0でテキストファイルをドラッグ＆ドロップで読み込ませる

これ去年のβ１の時に作ってみましたが、正式版のAIR 1.0では、やり方がまったく違っていたので作り直しました。

実行したら、このウインドウに、drag.txtをドラッグ＆ドロップ。

すると、このようにdrag.txtのテキストファイルの中身が読み込まれて、画面に表示されます。

参考資料は、んぱかさんのAdobe AIRメモ。

DragDropTextFile.as

Adobe AIR正式版を使ってみた

使ってみたら、変わってる点があって若干ハマったのでメモ。

ちょっと書いてみたら、Windowが全然表示されなくて
「おっかしいなー？」
と思ってたら、

ADFファイル(アプリケーションの設定を書くXMLファイル)に

<!-- Whether the window is initially visible. Optional. Default false. -->
<!-- <visible></visible> -->

という項目が出来てて、ここを編集。

<!-- Whether the window is initially visible. Optional. Default false. -->
<visible>true</visible>

とすれば、Windowが表示される。

なんだよー、わりと悩んじゃったよ。
最近ハードディスク交換したから、SDK入れ直したりしてしまった。

まぁ、このHelloWorldのコードは順当な感じ。

HellowWorld.as

Adobe AIR β2を試してみた

もう結構前にAIRのβ２出ましたが、遅ればせながら試してみました。

まず気になってたWEBカメラ処理から。

前のバージョンだと、MACではWEBカメラがどうにもこうにも使えなくて、アララっと思ってたんですが。

前作ったWEBカメラ画像をASCII ART化するのをAIRで作ってみました。

確かにカメラはきっちり動くんですが。

文字のフォントサイズ関連の処理が違うのかな？

イマイチ、キレイに表示されず。

ちょっと、AIRもちょいちょい遊んでみますかね。

Adobe AIR完全解説に寄稿しました

今日、ASCIIさんから見本誌を送っていただいたんですが、ASCIIさんから発売になるムック、Adobe AIR完全解説に寄稿させてもらいました。

僕の書いた部分は、「Papervision3DとAIRでの3D表現」の部分です。

Adobe AIRに関しての本としては、日本初の本です。

AIRに興味がある方は、手にとって見ていただければと思います。

Adobe AIR完全解説 販売元：アスキー Amazon.co.jpで詳細を確認する

Adobe AIR & Papervision3Dで地球を描画

Papervision3DにHelloWorldという地球が表示されるサンプルがあるけど、それと同じようなものを作った。

ほぼHelloWorldをベースにして、ちょっと変えた感じ。

Air独自のところは、Papervision3DのBitmapFileMaterialを使っている点。

3つのリソースファイルを使っているが、それらをルートディレクトリに置くと実行できる。

DOWNLOAD [resource.zip]

Flex Builderでビルドしてますが、コンパイルオプション(プロジェクトのProperties -> AIR Compiler -> Additional compiler arguments)は、

-default-size 400 320 -default-frame-rate=30 -default-background-color=0x000000

ソースコードは以下。

AirEarth3D.as

Adobe AIRでPapervision3Dを使ってみる

Adobe社が開発中のFlash技術を利用したデスクトップアプリケーションの実行環境。

AIR(Adobe Integrated Runtime)。

こいつをまだ試したことなかったので、試してみました。

まず、開発環境のインストール。

基本的には、んぱかさんとこのAdobe AIRメモ参照。

現状、Eclipseベースの統合開発環境、Flex Builder 3もβ版ということで使用することができるので、こちらをインストール。

アタシの場合は、Eclipse 3.2をインストール済みなので、Eclipse Plugin版をインストール。

特に問題なくインストール完了。

あとは、んぱかさんとこのAIRメモを参照しつつ、HelloWorldを試してみて、特に問題なく出来ることを確認。

で、ここからが、ワタクシが試してみた点。

AIRでPapervision3Dを使用したプロジェクトを作成してみた。

やり方は以下。

1. Flex Builder 3(eclipse)を起動する。
2. File -> New -> AIR Project を選択。
3. Project を 「pv3dRoundRect」 にして、Nextボタン押す。
4. 「Use default location」と「Flex SDK version」はそのままNEXTボタンを押す。
5. 「Main application file」の「pv3dRoundRect.mxml」を「pv3dRoundRect.as」に変更し、Finishボタンを押す。

ここまで、出来たらpv3dRoundRect.asを編集。

pv3dRoundRect.asのコードを、ここのエントリーから、コピー＆ペースト。

だけど、これだけじゃビルドが通らない。

Navigatorのpv3dRoundRectを右クリック。

Propertiesを選択。

AIR Build Pathの、Source Pathのところで、Add Folderを選択。

Papervision3Dのソースフォルダを追加します。

これで、緑の矢印ボタンを押して実行すれば、動くはず。

一番上の画像のような結果が表示されます。