まさか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.htmlFlex 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.htmllayoutBaseでのリスト作成
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-fxgPanel 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.htmlItemRenderer
http://help.adobe.com/en_US/flex/using/WS77c1dbb1bd80d38313b7ce1c129eb7d5e04-8000.htmlItemRnedererのstateによるデザイン割り当て変更
http://dev-cat.blogspot.jp/2013/10/flex-spark-list_5714.htmlItemRendererの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-paddingtextinput カスタム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.htmmotion 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-motionpathEffectいろは（動的にアニメ組むとき）
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/1219300764Bitmapimageへのクリックイベント追加
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.htmlswipe
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/1315468965CSS記述について
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-iteratorObject型の使い方
http://hakuhin.jp/as3/object.html
http://isann.blog2.fc2.com/blog-entry-168.html
最後に
個人的にはネイティブでアプリを作るのが一番確実だと改めて感じたけど、
最近プログラマデビューした自分としてはこんな出会いなきゃFlash使うこと
無かっただろうからいい出会いだったとは思う。
このリンクのまとめは開発中にメモってたものをほぼそのまま貼り付けただけで
タイトルと中身チゲーとかあるかもしれないけどご愛嬌だよ。
だれかの為になるといいんだけれど。