ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 http://schoo.jp/class/942/room 
ーーーーーーーーーーーーーーーーーーーーーーー

1. Flash(AIR)を使ってiPhone/Androidアプリを作ろう！

2. 何故AIRなのか?
Unity,Cocos-­‐2dxと比べたメリット・デメリット
■メリット
・既存の開発環境Flash
ProfessionalやFlash
BuilderにAIR
SDKを導入するだけでアプリを
作れる
・デザイナやアニメータだけでもアプリを完成させやすい（仕様による部分もある）
・Flashの長い歴史で培われた様々なライブラリを使うことが出来る(備考参照)
・デザイナ（アニメータ）とスクリプタの分業がしやすい
・モーショントゥイーンのアニメーションってやりやすいよね！
■デメリット
・UnityのAsset
Storeのようなものが無いため最適化された素材を購入することが出来ない
・昔Apple社と色々あったためiOSのアプリは作れないと思われていることが多い為、選択
肢として外されている
・開発する際に使う言語AS3が難しいと思われている
・Unityから比較すると対応プラットフォームは少ない（主にコンシューマ機部分）

3. 更に比較・・・
項目
Unity
Cocos2d-­‐x
AIR
価格
162,000円〜
無料(Mit)
GUIアニメーション
ツールSpineが$60〜
月々2,180円〜(Flash単
品での使用の場合)
対応OS
iOS,Android,Windows,OS
X,Linux,ブラウザ,Flash
Player,PS3,Xbox360,Wii
U
iOS,Android,Windows
,Marmalade,Linux,Bla
ckBerry
10
iOS,Android,Windows,O
S
X,ブラウザ
描画
主に3D(2Dも可)
2D
主に2D(3Dも可)
言語
C#(Javascript)
C++(Lua)
AS3(C++)
＼既にAdobe
CreaYve
Cloudを使っている場合、導入にかかる金額はありません！／

4. 開発環境構築(Flash
Professional)
1. Flash
CCまたはFlash
CS
6をインストール
2. 最新SDKを落とす(最新SDKでなくていいならダウンロード
の必要はありません
h[p://www.adobe.com/devnet/air/
air-­‐sdk-­‐download.html
)
3. 適切なディレクトリに配置(
Macなら”/ApplicaYons/Adobe
Flash
CC”にAIR14.0というディレクトリ名にして配置)
4. Flash
Professionalを起動
5. AIR
SDKのパスを通す(次スライド画像参照)
6. AIRアプリケーションを作ってみる(次スライド画像参照)

5. Flash
Professional→ヘルプ→Adobe
AIR
SDK
を管理でパスを追加

6. Flash
Professional→ファイル→新規
パブリッシュ→AIR
SDKのバージョン選択

7. 開発を進めていく上でのノウハウ
• FlashのADTデバッガーでCommand
+
Enter(Windowsの場合はctrl
+
Enter)で直ぐに
デバッグビルド
– Cocos2d-­‐xだと実機へデバッグビルドまたはiOSシ
ミュレータでビルド→時間がかかる・・・！
＼何度も繰り返す作業なので素早く確認出来るのは大切！／

8. • シミュレーターの機能が豊富！
– 加速度センサー
– タッチとジェスチャー
– ジオロケーション
(ここでサンプルアプリを使ってレク
チャー、実機でも動作を見る)
サンプルのダウンロードは以下より
h[ps://github.com/ken-­‐b4u/
schoo_sample/archive/master.zip

9. • Flash
ProfessionalとFlash
Builderの連携
– Flash
Professionalでアニメータが作成したアニ
メーションをプログラマが使うFlash
Builderに簡単
に持っていけます
– Flash
Professional側
• モーショントゥイーンでアニメーションを作成する
• ライブラリ→該当のムービークリップを右クリック
→AcYonScript用に書き出し、1フレーム目に書き出しに
チェック→名前、クラス、基本クラス(サンプルでは
flash.display.MovieClipとします)に入力(次スライド画像
参照)

11. • Flash
ProfessionalとFlash
Builderの連携
– Flash
Builder側
• Flash
Professional側で指定されているドキュメントクラ
スにFlash
Professional側で設定されているクラスのイ
ンスタンスを作りaddChildする(サンプルを使ってのレク
チャー)

12. • Flash
ProfessionalとFlash
Builderの連携
– アニメーション部分はアニメーターやデザイナが
Flash
Professionalで担当
– ロジック部分やサーバとの繋ぎこみはFlash
Builderでプログラマが担当
＼分業がしやすい！／
(SWCを使えばもっと分業出来るけど今回は省略します)

13. ここからはちょっとBadなノウハウ
（つまづく前に・・・）
• iOS関連
– iOSのシミュレータへの転送が出来るとされている
が2014/06/30現在最新のSDKでは出来ない(Air
SDK4の頃から出来ない、エラーで止まる)
– iOS実機への転送はプロビジョニングプロファイル
と紐付いたp12ファイルが必須
– ReYna
Displayへの対応の為、画材のサイズは2
倍に（他の環境でも同じです）

14. • TextField
– 以下のようなビューは実装出来ない
– ダミーの入力部分をタップ→実際の入力が表示さ
れ入力出来る形のTextField
実装は出来るが実際入力出来るテキストフィールドに対して
focus
=
textField
としてもデフォルトのフォーカスをあててくれないのでユーザーに優しくない
GeNERACE
GeNERACE

15. ANE(Air
NaYve
Extension)とは
• Flashだけでは実現出来ないネイティブとの繋
ぎこみをするライブラリ
• 課金、GCM(Push
NoYficaYon)など
• h[p://www.adobe.com/devnet/air/naYve-­‐
extensions-­‐for-­‐air.html
• 自分で作成することも出来る、公開されてい
るライブラリを使うことも出来る

16. ANEを使う際のTIPS
• 条件付きコンパイル定数
– Android用にGCMのANE導入したけど、iOSビルド
したらエラーで落ちる
– ソースコードは基本的に同じものを使いたい
• ビルドを分けて条件付きコンパイル定数を使う(次スラ
イド画像参照)

17. プロパティからスパナマーク→定数を追加
この場合Android用とし、
DEFINE::IOS
DEFINE::ANDROID
にそれぞれ値を設定
ASに
config
namespace
DEFINE;
以降iOSとAndroidでビルドの動作を分けたい
場合
DEFINE::ANDROIDやDEFINE::IOSをAS内に記
述することでビルド時の動作を分離出来ます。

18. CreaYve
Cloudのお陰で初期費用
安いしちょっとやってみませんか！

19. 参考URLなど
• Adobe
AIR
– h[p://get.adobe.com/jp/air/
• Unity
– h[p://japan.unity3d.com/
• Cocos2d-­‐x
– h[p://www.cocos2d-­‐x.org/
– Spine
• h[p://ja.esotericsolware.com/
– Marmalade
SDK
• h[ps://www.madewithmarmalade.com/products/marmalade-­‐sdk
• 資料内のソース
– h[ps://github.com/ken-­‐b4u/schoo_sample
• Kentarou
Muramatsu
– Facebook
• h[ps://www.facebook.com/kentarou.muramatsu
– Twi[er
• h[ps://twi[er.com/ken_b4u

20. Adobe AIR + Flash
Builder でスマホゲーム制作
株式会社 Aiming エンジニア 廣岡聡之

21. 開発環境
• Mac OSX (Windows でもできる)
• Flash Builder
• Adobe AIR

22. Flash Builder を起動

23. メニューからプロジェクトを
作成

24. ウィザードリー形式に従って
プロジェクト設定
1 2

25. 必要なファイルが自動生成

26. とりあえずデバッグ実行してみる

27. 空っぽのアプリ完成

28. この画像を表示してみる

29. アセットファイルを所定の場
所に配置

30. コードを書く

31. 表示できた

32. Android 実機も簡単

33. 実機上でもデバッガが動く

34. ここまでできれば
あとはゲームを作るだけ

35. スプライトを追加
• クラス内で画像を読み込み
!
!
!
• 描画したい場所でそのスプライトを addChild
!
!
!
logo_aiming.png

36. スプライトに動きを追加
• 毎フレームランダムな方向に移動

37. タップすると消えるように
• クリックイベントで自分自身を removeChild

38. いっぱい生成
• AimingLogo クラスを20個生成して addChild

39. 少し整理して完成!