まさかAS3を触ることになるなんて
こんにちは。
8月〜9月上旬にかけてFlexとAIRでスマホアプリを作成したので
参考にしたサイトのまとめを残しておきます。
ソース探そうとしても大体2011年くらいのものがメインで
Flex3系の記事も多くヒットしてしまうので参考になるものを
探すだけでもしんどかったので、これがあるだけで少しはマシかも。
まさかFlashやることになるなんて。
対象
ActionScript3 (Flash) はじめまして
Flexフレームワークはじめまして
環境
Flash Builder 4.7
FLEX 4.6
Flash、AS3について
基本については公式マニュアルで勉強。
-
ActionScriptについて
http://help.adobe.com/ja_JP/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7fff.html -
Flex 4.5 SDK と Flash Builder 4.5を使用したモバイルアプリケーション開発
http://www.infoq.com/jp/articles/mobile-development-flex-flashbuilder -
ソースを分離する方法(Viewとソースを分けたいよね(MXMLとAS3クラスファイルに分ける))
http://cu39.hateblo.jp/entry/20120302/1330682460
複数のディスプレイサイズに対応するために
最新のAIRではx3まで対応しているけどFlashBuilderの初期設定のままではx2までしか対応してない。
今回はクライアントの意向もありそのままでやったのでフレームワークの恩恵を受けることなく愚直に実装した。
念のため関連情報を掲載しているページを(x3非対応だけどね!)
-
DPIについて公式
http://help.adobe.com/ja_JP/flex/mobileapps/WS19f279b149e7481c682e5a9412cf5976c17-8000.html -
複数DPI対応
http://www.adobe.com/jp/devnet/flex/articles/flex_mobile_04.html
どこまで自由にUIいじれるか。
結論としては割と自由になんでもできそう。ただ、面倒くさいだけ。
リスト表示するComponent(List)
何かと使うリスト表示。今回はチャット画面あったので以下の要件を満たす必要があった
- 丸抜き写真
- 吹き出し風のメッセージ表示枠(透過処理)
- 上半分が徐々にフェードアウトするようなグラデーションのマスク処理
-
リストビュー
http://www.adobe.com/jp/devnet/flex/articles/flex_mobile_05.html -
リストビュー拡張
http://chsmea.net/~mioproject/freo/view/173?continue=1 -
モバイルアプリケーション開発説明(リストビュー含む)
http://www.adobe.com/devnet/flex/testdrivemobile/articles/mtd_1_2.html
https://kskstudio.wordpress.com/2011/01/21/flexforandroidtutorial_pricecom01/
http://www.adobe.com/jp/devnet/flex/articles/flex_for_android_tutorial_02.html
http://www.adobe.com/jp/devnet/flex/articles/mobile_development_flex_flashbuilder.html -
layoutBaseでのリスト作成
http://dev.classmethod.jp/ria/21203/
http://dev.classmethod.jp/ria/22016/
http://dev.classmethod.jp/ria/layoutbase-3/ -
旧版のレイアウト作成
http://www.banana-systems.com/0208/07/flex_inline_itemrenderer/
Listコンポーネントでは設定だけでどうにもできない部分が出てきたので
Listに表示する上で配列オブジェクトを管理するItemRendererコンポーネントをカスタムすることにした。
- カスタムItemRenderer
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf63611-7ffe.html
http://help.adobe.com/en_US/flex/using/WS77c1dbb1bd80d38313b7ce1c129eb7d5e04-8000.html
http://www.adobe.com/devnet/flex/newcontent/videotraining/exercises/ex4_01.html
新しいメッセージ来たら下に自動スクロールするやつ(コンポーネントのメソッドだとちゃんとしたまで行かないので)
- scrolling list to bottom
http://stackoverflow.com/questions/13034289/flex-how-can-i-animate-my-list-when-scrolling
http://dev-cat.blogspot.jp/2013/10/flex-spark-list_14.html
UI弄る上で今時やっておきたいやつも一緒に。
-
背景透明化(ItemRenderer)
http://blog.flexexamples.com/2010/04/22/removing-the-rollover-and-selection-highlight-on-a-spark-list-control-in-flex-4/ -
角丸
http://blog.flexexamples.com/2010/02/07/setting-the-corner-radius-on-a-spark-bitmapimage-control-in-flex-4/
http://apache-flex-users.2333346.n4.nabble.com/Masking-an-Image-td2610.html
http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/ -
skinについて(カスタムスキン作れば大抵は実現できる)
http://www.slideshare.net/jmwhittaker/flash-camp-degrafa-fxg -
Panel containerの表示設定(リストのセルに対する設定的な)
http://blog.flexexamples.com/2010/04/29/setting-the-chrome-color-on-a-spark-panel-container-in-flex-4/
システムメッセージ、投稿されるメッセージ、日時表示など表示スタイルを数パターン使い分けるために
-
ItemRendererのデータによる表示切り替えについて
http://dev-cat.blogspot.jp/2013/10/flex-spark-listitemrenderer.html -
ItemRenderer
http://help.adobe.com/en_US/flex/using/WS77c1dbb1bd80d38313b7ce1c129eb7d5e04-8000.html -
ItemRnedererのstateによるデザイン割り当て変更
http://dev-cat.blogspot.jp/2013/10/flex-spark-list_5714.html -
ItemRendererのstateによる管理方法
https://github.com/BowlerHatLLC/feathers-sdk/blob/master/mustella/tests/gumbo/core/DataGroup/swfs/comps/GetCurrentRendererStateItemRenderer.mxml
http://flexponential.com/2010/02/07/using-datarenderer-to-add-custom-states-to-a-spark-list-renderer/
http://stackoverflow.com/questions/29731315/flex-mxml-states-within-states
テキスト入力について
ほぼ100使う入力ボックス。AS3ではTextInputを使用した。
ここもカスタムスキンで細かい表現の調整を施した。
-
テキスト入力欄のデザイン変更
http://www.hulstkamp.com/articles/flex-custom-text-input/
http://www.hulstkamp.com/articles/flex-custom-text-input/AHTextFieldTest.html
http://www.hulstkamp.com/articles/flex-custom-text-input/srcview/index.html
http://stackoverflow.com/questions/22574032/as3-flex-custom-textinput-component-padding -
textinput カスタムskin
http://blog.flexexamples.com/2010/04/08/setting-the-disabled-alpha-on-a-spark-textinput-control-in-flex-4/ -
TextInputに対するEnterListener(キーボードスタイルによって異なるけど)
http://www.wikiguga.com/topic/394ea608fa7305ee4ec559ad91fc8ac8 -
キーボード
http://help.adobe.com/ja_JP/flex/mobileapps/WSe11993ea1bd776e5-13e27e4812a431dbafc-8000.html -
ソフトウェアキーボドで入力欄が隠れるから高さをとって移動させる
https://madskool.wordpress.com/2013/04/29/madcomponents-and-the-virtual-keyboard/
https://dzone.com/articles/taking-control-flex-soft
吹き出しの表現
メッセージング以外にもメニューを表示したり使用方法の補助だったりいろいろ使うよね。
- コールアウト(吹き出し)
http://help.adobe.com/ja_JP/flex/mobileapps/WS7dd5c1363434bb706aafb086131b54b6ec7-8000.html
http://blogs.adobe.com/jasonsj/
アニメーション処理(Flashといえばね)
MXMLで静的に書くのとAS3で動的に書く方法を場合によって使い分けた。
-
アニメーション
http://www.adobe.com/jp/devnet/flex/articles/flex4_tutorials_no9.html -
フェードイン・アウト
http://www.tutorialspoint.com/flex/flex_fade_effect.htm -
motion pathについて
http://help.adobe.com/en_US/flex/using/WS8951D9BB-9DB6-45cc-B076-06941D80F29F.html#WS39A1BFDE-D957-4e51-B79F-AD05C1CB38D8 -
アニメーション制御
http://stackoverflow.com/questions/7885127/animated-gif-in-flex -
動的にアニメーション作成
http://stackoverflow.com/questions/4591153/how-can-i-define-end-points-for-motionpath -
Effectいろは(動的にアニメ組むとき)
http://mitchhasblog.blogspot.jp/2011/02/as3-effect-fly.html
https://books.google.co.jp/books?id=sJl-nUYdZjgC&pg=PA301&lpg=PA301&dq=flex+vector+motionpath+keyframe&source=bl&ots=OpEB9UgZ43&sig=IGNe8xatL53PI0H0ih9h9fUrB4E&hl=ja&sa=X&ved=0CDIQ6AEwA2oVChMI1qGspvT1xwIVQhiSCh14zAQj#v=onepage&q=flex%20vector%20motionpath%20keyframe&f=false
Tips
-
bundleつけないと怒られる
http://d.hatena.ne.jp/double_m/20080821/1219300764 -
Bitmapimageへのクリックイベント追加
http://www.dandev.com/2011/10/add-a-click-event-to-a-bitmapimage-in-adobe-flexair/ -
FXGでのパスの引き方(Canvas的な)
http://www.judahfrangipane.com/blog/2010/09/10/fxg-for-a-right-arrow/ -
StageWebViewのアニメーション適用は無理だけど、無理やりごりごり動かしてみる。
http://stackoverflow.com/questions/10424465/as3-can-stagewebview-be-tween-or-animated -
パーツのレイアウト
http://systran-ja.adobe.com/devnet/flex/articles/flex-containers-tips.html
http://www.adobe.com/jp/devnet/flex/articles/flex4_tutorials_no10.html -
swipe
http://stackoverflow.com/questions/9700882/add-swipe-in-list-component-flex-4
http://stackoverflow.com/questions/9841250/flex-mobile-gesture-event-how-to-slide-between-2-views-like-google-mobile
https://dzone.com/articles/swipe-mobile-items-flex
http://blog.flexexamples.com/2009/11/02/auto-scrolling-the-contents-of-a-vgroup-container-in-flex-4/
http://blog.flexexamples.com/2009/11/11/creating-an-animated-transition-when-scrolling-through-items-in-a-spark-hgroup-container/ -
stateの使い方
http://www.banana-systems.com/2008/08/itemrenderer_state_transition/ -
Hgroupの並び順の逆転(これで相手メッセージと自分メッセージの写真とテキスト位置をサクっと反転表示できた)
http://developers.linecorp.com/blog/?p=2479 -
動的にCSS切り替え
http://katahirado.hatenablog.com/entry/20110908/1315468965 -
CSS記述について
http://d.hatena.ne.jp/tukaharu/20101119/1290147813 -
ギャラリーの表示(カメラロール)
https://books.google.co.jp/books?id=iuZ-dZxTvLgC&pg=PA43&lpg=PA43&dq=flex+spark+camera+roll&source=bl&ots=acCe3EeGTn&sig=fqTK8lxtSL_nyxbaJf9i_YaYY4Y&hl=ja&sa=X&ved=0CEQQ6AEwBWoVChMIhoTy2vrXxwIVip2UCh2jOAnB#v=onepage&q=flex%20spark%20camera%20roll&f=false
http://dev.classmethod.jp/smartphone/reprint_monthly_io_201201/
http://hakuhin.jp/air/camera_ui.html
http://stackoverflow.com/questions/11135303/flex-mobile-blazeds-loading-an-image-from-server -
シングルトン
http://corlan.org/2011/08/16/flex-mobile-development-caching-images-using-contentcache/
http://kudox.jp/action-script/as3-singleton-pattern -
カスタムイテレータ
http://stackoverflow.com/questions/7463816/as3-how-to-create-a-custom-iterator -
Object型の使い方
http://hakuhin.jp/as3/object.html
http://isann.blog2.fc2.com/blog-entry-168.html
最後に
個人的にはネイティブでアプリを作るのが一番確実だと改めて感じたけど、
最近プログラマデビューした自分としてはこんな出会いなきゃFlash使うこと
無かっただろうからいい出会いだったとは思う。
このリンクのまとめは開発中にメモってたものをほぼそのまま貼り付けただけで
タイトルと中身チゲーとかあるかもしれないけどご愛嬌だよ。
だれかの為になるといいんだけれど。