シェイプトゥイーンの実験コードを書いてみた。

早速ですが、シェイプトゥイーンをスクリプトでというものを作ってみました。最適化まではやっていないので、ちょっと重たいかもしれませんが、そこそこに動いています。

シェイプトゥイーンの実験 - wonderfl build flash online

考え方としては、パスをIllustratorでいう複合パスという概念で扱っています。FlashのGraphicsPathは、閉じようが、閉じまいが、移動しようが、連続してようが、あくまで１つのパスです。しかしモーフィングにおいては、前後でマッチングさせる単位が分からなくなるため、閉じたパスの集合として管理しています。

前後のパスの補間は、閉じたパスをお互いに列挙し、

1. 開始のパスがあって終了のパスがない場合は、開始のパスのバウンズの中心を基準にする
2. 終了のパスがあって開始のパスがない場合は、終了のパスのバウンズの中心を基準にする
3. 片方しかない場合は、基準点に同じ数のセグメントのパスがあるもとのみなす
4. 開始終了両方とも、セグメントの数が同じ場合は特に加工しない
5. セグメント数が違う場合は、セグメント間の距離の割合が、両方のパスで同じになるようにセグメントを分割する

という感じです。

５はもうちょっと具体的に言うと、パスの距離を１としたときに、開始パスのアンカーポイントの位置が[0, 0.2, 0.4, 0.6, 0.8]とあって、終了パスのポイントの位置が[0, 0.1, 0.5, 0.9]とある場合、両方のパスのアンカーポイントの場所が、それぞれ[0, 0.1, 0.2, 0.4, 0.5, 0.6, 0.8, 0.9]になるように調整しています。Illustratorでいうアンカーポイントの追加になるます。

１～３は、そもそもパスがないですから、ある方の中心部分にパスが埋れているとみなすようにしています。ある方のパス、ない方のパスで、それぞれ同じ数のセグメントになるように、中心の座標のみを使ってmoveTo/curveToを繰り返します。

あとは、直線もすべてカーブで扱うようにしています。直線の場合は、始点と終点の50%の所にコントロールポイントが来るようにしています。これならあんまり考えることなく、カーブと直線の補間が可能です。

まだ作りかけで、線や塗にも対応させようと思います。

開発再開

アニメーションライブラリの開発を再開しました。
ずっと仕事が忙しかったので、殆ど何もできずにいましたが、
最近やっと落ち着いてきました。

アニメーションライブラリ自体の開発はほぼ終わってるのですが、
テストやチュートリアルの作成が全然というところです。

ところで、シェイプトゥイーンをスクリプトで書けるというのは需要があるのでしょうか。
まだ、具体的に練ってはいないですが、

var path1:Path = new Path();
path1.curveTo(...);
path1.curveTo(...);
path1.curveTo(...);

var path2:Path = new Path();path2.curveTo(...);
path2.curveTo(...);
path2.curveTo(...);

var path3:Path = Path.interpolation(path1, path2, 0.5);

という感じで書けるとパスのモーフィングができるという感じで考えています。

直線は開始点と終了点の中間に制御点が置かれているカーブで表現して、
あとは全てのセグメントの制御点、始点、終点の位置を、
開始と終了の間で補間すれば表現できるのではと思っています。

ただし、開始と終了でパスの数が合わない場合に、どうやってパスの数を水増しするかが問題です。
数学が苦手なのでこういうのは辛いですね。

デジタルサイネージ

自分の住んでる札幌市に、札幌駅から大通駅までの間の地下通路が新たに開通したのですが、お仕事でそこにデジタルサイネージを２台設置させてもらってます。
交通情報と通路の案内のサイネージですが、タッチパネルでサクサク動きます。
自社製のなかでも過去最高の利用率です。みなさん、ぜひ使ってみてください。

SystemManagerを独自実装のモノに差し替える方法

Flex3(3.5)でApplicationの初期化シーケンスの中に、独自の処理を割り込んで、デフォルトのプログレスに出力したいなと思ってたのですが、一定の進展があったので、まとめておく。

まず、Flex3はルートにSystemManagerを継承したクラスが指定される。大雑把に言うとこのクラスはアプリケーションに該当するmxmlファイルのデスクリプタとか初期化情報を持っていて、アプリケーションの初期化を行う。

最初のフレームではプレローダを使って、RSLの読み込みを行ってる。RSL等が読み終わると、次のフレームに移る。次のフレームではMixinの処理やアプリケーションの初期化を行う。アプリケーションの初期化が完了したら、プレローダを消す。

普通にアプリケーションを作る上で初期化シーケンスに介入できるのはMixinの段階で、これはMixinメタタグを指定したクラスがあれば、自動的に特定メソッドが呼ばれる。しかし、すでに1フレーム目に移行したあとで、RSLを読み込んだ後になる。

そこで、独自のSystemManager（SystemManagerを継承した独自クラス）を作成して、必要な処理を書き足せれば、いろいろとフックできるに違いない。（これから調査）

というわけで、その手順。

１．Applicationクラスを継承したMyApplicationを作成
２．SystemManagerを継承したMySystemManagerを作成
３．MyApplicationには[Frame(factoryClass="MySystemManager")]を設定
４．アプリケーションのmxmlのルートタグをMyApplicationにする

これだけでOK。

a.mxmlというアプリケーションがあると、通常なら_a_mx_managers_SystemManagerというクラスが自動的に生成される。これの親クラスはSystemManager。
しかし、上記の方法だと、_a_MySystemManagerというクラスが生成され、親クラスはMySystemManagerとなる。これで好き放題できますね。

やっと帰れました。

東京からなんとか脱出。札幌に戻れました。
被災者の方を思うと自分は全然いい方です。
でも震度5強っていうのは初体験で、命の危険を感じました。
ビッグサイトにいたのですが、隣の西ホールは壁にひび割れがあったようです。
展示品を支えるのが精一杯でしたが、落下物等もあり怖かったです。

東京に来ています

仕事（某展示会）に出展のため、月曜日から東京に来ています。
明日には札幌に帰りますが。

今年は異常に大盛況に思えます。ブース全体での総予算が、
おそらく去年の３倍くらいあるのではないでしょうか。標準のコマはとても少ないです。

製品の方も非常に好評で、制作側としては非常に嬉しい限りです。

ダブルクリックとシングルクリックを区別して処理する方法

ダブルクリックを受け取りたい場合のお話です。

Flashでは通常、最初のクリックの段階でクリックイベントがディスパッチされ、その後のクリックでダブルクリックの要件を満たしたときに、クリックイベントではなく、ダブルクリックイベントがディスパッチされます。

詳しくは調べてませんが、OSの設定によりダブルクリックとみなされたときに、FlashPlayerにクリックではなくダブルクリックとして通知されるのではと予想しています。

テキストボックスで考えてみると、最初のクリックでフォーカスし、ダブルクリックを受け取ったところでテキストを全選択にする、ということで、特にシングルクリックとダブルクリックが逐一発生しても何ら問題ありません。

しかし、ズームできる画像があって、画像はクリッカブルマップになっているケースを考えてください。 仮にオンラインのチラシサイトの画像としましょう。

商品をクリックしたら、商品の詳細ページにジャンプし、ズームしたいときはダブルクリックというのが簡単な操作です。しかし、ズームするためにはダブルクリックを受け取る必要がありますが、シングルクリックがその前に発生します。つまり、ダブルクリックだけを受け取りたい場合、シングルクリックは回避しなければなりません。

以下に解決したコードを掲載しました。

ダブルクリックとシングルクリックを区別 - wonderfl build flash online

簡単に説明すると、クリックを受け取ったら、座標を記録しタイマーを開始します。
 タイマーが完了するまでに再度クリックがあった場合、

• 同じ座標ならダブルクリック、その後タイマーを停止
• 同じ座標ではないなら前回の位置でのシングルクリック、タイマーを再起動

とし、 再度クリックがなければ、そのまま記録した位置でのシングルクリックとみなします。

これを応用すれば、ダブルクリックだけではなく、トリプルクリックも実装できますね。