サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
blog.romatica.com
この記事はAdobe Adobe AIR Advent Calendar 2013 8日目の記事です。 Air Native Extention(以下ANE)作るのめんどいよねー。 うんうん。 最近ANEからはなれていたけど、ANEtty以外にもなにかANE生成のお助けツールみたいなのないかなーと思って探してみたところ、 XcodeのANEテンプレートをgithubで公開している方がいて つかってみたら、便利だったので、使い方メモ。 divijkumar/xcode-template-ane 1 ane化するシェルスクリプトと 2 .ipaのデバッグ用のシェルスクリプトが ありました。 2とか便利じゃね!? [1] swcを作る 下記のようなAS3を用意し isSupported というファンクションを用意し swcとして書き出しておきます。 package { impor
AIRアプリ(デスクトップ) から シェルスクリプト を叩きたい! みたいなことってたまにありますよね。 (ローカルサーバを起動したいとか、コマンドラインで起動するライブラリ使いたい的な時とかとか…) そんなときの方法メモ。 ポイント ポイントは3つ。 ・ネイティブプロセスを利用 ・アプリケーションは「ネイティブインストーラー形式」でパッケージする(Macはdmg、Winはexe) ・シェルに実行権限を与える [参考] Adobe Flash Platform * AIR のネイティブプロセスとの通信 シェルスクリプトの用意 例)hello.sh 「HELLO + (AIRから受け取った文字列)」を出力するシェルスクリプト。 #!/bin/sh # $1にはAIRから渡された引数が入ってくる echo 'HELLO' $1 今回はAIRアプリ内にこのシェルを含めちゃいます。
Web/PHPStorm に Coffescript の環境設定する手順メモ。 「.coffee」ファイルを保存するたびに自動で 「.js 」ファイルが吐き出されるようにしてみます (私PHPStorm もってないのですがたぶん設定同じ??かと思います。たぶん…たぶん…) [1] node.js をインストール まずは下記サイトからnode.jsをダウンロードしインストール node.js これで node と npm (Node Package Manager) というのが一緒にインストールされます。 ちゃんとインストールされたかどうかはターミナルを起動し $ node -v $ npm -v と打ってバージョンが表示されたらOK. [2] Coffeescriptをインストール 先ほどインストールした npmをつかってcoffeeをインストールします。 下記のようにターミナルで
Javascript の 3Dライブラリ three.js で、Blender で作成したモデルデータを表示してみました。 動作サンプルは下記リンクから。 [SAMPLE] Three.js Sample | Octcat モデルデータはGithubからダウンロードできます。 itoz/Octcat3DModel [memo] 最初、テクスチャが反映されず?だったのですが、Blender側のマテリアル設定のTHREEのMaterial Type を Basic にすると無事反映されました。 参考 Three.jsとBlenderによるWebGL|1 pixel|サイバーエージェント公式クリエイターズブログ Brendering: Blender で Three.js WebGL Animation
2012.7.31 に開催された第二回 Stage3D 勉強会で発表した資料をSlideShareにアップしました。 資料内のDEMOのリンクは下記。 Interractive DEMO 1 [Alternativa3D] ColladaアニメーションモデルをTween24で変形 Interractive DEMO 2 [Alternativa3D] AnmationSwicherクラスによるAnmationClipの切り替え colladaモデルに設定したアニメーションをインタラクティブに切り替えるデモ。 いわゆる3D版gotoAndPlay(“label”)みたいなもの。 Modeling DEMO 1 モデリングサンプル | Octcat Modeling DEMO 2 モデリングサンプル | マリオ Away3D DEMO イラストレータデータ(SVG)>Blender読み込み立
前回作成したサンプルをiOSアプリとして書きだしてみました。 ActionScriptのソースはそのままに、さくっとiOSアプリに書き出せて、初代iPadでも60FPSで動いています。 一昔まえだと、AIRでiOS 3Dアプリなんて無理だろー、なんて思っていたのが嘘のようですね。 あとは、企画と実装が相互に良いコミュニケーションできれば、いいコンテンツが作れそうですねー。 (それが一番むつかしいとおもいますが) 一応、Stage3Dを利用したiOSアプリ化するにあたっては、アプリケーション記述ファイルに下記の追加を忘れずに。 <renderMode>direct</renderMode> <depthAndStencil>true</depthAndStencil>
先日正式版が発表された Away3D。 Adobe公式サポートもついて、今後ユーザーが増えそう?な予感がします。 そして先月から(?) Away3D と他のライブラリとの連携サンプルが Github で公開されていました。 [github] Away3D integration-examples-fp11 現状、ほとんどが、Starling Framework との連携サンプルになっています。 例えば案件として3Dを利用する場合、それ単体ではなく、前面レイヤーにはUIなどの情報エリアを設ける場合がほとんどかと思います。 これらのサンプルは、そういった3Dベースでレイヤーを操作するようなコンテンツを作る場合に、参考になると思います。 動作サンプル ということで以下、公開されているサンプルを、それぞれをコンパイルしてみました。 Away3D_Starling_Layering_Demo
AIR3.4 beta で iOSに直接アプリをインストール、アンインストールできるようになりましたので、早速試しました。 いままで手動でしかできなかったので、開発が少し楽になりますねー。 [1] 下準備 AIR 3.4 SDK betaをダウンロード。 適当なflexSDKにマージします。 まずidbを使ってデバイスIDを取得しておきます。 idbのありかは、 [sdk]/lib/aot/bin/iOSBin/idb ターミナルを起動して idb -devices とすると下記のように出力されるので、この「4」の部分を覚えておきます。 Handle DeviceClass DeviceUUID DeviceName 4 iPhone 31ca76f7b350092c52464b938619d7466e828a iPhone4S [2] インストール 下記の[]の部分を適宜書き換え、
前回にひきつづき Blender とAlternativa3D を試します。 今回は、前回のモデルに環境マテリアル(EnvironmentMaterial)を適用して、メタリックな質感にしてみます。 [SWF] DEMO : Metal Slime 今回も、参考にした書籍はStage3Dプログラミング。 [1] まずは環境マップ の作成 まずは、バックグラウンド兼キャラクターに写り込ませる環境マップを作成します。 ※これはStage3Dプログラミングに入っていたサンプルそのまま。 // 環境マップ用のリソースを作る var environmentMap :BitmapCubeTextureResource= new BitmapCubeTextureResource( new LEFT().bitmapData , new RIGHT().bitmapData , new BACK().
Stage3Dにはなかなか安価でいいモデリングツールがないですよね。 なので使い勝手は悪いけど、無料のBlender(2.63a)でモデルを作り、Collada形式を読み込める Alternativa3Dで表示してみます。 sample 1 [DEMO] sample 1 | Slime (※FlashPlayer11.3以上) sample 2 [DEMO] sample 2 | AmazonMan (※FlashPlayer11.3以上) iOSアプリとして書き出す ためしにAir for iOSで書きだしてみました。 余裕で60FPSでてます! (ポリゴン数約46000〜48000) 参考書籍 Alternativa3D部分は下記の書籍が大変参考になります。 Stage3Dプログラミング まとめ Blender。使いづらいけど、無料だし、やって見る価値はあり?かもしれな
AIR3.3 の新機能 iOSシミュレータサポートを試します。 これはiOSシミュレータ上でAIRアプリを動作させデバッグできる、ということ。 今まで実機でしか確認できなかったのを考えると、だいぶ楽になりそう。 FDTモバイルプロジェクトを作成 [1] iOS用プロジェクト作成 [New FDT Project] から[Mobile] >[AS3 iOS] を選択し任意のプロジェクト名をつける [2] antの編集 ant/ios_debug_build.xml 内の ipa-debug-interpreter部分を、ipa-debug-interpreter-simulatorと書き換えましょう [3] シミュレータにインストールするant targetの追加 同じく、ant/ios_debug_build.xmlに、下記を追加しましょう。 例) <target name="in
Categorie:{ actionscript, AIR, Android, iOS } Tag:{AIR, Android, iOS, Sample, youtube} Comments:{ No Comments } Posted:{ 2012.02.18 12:11:08 } モバイル AIR(Android / iOS)の Accelerometer の値をイマイチ理解していなかったので、角度に変換するサンプル作ってみました。 動作イメージ いまいちイメージがわかりにくいかと思ったので、動作イメージを Youtube にアップ。 サンプルコード コードは下記です。(thx! @saharan) ※もっと良い書き方あるかな? 関連記事 [as3]ImageLoadQueueクラスドキュメントとサンプルコードアップ wonderflでFLARToolkitサンプル アクセスランキ
「 VGA や XGA って何ピクセルだっけ??」 って事よくありませんか? そんな時に便利な、「モニタ解像度一覧壁紙」を作成しました。 PSD形式なので背景のデザインは自由。 フォントもラスタライズしてないのでお好みに変更できちゃいます ダウンロード 目下話題沸騰の革命サービス Gumroad で試しに販売してみます!。 ※花粉症の私のマスク代になります、たふけてくださいよろしくおねがいします。 [Gumroad] Monitor Resolution Wallpaper PSD (200円) ご意見ご要望ありましたら、コメントかTwitterにてよろしくおねがいしますm(__)m
最近ちょくちょく haXe で js を試しているのでメモ。 そもそも haXe って? haXe ってなに?って人のためにざっくり説明。 haXe は1言語で、Flash (AS2/AS3) 、 js 、PHP、C++、NekoVM、にかきだせる言語。(.hxファイルをコンパイラオブションで出し分ける) haXe – haXe の紹介 記述は AS3 とか JAVA に似ていて、サーバー側もクライアント側も1言語でかけるってのが、特にメリット(かな?)。 ※「1言語」ってのは「ワンソース」と同義ではないです。念のため。 特に、 haXe に興味を持った個人的理由は下記。 ・(私自身が) オブジェクト指向 (AS3 or JAVA) に慣れている。 ・ js に慣れていない。 ・ js を仕事で書くことになった。 ・ js でも AS3 みたいに継承とか書きたい。(proto
「js の prototype なじめないんです!」 「extendsとかしたいんです!」 「静的型付けじゃないと、安心してねれないんです!(´・ω・`)」 って病気の人いませんか?(私です) 「じゃ haXe で js やってみればいいんじゃね?」 ↓ 「でもライブラリ (jQueryとか) どうやって使うんだろ?」 。。ということで、haXe で jQuery を使う手順メモです。 ※そもそもhaXeって何?って方はこちら ※haXeの開発環境 は FDT5 を使用。 ※haXe 自体はインストール済という前提で書いていきます。 jQueryExtern を利用 jQueryExtern という、jQueryラッパーライブラリがあります。 ※いわゆる「コンパイルを通すためだけのjQuery型指定のみが記述されたライブラリ」みたいな物。 この利用方法は下記2つです。 [利
ネットワーク状況変化(3G,Wi-Fi,未接続)をシンプルに通知してくれる、Air Native Extension (iOS用)を作ってみました。 C 側のソースコードは、下記のサイトで公開されているライブラリを利用させて頂きました。(ありがたや) Cocoaの日々: [iOS] ネットワーク接続状況取得ライブラリを公開 Download itoz/ANE_NetworkStatus – GitHubhttps://github.com/itoz/ANE_NetworkStatus 動くサンプルipaファイルもGithubにアップしてあります。 ※僕自身、Obj-Cあまり経験ないので、いいカスタマイズコードにはなっていないかもしれません、、 ※ツッコミなどあったらよろしくお願いします。 構成 NetworkStatus_iOS/ (Cライブラリ用) NetworkStatus_Li
iOS で AIR Native Extenison (以下ANE) アプリを作成するときにハマった点メモ。 正確に確認できていないので間違った情報もあるかもしれませんが、あくまで参考までに。 ※特にiOSやANEに限ったことではないものも混ざっています。 .aneを含んだAIRアプリパッケージ時のエラー アプリケーションIDの間違い? An implementation for native extension ‘[クラスパス]‘ required by the application was not found for the target platform. ・アプリケーション記述ファイル(xxx-app.xml) に extenisionID がない。 ・.ane自体を生成するときに失敗している(たぶん)。 extenisionIDは下記3つが同じでなければならないので、
AIR Native Extention (以下ANE) で ネイティブ からAIR側にイベントを送出するには FREDispatchStatusEventAsync() を実装します。 この関数は、ネイティブからas側にStatusEventを送出できる関数です。 as3 サンプル まず.aneに含めるSWCライブラリ側で、コンテキストにStatusEventをリスナーしておきます。 //〜略〜 _context = ExtensionContext.createExtensionContext("[エクステンションID]", "type"); _context.addEventListener(StatusEvent.STATUS, onStatusEvent); //〜略〜 private function onStatusEvent(event:StatusEvent):vo
flash上の任意のDisplayObjectを Bitmap化して、ByteArrayにし、base64変換し、 その文字列をExternalInterface経由でjavascriptに受け渡して、 html上に表示するサンプルを作って見ました。 [sample] flashでBitmapDataをbase64エンコードし、js経由でhtmlに表示する どんな場合に有効な手法? 自分もいまいち使いどころがぴんと来ませんが、 jsでは生成できないようなイメージを動的にflashで作成して、htmlに渡すなど。でしょうか。 例えば、以前 jsdo.it で作成したトランスメタルジェネレータ HTML5版では、 flashでサウンドの波形画像を作成し、html上に表示しています。 Trance Metal Generator HTML5 α ver ( トランスメタルジェネレーター
leebrimelow.com » Two-Part Tutorial on Android Native Extensions 上記のサイトのチュートリアル動画を参考に、Android の Notification に通知するANEサンプルを作成しました。 フォルダ構成とかもほぼ動画通りになっています。 動画ではshellスクリプトでANEのコンパイルを自動化していますが、 Antで作成してみました。 まだ使い勝手が悪いですが、一応動いたということで、 ファイル一式をアップします。 http://itoz.jp/lab/ane/android/Notifications.zip コンパイル方法は下記。 1) build.propertiesに FLEX_SDK ANDROID_SDK のパスを設定します。 2) 実機を接続、もしくはエミュレータを起動します 3) ター
[as3][sound] Trance Metal Generator α版 (トランスメタルジェネレータα)作りました。 Posted:{ 2011.08.18 01:27:47 } Categorie:{ actionscript, flash, Heavy Metal, Wonderfl } Tag:{as3, Heavy Metal, sound, Teraco, Wonderfl} Comments:{ } 1ヶ月くらい前ですが、teraco – 東京てら子Vol.17 『俺的効果音の作り方&使い方』で前々から作ってみたかったメタルのジェネレーターをつくって発表しました。 そしてWonderflにアルファ版としてあげてみた↓。 手っ取り早く遊んでみたい場合は、緑色の「set sample」ボタンを押して、再生。 Trance Metal Generator(トランスメタルジ
Flash 畑の人間にとって、コンテンツ制作において「心地良い動きにこだわりたい!」と思うのは至極当然ですよね。 Android などで最近は Java を触る事が多いんですが、Flashと違ってアニメーションなんて前提の言語じゃないし、Tween 系のライブラリなんてあるんだろうか、と思っていたところで社内の人に教えてもらったJava Universal Tween Engine (Apache License 2.0)。 ただ Tween させるだけでなく、TweenGroupで、いわゆる Flash の Progression でいう、 SerialList、ParallelList のような事も出来るし、コールバックで addEventListner 的な事も出来ます。 これはよさそう!。ネットは広大。 動作サンプル [ Java アプレット] クリックした位置に円がトゥイーンする
AS3 でローディングを作る時、下記 のような方法があります。 [1] 本体の swf とは別に、プリロード swf を作る。 [2] factoryClass でプリロードクラスを指定し、ドキュメントクラスより先に実行する。 [1] の方法は swf が2つ出来てなんか好みじゃないので、最近は [2] の方法をよく使っています。 ※そもそも factoryClass って何?って人は、下記サイトが参考になります。 メタデータタグ[Frame]とは? | Mtok-blog 今回ハマった点 で、何でハマったかと言うと、 「 swf 全体が読み込まれた後にしか、ローディングがスタートしない」現象です。 ※つまり、全くローディングになってない。 問題はドキュメントクラスを生成する部分でした。 /* ※ Index.asをドキュメントクラスとした場合。*/ var indexClass:
モーダルな ErrorDialog というクラスを作りましたので公開します。 以下、特徴など説明です。 どの階層で addChild しても必ず stage 最前面に表示 そもそもモーダルダイアログとは、 そのダイアログを閉じるまで、他の操作をできなくするタイプのウィンドウの事です。 ( Photoshop で言うフィルタのウィンドウみたいな物ですね) この ErrorDialog クラスは、手軽にそれを実装するため、 どんな階層でもnewしてaddChildeするだけで、必ずstageの最前面(&中央)に表示されるようになっています。 //どんな深い階層でaddChildしてもOK! var errorDialog:ErrorDialog = new ErrorDialog("タイトル","メッセージ",new Error()); addChild(errorDialog); 複数
先月ヘテムルでGitが使えるようになってたので早速使ってみます。 コマンドライン作業もいいんですが、直感的に分かりにくいし、 Git の GUI ソフト Tower を買っていたので、それで使う手順のメモです。 [1] heteml サイトで SSH アカウントを作成 ヘテムルサイトにログインし、下記のページでアカウント作成。 https://admin.heteml.jp/web/ssh/ ここで作成した [ユーザー名]、[サーバー]、[接続ポート] を控えておきます。 [2] heteml サーバーに git リポジトリ作成 この作業も Tower で出来ればいいんですが出来ない(?)ので、ターミナルを使用します。 1.サーバーに SSH ログイン ターミナルを起動して、 $ ssh [ユーザー名]@[サーバー] -p [接続ポート] を入力します。 するとパスワード入力を求め
※このエントリは「東京てら子14、自由発表枠」で発表した内容をまとめたものです。 タイトル通りなのですが、 Air for Andorid カメラアプリ作成してみてつまずいた部分です。 CameraUI で撮影して AIR に渡される画像の回転方向が機種によって違うのです。(;´Д`)ウソーン ※例えば 「横向き撮影がデフォルトとして設計されている機種(GalraxyTabとか)」があるようで、 本体を立てて撮影しても、−90度回転した状態でAIRに渡ってきます。 解決策は? AIR からは Android の機種を判定できないので、方法としては [1] : 画像を回転させる UI を作りユーザーが任意に回転出来るようにする。 [2] : Exif の回転情報を元に補正する。 などがあると思います。 今回は [2] : Exif の回転情報を元に補正について書いていきます。 E
Flashの演出を考える時に困ったら、よく参考にしている物を紹介します。 演出のヒントがたくさん転がっています。 MarkColeran 映画等に出てくるコンピューター画面のUIをデザインしている、 MarkColeran氏のポートフォリオ映像、2本。 これらは、言ってしまえば所謂「インタラクション」では無く「映像」として作られていて、実際このようなUIがあったら本当に使いやすいかどうか?は分かりません。 が、しかし、このような映像で一番重要なのは、使いやすさでは無く、 「一瞬しか映らないコンピュータ画面で、どんな処理が行われているか直感的に視聴者に伝わる事」なはずです。 彼のモーションデザインを見ると「今、顔認証したな」とか「指紋を解析してるな」とか「敵が建物に侵入してきたな」とか、そういう事が一瞬で理解できるのです。 Microsoft Sustainability Micro
「ビット演算」って聞いただけで、「ややこしそうっ!」ってなりますよね。 自分もそうでした。 まずは理解! そもそもビット演算の理解には、下記サイトが参考になりました。 ・ 馬鹿全 – (AS3)ビット演算を倒す ・BeInteractive! [ビット演算って面白いですよね] ・符号つき2進数 ↑このページ中央あたりにあるJAVAアプレット分かりやすいっ! ピンっとくるまでには時間がかかりますが、なんか便利そうだ!? と言う事がわかると思います。 で、何に使うの? 馬鹿全さんのブログでは、「RGB値、ターンチェンジ、移動フラグ、簡易3D座標 etc..」に使える、とありました。 が、僕はさらに「属性検索」に使える!と思いました。 サンプル 例えばゲームなら「勇者、戦士、僧侶…」みたいな、どの職を経験したか?などを、 その数ぶん Boolean 変数で管理したら大変 なので、そんな
先日のエントリ 「日本の Flasher が誰も知らない? “BlackBerry SDK for AIR” が実は便利なんじゃないか!?」 の続きとして手始めに ボタンクラスのサンプルを作成しました。 qnx.ui.buttons パッケージサンプルSWF [SWF] R o m a t i c a : dev | BlackBerry SDK for AIR | Button Class Sample 前回のエントリでも書きましたが AS3ベースなので、 普通にウェブにも利用できます。 デザインスキンの変更のやり方がまだわからず。。。(そこ一番重要!) デザイン変更に自由度があれば、 Web にも Airアプリ にも、かなり使えそうです。 ソースコードダウンロード 上記SWFのソースをアップしました。 ※ SDK自体 は含まれていませんので、BlackBerry のサイ
次のページ
このページを最初にブックマークしてみませんか?
『R o m a t i c A : Blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く