[Fireworks]機能拡張

個人的に AIR で一番興味がある、ANE の機能です。 AIR For iOS, AIR For Android でスマフォアプリを開発できてたのですが、ネイティブコードでプラグインを追加できるってやつです。画面遷移は Flex で作って、AIRで出来ない事はネイティブでってきり分けができるので、作業分担もできるかな？と思います。

現在の環境

Xcode eclipse Flash Builder Terminal/ CommandPrompt FlexSDK 4.5.1.21328 AIR3 SDK

※Macの場合は、上書きに注意だそうです。

概要

iOS は .a ファイル、AndroidOS は .jar .so ファイルを作成
AS ファイルで関数定義
AIR 側では .swc と extension.xml を作る必要がa る
最終的に .ane ファイルを作る事で連携できる

iOS用

AIR3 SDK内に入っている

AdobeAIRSDK/include/FlashRuntimeExtensions.h

のインポートが必要

include/FlashRuntimeExtensions.h をインポート
FREObject、FRENamedFunction等のクラスがある（ドキュメント不明）

AndroidOS用

発表が早すぎて、ちょっと聴き取れませんでした。

aneファイルの作成

flash.external.Extention
extension.xml の作成
adtコマンドで ANE ファイルを作成

ANEtty

aneファイル作成支援ツール（証明書発行機能付き）コマンドを打つのは面倒なので、有志の方が ANEtty を AIR アプリで作ったそうです。多分、パス等を指定してコマンドをたたいてるんだと思います。

Flex

マニュフェストファイルっぽいファイルを作ってプラグインの管理をしてやるそうです。



    com.yoo-s.ane.HelloWorldANE

ざっとした概要ですが、ちょっとサンプルアプリ作りたくなってきました。

参考サイト

Adobe のサンプルを見るのが一番早い気がします。 - Native extensions for Adobe AIR - ANE Lab - AIR 3 Native Extension 7 Try Develop HelloWorld ANE SWC

ADEP Data Services for JEE 4.6

Flex/Flash/AIR 2011/11/09

LiveSycle Data Service から名前が変わって、Adobe Digital Enterprise Platform(ADEP) として生まれ変わったそうです。今までは Java のみ対応ですが、以下のプラットフォームで SDK が用意されました。

クライアント SDK

Flex/AIR
Java
Objective-C (iOS client)
Android (jarファイル)
HTML5/JS (JavaScript Client)

.NET framework v4.0 が必要 RemoteObject の呼び出しが JavaScript でも行えるようになったモデリング生成ツールで Javaのファイルを書き出してくれるが、テンプレートをカスタマイズして

価格と機能概要

Basic版とAdvance版があり、値段はまだ決まってないそうですが、うん千万という話も・・・（怖）搭載機能比較表

The ADEP Post に情報が載っているそうです。 BlazeDS はバグフィックスのみで機能提供はないらしいです。

Stage3Dの概要

Flex/Flash/AIR 2011/11/09

FlexUG でも説明はあったのですが、Flash Player 11 の Stage3D についての解説が、Stage3Dコンテンツ制作入門で掲載されています。

Flashがメインですが、FlashBuilder の説明も記載されてます。池田さんのサイトClockMakerの記事で、GPUを使ったデモがあるので参考になるかと。

particleeditor を使って、PEXファイルを書き出し。これを AS3 で使える、Starling Frameworkで使って再生という流れだそうです。

こう言ったアニメーションを作るのって、OpenGL でいちから書くのは大変でフレームワークの理由は必須かと思います。モバイルアプリで電子書籍とかは、Air For Android, Air For iOS で作るのもありですよねぇ。

mp3 再生

Flex/Flash/AIR 2011/10/24

Flashの超・超初心者ネタです。。。凄く久しぶりの Flash で操作に戸惑いながら、mp3 再生しようと思って MediaController で作ってみる・・・

再生できない！（爆）

ずっと前に、FLVPlayer を利用した記憶があったが、Flash コンポーネントには、MediaController と MediaDisplay と MediaPlayBack がある。何だか、MediaController の使い方がよくわからなかったので、MediaPlayBack コンポーネントにしたらうまくいった。この３つのコンポーネントの違いは、Flasher じゃないのと調べる気力がないのでやめます（苦）

flaファイル

MediaPlayBack を配置してインスタンス名をつける。（例では、soundPlayer とした） [as3]

include "settings/default.as"

include "scripts/sound.as"

[/as3] fla ファイルのタイムラインの最初に記述。

default.as

[as3] var debug = false; var setting = new Array(); setting['sound_dir'] = "sounds/"; [/as3] 気休めにファイルを分割して設定ファイルを作成。

sound.as

[as3] soundPlayer.controllerPolicy = "on"; soundPath = setting['sound_dir'] + sound_file_name; soundPlayer.autoPlay = false; soundPlayer.contentPath = soundPath; soundPlayer.load(); [/as3] sound_file_name は、htmlからの引数です。

index.html

引数は、FlashVars で渡してやります。（例の場合、sound_file_name=19.mp3）

Felica & NFC と AWS ライブラリ

Flex/Flash/AIR 2011/03/09

FlexUGに久々に行ってきました。

真面目なデモは、まぁそれなりでいたが、Lite Talking の内容が濃かったです。

今、流行に流行ってる NFC ネタ。 Felica のカードでVideo Player にタグを入れたり、音楽再生したり。

参考サイト

Air & Flex & NFC ネタは Felica Developer's Blog にまとまってます。その他、Flash/AIRとFeliCaの連携 - 携帯電話の制御とか Sony Felica SDK も。開発はWindowsじゃないとできない？

てか、

2009年に発表されてたって知らなかったorz

いやぁ、作るアプリによっては Flex 4 でのスマフォ開発はありかも知れない。

という事で、家にあった「Sony PaSoRi」カードリーダー(Windows用）を Mac で試してみる事に。しかも Air アプリです！

Sony PaSoRi を OSX で利用する

まず、前述のドライバー FeliCa Proxy を起動する。 Air NFC

次に、FLO:Qの Widget Manager をインストール後、電子マネービューワーをインストールするだけ。 Air NFC

Air NFC

4,350円入ってました。 Air NFC

ActionScript API for AWS

あと、面白かったのは AWS の管理ツール。 Flex Coder

Amazon の API にActionScript がない！

って、ことでSWCライブラリを作ったそうです。

認証部分が面倒らしく、そこら辺をFlex仕様でまとめてます。基本インスタンスを作成して、プロパティを設定するだけ。

これ見て、「あぁやっぱAmazonのサーバ使おうかな？」と思ったりw

Wallaby FlashをHTML5に変換する

Flex/Flash/AIR 2011/03/08

AdobeがFlashをHTML5に書き出すツール Wallaby を公開したようです。

Flash® Professional って記載されてるけど、Flex じゃダメなのかな？今度の例会で質問してみよう。

アプリのUI

UIは凄い質素です。 wallaby

設定もログモードとブラウザ起動設定くらい。 wallaby

コンバート

手っ取り早く、Flash CS5のサンプルでConvertしてみる。サポートされてないモジュールがあるとWarningがでる。 wallaby

Filter、Advanced Color等、機能によってはコンバートできない。 wallaby

HTMLファイル構成

wallaby ・jquery: 1.4.2 　でもアニメーション処理は、してない模様。

・css： CSS3で webkitのみ対応 CSSアニメーションを使ってるので、重たいと思われる。

・svg: 画像はSVGフォーマットを利用

動きによって CSS3、JavaScriptを使い分けている模様。

実行結果

Flash

HTML5

アニメーションの基本仕様は、Safari Reference Library -Animations を参照

JavaScript側で webkitAnimationIteration、webkitAnimationStart、webkitAnimationEnd でイベントリスナーを登録し、CSS側で @-webkit-keyframes from ... to を作成。

■JavaScript

candle.js

・「xxxx_sprite」「xxxx_fs」htmlクラスのエレメントを探す・左右の揺れは、CSS クラスから -webkit-animation-duration を取得しアニメーション終了時間を計算・次のエレメントの取得は nextElementSibling を利用・display: none, block でパラパラ描画


function wlby_calc_timeout(c) {
    var timeout = (new Date).getTime();
    while (c) {
        timeout += parseFloat(getComputedStyle(c)['-webkit-animation-duration']) * 1000;
        c.timeout = Math.round(timeout);
        c = c.nextElementSibling;
    }
}
var wlby_hide_children = function(self) {
    var c = self.firstElementChild;
    while (c) {
        c.style.display = 'none';
        c = c.nextElementSibling;
    }
}
var wlby_activate_sibling = function(evt, self) {
    if (evt.srcElement != self)
        return;
    if (self.style.display == 'none')
        return;
    if (!self.timeout)
        wlby_calc_timeout(self);
    self.style.display = 'none';
    var sibling = self.nextElementSibling;
    if (!sibling)
        return;
    while ((sibling.timeout < evt.timeStamp)&&sibling.nextElementSibling)
        sibling = sibling.nextElementSibling;
//    $('.wlby_fs', sibling).css('display', 'none');
//    var n = new Number((sibling.timeout - (new Date).getTime()) / 1000);
//    sibling.style.webkitAnimationDuration = n.toString() + 's';
    sibling.style.display = 'block';
};
var wlby_activate_children = function(evt, self) {
    if (evt.srcElement != self)
        return;
    wlby_hide_children(self);
    var c = self.firstElementChild;
    if(!c)
        return;
//    $('.wlby_fs', c).css('display', 'none');
    wlby_calc_timeout(c);
    c.style.display = 'block';
    c.style.webkitAnimationDelay = '';
}
var wlby_loop_children = function(evt, self) {
    if (evt.srcElement != self)
        return;
    wlby_activate_children(evt, self);
    var c = self.firstElementChild;
    if (!c)
        return;
    c.style.webkitAnimationDelay = '0s';
}
$(document).ready(function() {
    $('.wlby_sprite').each(function()
        { this.addEventListener('webkitAnimationIteration', function(evt) { wlby_loop_children(evt, this); return false; }, false, false) });
    $('.wlby_sprite, .wlby_graphic').each(function()
        { this.addEventListener('webkitAnimationStart', function(evt) { wlby_activate_children(evt, this); return false; }, false, false) });
    $('.wlby_fs').each(function()
        { this.addEventListener('webkitAnimationEnd', function(evt) { wlby_activate_sibling(evt, this); return false; }, false, false) });
});

■CSSの一部抜粋・@-webkit-keyframe の opacity でフェイドイン・フェイドアウトを実現している [css] @-webkit-keyframes wlby_frameset-animation { from { } to { } }

.wlby_fs, .wlby_graphic { -webkit-animation-name: wlby_frameset-animation; }

.wlby_graphic { -webkit-animation-duration: 1s; }

.wlby_masked { height: inherit; position: inherit; width: inherit; }

.wlby_sprite { -webkit-animation-name: wlby_frameset-animation; -webkit-animation-iteration-count: infinite; }

@-webkit-keyframes wlby_KF_3 { from, 4.49% { -webkit-transform: matrix(1, 0, 0, 1, -0.452, -5.589) skew(-69.891deg,27.062deg) scale(1.0112, 0.2792); opacity: 0.200259; } 5.61%, 8.98% { -webkit-transform: matrix(1, 0, 0, 1, -0.452, -5.589) skew(-69.891deg,27.062deg) scale(1.0112, 0.2792); opacity: 0.168419; } 10.11%, 14.6% { -webkit-transform: matrix(1, 0, 0, 1, -0.452, -5.589) skew(-69.891deg,27.062deg) scale(1.0112, 0.2792); opacity: 0.200259; }

....

.wlby_4 { -webkit-animation-duration: 2.90323s; -webkit-transform: matrix(1, 0, 0, 1, -25.05, -29); -webkit-transform-origin: 20px 106.95px; }

.wlby_47 { -webkit-animation-duration: 0.0322581s; display: none; position: absolute; -webkit-transform: matrix(1, 0, 0, 1, -13.95, -28.55); }

.wlby_48 { -webkit-animation-duration: 0.0322581s; display: none; position: absolute; -webkit-transform: matrix(1, 0, 0, 1, -13.65, -28.25); } [/css]

Flex HeroでAndroidアプリを作ってみる

Flex/Flash/AIR 2011/02/18

xxxx-app.xml

AndroidManifest.xmlのインターネット設定

]]>

続きはあとで

FlexでAndroid

Flex/Flash/AIR 2011/02/18

最近、Flexをさわっていなかったがスマフォ関連も絡んできたのでチェック。 Flex（プレビュー版）を使った Android アプリケーション開発 Flex for Android in 90 Minutes

プラットフォーム

次期バージョンはそれぞれFlex SDKが「Hero」、Flash Builderが「Burrito」だそうで、Adobe AIR 2.5ではモバイルデバイスに対応とのこと。 Flex SDK 「Hero」とFlash Builder 「Burrito」を使用したモバイルアプリケーション開発ダウンロードはAdobe Labsから・Adobe Flex SDK "Hero"

デブサミで発表したアドビの轟さん Flexで作るAndroidアプリ開発チュートリアル 1

FlexUGにも行かないとなぁ。

<< Top < Prev Next > Last >>