曲線矢印を使ってみる

seguimi


今回は、カスタムオブジェクトの曲線矢印を、
スクリプト制御を使って動かしてみたいと思います。

あわせてイージングも使うので、未導入の方は以下を参考にどうぞ。

スクリプト制御についての過去記事→スクリプト制御を使った演出
イージングについての過去記事→イージングを使ったテキストモーション


まずはカスタムオブジェクトから曲線矢印を出します。

 
先端サイズを0に、ライン幅を5にして、
設定から座標を{-300,0,0,0,300,0}としました。

曲線矢印には、アンカーがついています。
アンカーの座標を移動させることで動きをつけますが、
オブジェクトに中間点を打って移動させても思うようには動いてくれません。

そこで、スクリプト制御を使って各アンカーを動かしてみます。

 
カスタムオブジェクトの上のレイヤーに図形の円を置きます。
見やすいように赤にして、サイズを小さくしました。


円にスクリプト制御をかけ、

ax=obj.x
ay=obj.y

と記述します。


再び曲線矢印に戻ります。
設定から、座標を{-300,0,ax,ay,300,0}とします。

 
円を動かしてみて、曲線矢印の真ん中が一緒に動けば成功です。

ここでの円の設定は、
Y座標を0→200→0をイージングの31番で動かしています。

*アニメーション効果でイージングをかけてもスクリプト制御はきかない
 ので要注意です。

 
両端の円にもスクリプト制御をかけて、それぞれ

bx=obj.x
by=obj.y

cx=obj.x
cy=obj.y

と記述すれば、3つのアンカーを自由に動かすことができます。
また、実際に使うときは円をサイズ0にするか、透明度100にすると
線だけを動かしているように見えます。

 
応用すれば、ゴム紐のような動きもできます。
円の代わりに、こまちゃん人形にスクリプト制御をかけました。
移動は手打ちのゴリ押しです。

いかがだったでしょうか。
長いこと上手な使い方が分らなかった曲線矢印でしたが、
スクリプト制御を覚えてからようやく使えるようになりました。
曲線矢印、機会があれば是非使ってみてください。

広告をナメたらアカンよ。
グラフィック文化を築いた13人: 『アイデア』デザイナーインタビュー選集
最も伝わる言葉を選び抜く コピーライターの思考法
キャッチフレーズの戦後史 (岩波新書)


Comments 0

There are no comments yet.

Leave a reply