【flash時計】線で描く時計
haraです。
今週ももちろん時計です。
今回ご紹介する時計は、無数の線が飛散しつつ時間を表示したり、古い絵画っぽいものを表示したりする時計です。
今回は、色々合わせ技です。
イラストの座標データを取得する
まずイラストや数字に沿ってラインが引かれていますが、ご覧の通り全ての絵は枝分かれしない直線だけで構成し、lineToで引きやすいような絵にしています。
この絵はIllustratorで描いたもので、描いた後でlineToさせるために座標データを取得する必要があります。
今回、イラストの座標データ取得にはfrocessingライブラリを利用しました。
frocessingライブラリのFShapeSVGクラスはSVGファイルを解析し、Flash内で再利用できるようにする機能を持っているのですが、このクラスの解析内容からSVGデータがいかなる座標を持っているかを読み取ることができます。(あまりスマートな方法ではないかもしれませんが・・)
このクラスを用いることで、いくつもあるイラストの座標データをそれほど労せずして取得することができました。
流れるような動きをさせる
待機状態の時の線は、空気の流れのような動きをしていますが、これは見覚えのある方もいるでしょう。
パーティクル祭りの手法と同じく、PerlinNoiseを生成したBitmapDataから色の値を読み取り、速度に反映させています。
絵の方向に線を移動させる
何の話かというと、絵を描く直前、絵のモチーフに向かって動く線についてです。
ここの動きは前回の時計で使った、ミサイル的な動きをさせるTweenerの使い方で実現しています。
ここを普通にTweenさせてしまうと、あまりに直線的で味気ない動きになってしまうのです。よりエモーショナルな演出が必要な時に、TweenerのCurveModifierは大変有効に働くことがわかります。
いかがでしたか?
今回はイラストを無理矢理lineToで描くというニッチな手法でしたが、frocessingライブラリにかなーり助けられました。ありがとうございました!