Posts Tagged “flex”

Flex3+AIR1.5でブラウザを作る

>mx:HTML
だけでブラウザが作れちゃう手軽さと、mxmlの書きやすさ(オブジェクト指向にしなくていい。なんだったら全部private function で書いちゃえばとりあえず動くから楽チン)のせいで、Flex builderから離れられなくなって、最近はFlashがただのパーツswf作成お絵かきツールと化しちゃってるこのごろ。
こうもFlexにベッタリだと、日常使うツールは全部Flexで作りたくなっちゃいます。
たとえば、ブラウザ。
Firefoxは重いし、IEはアホだし、Chromeは「最近の履歴」がいきなり出ちゃって恥ずかしいので、よく見るページだけを登録した、専用ブラウザを作っちゃえば効率化がはかれるかと思って試してみました。
#ref(http://ryow.net/blog_old/2010/01/testbrowser1.jpg,nolink)

Flex3でドラッグドロップ、拡大縮小、回転なんかをするときのライブラリ

Flexを使っていて、オブジェクトのドラッグや回転などをやりたくなったとき(目標はFontPark2)、いちいちDragEventなんかを書いていたらキーってなるので、ライブラリを使うと便利です。
便利です、が、一長一短があります。

海外まで見回して、どうやら実際に使えそうなのは2種類あるようです。

ObjectHandles(サンプルをDL可能)


オブジェクトの上下左右と四つ角にハンドルが出て、それを引っ張るとドラッグできます。ハンドルは配列で制御してるので、いらない部分は消せます。

できること

・拡大/縮小
・ドラッグ(ただし画面内のどこにでも持っていけるので、エリアを制御する必要あり)
・回転(自由回転。シフトキーでの45度回転は非対応)
・ハンドルはそれぞれ画像を当てられる

特徴

・拡縮は縦横非を保持するか、辺を自由に伸ばせるか設定可能
・クリックしたものを自動で最前面にするかは設定可能
・複数オブジェクト選択可能な設計(だけど実装はされてない)
・ときどき更新されてる
・画面上のオブジェクトをひとつずつObjectHandlesというクラスでラッパするという仕組み
・ハンドルが表示される=拡大可能
・なのでドラッグだけできるオブジェクト、は非対応。拡大か回転か、許可する必要がある
・操作感は一昔前のFlashっぽい。

TransformTool(右クリでソースを確認)


オブジェクトの上下左右と四つ角にハンドルが出て、それを引っ張るとドラッグできます。

できること

・拡大/縮小
・ドラッグ(ただし画面内のどこにでも持っていけるので、エリアを制御する必要あり)
・回転(自由回転。シフトキーでの45度回転もOK)
・回転の中心を設定可能
・ハンドルはまとめて画像をあてられる

特徴

・拡縮は縦横非を保持するか、辺を自由に伸ばせるか設定可能
・クリックしたものを自動で最前面にするかは設定可能(だけど設定すると、すべてのオブジェクトでそれが効いてしまう)
・複数オブジェクト選択不可能
・更新されてない
・ハンドルオブジェクトを事前にインスタンス化しておき、クリックしたオブジェクトをハンドルのtargetとして使う仕様
・なので、動かすものが全部同じ(ドラッグ回転可能)ならいいけど、一部は回転不可能にしたいとか、拡大したくないとか、個別の設定がある場合はメンドイ
・操作感はwebツールっぽい。

あと、開発中でこういうのも見つけた:

ObjectHandles2(右クリでソース)


なんと前出のObjectHandlesの進化版。
Example7でUI切り替えにDegrafaというライブラリを使ってるけど、機能としては別にいらない。ちなみにDegrafaは超強力なビジュアルライブラリ。グラフとかマトリクスとか書く時はいいかも。

できること

・拡大/縮小
・ドラッグ(ただし画面内のどこにでも持っていけるので、エリアを制御する必要あり)
・回転(自由回転。シフトキーでの45度回転は付加。TransformToolの回転部分をコピペで実装できた)
・ハンドルはまとめて画像をあてられる

特徴

・拡縮は縦横非を保持するか、辺を自由に伸ばせるか設定可能
・クリックしたものを自動で最前面にするかは謎
・複数オブジェクト選択可能(な作りになっていて、実装も半分ほどできてる。けど、ソースを見るとmulti selectのところだけ「ToDo」って書いてあって中身がない。自力で作れというのか!)
・これから更新されるかも。
・ハンドルオブジェクトを事前にインスタンス化しておき、クリックしたオブジェクトをハンドルのtargetとして使う仕様
・っていうか設定が謎な上にメンドイ。
・操作感はパワーポイントみたい。

まとめると

えーと、結局、ホントに一長一短なんですよ。
シフト45度回転できないOhが、実装としては一番使いやすいんだけど、複数選択はできないので困ります。TransformToolはシンプルな考え方なんだけど、すべてが同じ条件でドラッグ、拡大、回転できるならこれでOK。でも複数選択できないので残念。targetの制御まわりを全部書き直さないとダメなのか?
最後にOh2。これ、クラスの依存関係は超シンプルになってます。そのかわり、手を入れようと思ったら超メンドイです。Ohに比べると「選択状態の取得」とか微妙な動作バグとかがなくなってて素敵なんだけど、まだまだこれからな感じ。
3日でアプリを実装しろ! みたいな場合じゃなければOh2で進めていきたいけど、急いでる時はOhかTransformToolか。というところ。
ネットで検索してチュートリアル的なのが出てくるのはOhが一番多い。google codeだし。