FlashDevelop4 RC1 & AIR3 でAIR for iOSを試してみた

By ton4 Comments

2011年10月4日、ついにFlash Player 11 と AIR 3 が出ましたね
FP11最大の目玉である3D機能とそのGPUレンダリング、その他にも地味に嬉しい新機能がいっぱいです
新機能の詳細は以下のリリースノートを御覧ください
Flash Player 11 および AIR 3 リリースノート

また少し前にFlashDevelop4のRC1がリリースされました
馬鹿全 – FlashDevelop4.0.0 RC1 リリース

このバージョンからAIR モバイルプロジェクトのテンプレートが追加されました
このプロジェクトを選択すると、AndroidとiOS向けのAIRを作成することができます
できればAndroidも試してみたかったのですが持ってないので、今回はAIR for iOSに絞って手順を紹介していきます

この記事で試した環境はWindows7 + Flex 4.5.1 SDK + AIR 3.0 SDK + FlashDevelop4.0.0RC1 + iPhone4 iOS 4.3.5 です

この記事を実際に試すには、有料のApple iOS Developer Program に登録する必要があります

こちらの記事も参考にするといいかもしれません
AIR2.7でAIR for iOSを試してみた

ちょっと長いので覚悟してくださいw

続きを読む »

AIR, AS3, Flash, iPhone

AS3 キーボードイベント拡張ライブラリKeyinsを公開しました

By tonNo Comments

PCを整理してたら2年前に作ったライブラリが出てきたw
この手のライブラリは皆さん俺俺ライブラリとして作っていることと思いますが、せっかくなので公開します。
MIT Licenseです。

Keyinsとは

キーボードイベントを拡張したライブラリです。
簡単に使えるよう、できるだけシンプルに設計しました。

通常キーボードイベントはKEY_DOWNとKEY_UPだけですが、
KEY_DOWN_FIRST、KEY_DOWN_FIRST_<KEY>、KEY_DOWN_<KEY>、KEY_UP_<KEY>
のイベントが追加されています。
キーを押したままFlashが非アクティブになると、KEY_UPイベントが送出されます。
また、isKeyDown(keycode:uint)メソッドを使用して特定のキーが押されているか調べることができます。
staticメソッドしか使用しないため、どこからでもキーの状態を知ることがができます。

ちなみにKey Inspectorの略です。名前が長いと使うのがしんどくなるので短くしましたw

KEY_DOWN_FIRST

KEY_DOWNイベントはキーが押されている間、常に送出されるイベントですが、
KEY_DOWN_FIRSTはキーが押された時に一回のみ送出されるイベントです。

KEY_DOWN_FIRST_<KEY>

KEY_DOWN_FIRST_は特定のキーが押されたときに一回のみ送出されるイベントです。
例えばKEY_DOWN_FIRST_Aイベントを登録するとAキーが押されたときに一回のみメソッドが実行されます。

KEY_DOWN__<KEY>

KEY_DOWN_は特定のキーが押されたときに送出されるイベントです。
例えばKEY_DOWN_Aイベントを登録するとAキーが押されたときにメソッドが実行されます。

KEY_UP_<KEY>

KEY_UP_は特定のキーが離されたときに送出されるイベントです。
例えばKEY_UP_Aイベントを登録するとAキーが離されたときにメソッドが実行されます。

isKeyDown(keycode:uint)

isKeyDown(Key.A) とすると、Aキーが押されている場合はtrueを返します。
ENTER_FRAMEハンドラーの中でキーが押されているか調べたい場合などに便利です。

続きを読む »

AS3, Flash, ライブラリ, 作ってみた

「あ」のうた を作ってみた

By tonNo Comments

デザインあ

みなさん デザインあって知ってますか?
NHK教育の番組なんですが、中村勇吾さんが映像監修をされているそうです
色々なデザインを色々な角度から、美しい映像と音楽でみせてくれる素晴らしい番組です

このデザインあのサイトの中に、 「あ」のうたという特設サイトがあるのですが、僕はこれがすごい好きですw

作ってみた

そこで、自分でも作れないかなーと思って 「あ」のうた を真似して作ってみました

「あ」のうた – ah song – – wonderfl build flash online

オリジナルのクオリティが高すぎて挫折しそうになりましたが、なんとか見れるところまで作れました
中途半端な真似っぷりですいません、力尽きました・・・w

曲も真似して作ってみようと思ったんですが、音関係はさっぱりの初心者なので諦めました・・・
代わりにマイクや好きな曲を流せるようにしました
「あ」のうたなのに全然違うものを流しちゃって台無しな感じがしますが許してください><

AS3, Flash, 作ってみた

※【学生限定】 タダでGitHubのMicroプランを手に入れる方法

By ton1 Comment

gitのホスティングサービスで有名なGitHubですが、無料プランでは公開リポジトリしか作れません。
非公開リポジトリを作るには有料プランに入る必要があり、一番小さいMicroプランでも7$/月かかってしまい、学生には少々お高いです。

しかーし!学生なら、タダでMicroプランにできてしまうのです!

方法は、まずMicroプランにして欲しいアカウントにログインした状態で、下のページにアクセスします。
https://github.com/edu
学生は、I’m a student という所をクリック。
本名と、学校から貰ったeduメールアドレス、どこの学校に行っているのか、何のために使うのか、を頑張って英語で書きます。
そして送信!
あとはGitHubの中の人の返信を待つのみです。

僕の場合は2日で返信が来ました。

ちなみに、僕は適当に書いてしまって
日本の学校に行ってるよ!画像処理の研究で使うからMicroプランくれ!
としか書かなかったので (※実際はもっと丁寧に書いてます)
さらに、具体的にどこの学校行ってるの?何年生なの?今何の勉強してるの? と聞かれたので、
そこらへんを最初から詳しく書いとくと一発OK貰いやすいと思います。

あと、貰ったMicroプランは2年間有効みたいです。

それでは、学生にもっとgit、GitHubが広まりますように!

雑談

FxUG名古屋勉強会でスピーカーをさせて頂きました

By ton4 Comments

タイトルのとおりです、はいw

発表したスライドをSlideShareにアップしたので置いときます
発表時のスライドを一部加筆、修正してます

前にブログに載せたもの(AIR2.7でAIR for iOSを試してみた)とほとんど同じですが、
勉強会では実際にリモートデバッグのデモなどを行いました

アプリケーション記述ファイルのテンプレートも説明付きで用意したのでよかったら使ってください
AIR2.7でiPhoneアプリを作るときのテンプレートです
iPhone-app.xml

他の方の発表もすごく参考になりました

勉強会は勉強になるというより、いろんな方に会えたりすごい発表を聞いたりして、俺もやらなきゃ!っていう気持ちにさせてもらえるので助かってますw
今回は初めてスピーカーをさせて頂いたのですが、発表するために色々調べたりして、発表の準備自体がかなり勉強になりました
また機会があればスピーカーをさせてもらえればと思います

めっちゃ緊張したw

AIR, Flash, iPhone, 勉強会

AIR2.7でAIR for iOSを試してみた

By ton2 Comments

ちょっとAIR for iOSを試す機会があったので、どうせならと思いAIR 2.7で試してみました
AIR2.7の情報はここらへんが参考になります
Adobe AIR 2.7 開発者向けリリースノート
Adobe AIR 2.7 公開 – akihiro kamijo

試した環境はWindows7 + Flex 4.5 SDK + AIR 2.7 SDK + iPhone4 iOS 4.3.3 でテストしました

この記事を実際に試すには、有料のApple iOS Developer Program に登録する必要があります

目次
1.Flex 4.5 SDKをダウンロード
2.AIR 2.7 SDKをダウンロード
3.PATHの設定
4.swfを用意する
5.開発用証明書とプロビジョニングプロファイルの用意
6.アプリケーション記述ファイルの用意
7.パッケージ化する
8.iPhoneで動かしてデバッグする方法
9.実機で動かしている様子
10.感想
11.参考にしたサイト

Flex 4.5 SDKをダウンロード

まずFlex4.5 SDKを落としてきます
Download Flex 4.5 – Flex SDK – Adobe Open Source
ここからAdobe Flex SDKをダウンロードします
2011年6月19日現在のバージョンは4.5.0.20967です

落としてきたら解凍してわかりやすい場所に配置します
俺はフォルダをflex_sdk_4.5に変えて C:flex_sdk_4.5 に配置してます

AIR 2.7 SDKをダウンロード

次にAIR 2.7 SDKを落としてきます
まだ日本語サイトは2.6のままだったので、英語サイトからダウンロード
rich Internet applications | Adobe AIR SDK

解凍して、AdobeAIRSDKフォルダの中身をまるごとflex_sdk_4.5のフォルダの中に突っ込みます
Flex SDKとAIR SDKがごっちゃになりますがこれで大丈夫です

PATHの設定

コマンドラインからいじるので、AIR SDKのコマンドを認識させるためにPATHの設定をします
先ほどのflex_sdk_4.5のbinフォルダまでのパスを環境変数に追加します

Windows7の場合
Winキーを押して「システムの詳細設定」と打ちEnterを押すとシステムのプロパティが開きます
または、マイコンピュータを右クリック→プロパティ→システムの詳細設定をクリック でも開きます

次に「詳細設定」タブから「環境変数」をクリック
下半分の「システム環境変数」の中から「Path」と書いてある変数を選んで編集
末尾に「;C:flex_sdk_4.5bin」を追加してOK
※Flex SDKのフォルダ名は自分で変えた名前に適宜変更してください

ちゃんとPATHの設定ができてるか確認
コマンドプロンプトを開きます
※Winキー+Rを押すと「ファイル名を指定して実行」の窓が出てくるので、「cmd」と打ってEnterでコマンドプロンプトが開く

mxmlc -version と打ってバージョン情報が出ればFlex SDKの設定はおk
また
adt -version と打ってちゃんとバージョン情報が出たらAIR SDKの設定もおk

こんな感じ
コマンドプロンプトでバージョン確認

swfを用意する

メインコンテンツのFlashを用意します

ステージのサイズはフルスクリーンの場合
3GS以前 320 x 480
iPhone 4 640 x 960
で作れば大丈夫です
ステータスバーを表示させる前提で作るときは、縦を20ピクセル減らして作ればおk

開発用証明書とプロビジョニングプロファイルの用意

用意したFlashをiOSのネイティブコードに変換するには、開発用証明書とプロビジョニングプロファイルというものを用意する必要があります
また、これを用意するためには有料のApple iOS Developer Program に登録する必要があります
ここは省略しますが、わからない人は以下のヘルプを参考にしてください
Adobe Flash Platform * iPhone 開発ファイルの入手と操作

※Developer Program登録から開発ファイルの入手までの方が大変だったりしますが・・・w

アプリケーション記述ファイルの用意

アプリケーションの設定を記述した、アプリケーション記述ファイルというxmlを用意する必要があります
Flash CS5/5.5なら自動的に吐いてくれるのですが、コマンドラインからやる場合は自分で書く必要があります

アプリケーション記述ファイルの全体的な内容は以下を参考にしてください
Adobe AIR * AIR アプリケーション記述ファイル
Adobe AIR * アプリケーション記述ファイルの構造

iPhone固有の設定は以下を参考にしてください
Adobe AIR * モバイルアプリケーションプロパティの設定

注意点として
versionプロパティはAIR2.5以降からversionNumberに変更になったので流用する場合は注意が必要です

idプロパティは、AppleサイトのiOS Provisioning Portal のApp IDsで発行したApp IDと一致していなければなりません
テストする場合は、net.ton-up.* のようにワイルドカードを指定しておくと便利です

iPhone4のRetinaディスプレイに対応する場合は、iPhoneタグの中に

<requestedDisplayResolution>high</requestedDisplayResolution>

を追加する必要があります

アイコンはなくても大丈夫ですが、iPhone4のために114×114の画像を1つ用意しました

例 – Warp-app.xml

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<application xmlns="http://ns.adobe.com/air/application/2.7" minimumPatchLevel="0">

  <id>net.ton-up.warp</id>

  <versionNumber>1.0.0</versionNumber>

  <filename>Warp</filename>

  <description/>

  <name>Warp</name>

   <supportedProfiles>mobileDevice</supportedProfiles> 

  <copyright/>

  <initialWindow>
    <content>Warp.swf</content>
    <systemChrome>standard</systemChrome>
    <transparent>false</transparent>
    <visible>true</visible>
    <fullScreen>true</fullScreen>
    <aspectRatio>portrait</aspectRatio>
    <renderMode>auto</renderMode>
    <autoOrients>true</autoOrients>
  </initialWindow>

  <icon>
  	<image114x114>icon/icon114.png</image114x114> 
  </icon>

  <customUpdateUI>false</customUpdateUI>

  <allowBrowserInvocation>false</allowBrowserInvocation>

  <iPhone>
    <InfoAdditions>
      <!&#91;CDATA&#91;<key>UIDeviceFamily</key><array><string>1</string></array>&#93;&#93;>
      </InfoAdditions>
      <requestedDisplayResolution>high</requestedDisplayResolution>
  </iPhone>
</application>

パッケージ化する

これでようやくパッケージ化の準備ができました
コマンドラインで、swfファイルなどが置いてある場所に移動して、以下のコマンドを入力します
実際には1行で全て入力する必要があります

adt -package 
     -target  
     -storetype pkcs12 -keystore <*.p12>
     -storepass < password>
    -provisioning-profile <*.mobileprofile> 
    <*.ipa> 
    <*-app.xml> 
    <*.swf>
    < icon>
    < files>
    ...

C:Userston>adt -package -target ipa-test -storetype pkcs12
    -keystore private_key.p12 -storepass hogehoge
    -provisioning-profile Test.mobileprovision
     Warp.ipa Warp-app.xml Warp.swf icon/

-storepassオプションは証明書のパスワードを入力します
コマンドラインだと履歴が残っていやだって人は-storepassオプションを付けずに実行すれば毎回パスワードを聞かれるようになります

-targetオプションで指定できるタイプは次のようなものがあります

  • ipa-ad-hoc:アドホック配布用の iOS パッケージです。
  • ipa-app-store:Apple App Store 配布用の iOS パッケージです。
  • ipa-debug:追加のデバッグ情報を含む iOS パッケージです(アプリケーション内の SWF ファイルも、デバッグサポートを使用してコンパイルする必要があります)。
  • ipa-test:最適化やデバッグ情報を含まずにコンパイルされた iOS パッケージです。
  • ipa-debug-interpreter:機能的にはデバッグパッケージと同等ですが、コンパイル時間が短くなります。ただし、ActionScript バイトコードが解釈され、マシンコードには変換されません。そのため、インタープリターパッケージではコードの実行が遅くなります。
  • ipa-test-interpreter:機能的にはテストパッケージと同等ですが、コンパイル時間が短くなります。ただし、ActionScript バイトコードが解釈され、マシンコードには変換されません。そのため、インタープリターパッケージではコードの実行が遅くなります。

無事成功したらipaファイルができてます
これをダブルクリックまたはiTunesにドラッグ&ドロップで追加して、iPhoneと同期することでiPhoneで実行することができるようになります

iPhoneで動かしてデバッグする方法

実機で動かしながらデバッグしたいんだけど・・・っていう時のために、Flashデバッガー(fdb)でリモートデバッグできるようになってます
fdbは、breakポイントを設定したり、traceログやエラーメッセージをリアルタイムで表示することができます

まずFlashをデバッグビルドします
そんで、パッケージ化する際に、

-target ipa-debug

を指定し

-connect < IPアドレス >

でデバッグするホストPCのIPアドレスを入力します

IPアドレスにローカルIPアドレスを指定する場合は、iPhoneも同じLAN内の無線LANに繋がっている必要があります

C:Userston>adt -package -target ipa-debug -connect 192.168.0.2
     -storetype pkcs12 -keystore private_key.p12 -storepass hogehoge
    -provisioning-profile Test.mobileprovision
     Warp.ipa Warp-app.xml Warp.swf icon/

まずコマンドラインで

fdb

と打ってfdbが起動したら

run

と打ち、待機します

その後、iPhoneに移動させたアプリを起動すると自動的に接続されます

接続されると、breakポイントを設定できるのですが、そのまま続行したい場合は

continue

と打つと、traceログをリアルタイムで受け取れるようになります

実機で動かしている様子

今回は過去にwonderflに投稿した以下の3つの作品をちょこっと変えて実機で動かしてみました

以下の3つはその元のFlash

ワープっぽいなにか – wonderfl build flash online

SquareLines – wonderfl build flash online

HueCircleTest 色相環テスト – wonderfl build flash online

上の3つをiPhoneアプリ化して動かしてる様子
ちょっと見づらくてすいません・・・w

感想

意外と既存のFlashがそのままサクっと動いてしまってちょっとびっくりしています
AIR2.7で初めてAIR for iOSを試したので、速くなったかどうかはわかりませんが、あまり速度を求めないようなアプリなら十分にいけそうな気がします
ただバグがまだいっぱいあって、作るときにはリリースノートの「既知の問題」というところをしっかり読んだほうがよさげです
俺は埋め込みフォントの問題と、Loaderのloadbytesが動かない問題、指を離すとmouseX、mouseYの座標がどっかにぶっ飛ぶ問題に遭遇しました
あと、やっぱりマウスと指では感覚がだいぶ違うので、そこらへんを意識して作らないと、操作しづらくなります
3つめのHueCircleTestもマウス前提で作ってあるので、指ではすごくやりづらかった・・・w
AIR2.7で作る場合はまだコマンドライン叩くしかないのでちょっと敷居が高い感じですが、パフォーマンスは実用レベルになりつつあるので、いろんな開発環境でサポートされるのを期待しときます

追記

この記事を公開した当日にFlashBuilder4.5.1とFlex 4.5.1が発表されて、FlashBuilderからAIR2.7のパッケージング機能を利用できるようになりました
Flash Builder 4.5.1 と Flex 4.5.1 SDK 公開 – akihiro kamijo

参考にしたサイト

Adobe AIR 2.6 開発者向けリリースノート
Adobe AIR 2.7 開発者向けリリースノート
Adobe AIR 2.7 公開 – akihiro kamijo
Adobe AIR * モバイルデバイス向けの AIR アプリケーションの開発

AIR, AS3, Flash, iPhone

「ActionScript Beautifl Code」本が発売!俺の作品も載ってるよ!

By tonNo Comments

ActionScript Beautifl Code~Beautifl: Flash Gallery of wonderfl~

ActionScript Beautifl Code~Beautifl: Flash Gallery of wonderfl~という本が出ました

wonderflに投稿された作品の中で美しい作品をピックアップして1つずつ解説する、という本です

著者の池田さんはwonderflの美しい作品をまとめているBeautiflというサイトを運営されていて、
今回のBeautifl本に掲載されている作品はすべてhttp://beautifl.net/book/で見ることができます

ということでこのBeautifl本に自分の作品を載せていただきました!
初めて献本をもらってすこし興奮気味です!w

Beautifl本に自分の作品が!

自分のコードが本に載るなんて信じられない・・・
しかも恥ずかしいアイコンが・・・!

このBeautifl本は1つの作品を大体2~3ページで解説されてて、全部で96作品(!)あります

この作品の中身はどんな感じになってるのかなーとパラパラっとめくってみるだけでも面白いので、よかったら是非手にとってみてください!

AS3, Flash,

MacBookProのメモリを4GBから8GBに換装

By tonNo Comments

MBP買って早々ですがメモリを8GBにしました
4GBじゃ仮想PCでWin動かすと死にそうだったのでw

準備するもの

1.メモリ

当然8GBのメモリが必要です
最初にMBPについてたメモリの規格がSODIMM DDR3-1333(PC3-10600)だったので、同じ規格のメモリから選びました
俺が買ったのは
シー・エフ・デー販売 Elixir ノートPC用メモリ DDR3-1333(PC3-10600) SODIMM CL9 4GB 2枚セット W3N1333Q-4G

4GB*2枚が7000円以下で買えるなんて素敵!

3.精密プラスドライバー

MBPの裏蓋を開けるときに必要です
ない人はメモリと一緒に買うといいんじゃないでしょうか
このドライバーならぴったり合うので不安な人はこれを買うといいかもw
アネックス(ANEX) 精密ドライバー プラス00×50 No.3450

手順

1.まず脱ぎます

2.メモリを用意します

メモリ

3.メモリを出しておきます

メモリを取り出したとこ

4.MBPの裏蓋のネジを外します

MBPを裏返すと、縁の方にネジがあります
10個あるので全部外します

裏蓋のネジの位置

ネジは場所によって長さが違うので、どれがどこのネジなのかちゃんとわかるようにしときましょう

外したネジ

5.蓋を外します

そのまま上にぱかっと外します
真ん中少し右の緑のがメモリです

裏蓋をはずしたところ

6.メモリを外します

少しわかりにくいですが、メモリの両側がプラスチックのバネ?で固定されているので指で外側に開くと、メモリがびよーんと上に上がってきます
そしたらそのまま引き抜きます

メモリを外すとこ

7.買ってきたメモリを取り付けます

メモリは先端の金色の所に触れないように注意

メモリ

メモリをつけるときは、先端の金色のとこが一箇所だけくぼんでるので、そことスロットのでっぱりが合うように付けます
まず下のメモリから、斜めにさしてぐっと奥まで入れたら下にさげます
両端のプラスチックがパチンって言ったらおk

メモリ換装完了!

8.裏蓋をつけてネジでとめて終了!

About Mac

わーい!

Mac

MacBookProを買いました!

By tonNo Comments

我が家にMacBookProがきました!
初めてのMacです
買ったのは13インチの下位モデル(MC700J/A)
Core i5の2.3GB
メモリ4GB
HDD 320GB

開封の儀!

MacBookPro

てってれー!

開封!

MBPを開いてまず気付いたこと

CapsLockとControlキーの位置が逆になってる!
素晴らしい!!

CapsLockの位置

あとトラックパッドが使いやすい!

こ、これは・・・イイネ!

でもまだ慣れないのでこれからいっぱいいじってみます!
これでiPhoneアプリ開発できる!

Mac

Flashでスクリーンセーバー作ってみた

By tonNo Comments

memo.393 » Blog Archive » [Event][AS]スクリーンセーバー作りました。>>Re-BUILD
このスクリーンセーバーいいなーと思って、自分も作ってみたくなったので作ってみた。

Macのスクリーンセーバーも作りたかったけど、Mac持ってないし検証不可なので断念。
Winに絞って探してたけど、やっぱり上のブログで紹介されてるInstantStormがいいみたい。
無料なので試してみたらWin7x64でも動作。FP10も動いた。すごい。

試しに作ってみたのはこのFlash
使い回しでごめんなさい。。。

This movie requires Flash Player 9.0.0

マウスを動かすと着いてきます。マウスダウンで速くなります。

インストーラー形式
Warp.exe

scr形式
Warp.scr

インストーラー形式の場合は、指示に従ってクリックしていくだけで完了。
scr形式の場合は、C:Windowsの中にぶっこんでください。

スクリーンセーバーの設定から「Warp」を選択
設定から、マウスを動かしたらスクリーンセーバーを終了させるか選択できます。

んーーすごい簡単にできてしまったw

あとは中身次第・・・そこが一番問題なんだけどね・・・
綺麗なFlashを作れたらスクリーンセーバーにしてみたいと思います。

<追記>
InstantStormでは設定やインストール時の説明を自分で書くことができるのですが、日本語を入れると文字化けするようなので注意が必要です。

AS3, Flash, 作ってみた
Blue Taste Theme created by Jabox