トゥイーンのシェイプを設定する際の落とし穴

Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。

　トゥイーンのシェイプという設定を使うと、パスをアニメーションすることができる。これは、パスで書いたものを別のパスで書いたものへ変形させるアニメをつくることができるということだ。パスのオブジェクト単体をムービークリップやグラフィック、ボタンにしてしまうと、この機能は使えないので注意したい。

　たとえば丸いパスから四角いパスにトゥイーンのシェイプという機能でつなぐと、フレーム数分徐々に丸が四角になるアニメーションをつくれる【1】。さらにシェイプのヒントというものを使うと、丸のどの点を四角の角にするかなど、設定もでき、ある程度任意の変形の仕方を設定できる【1】。

　しかし、そこでドーナツ形から四角いベタ塗りのオブジェクトにアニメーションさせようとすると、思った動きにならない【2】。パスがふたつあるものから、ひとつのパスで構成されているものへは、パスの数が合わないためだ。この場合、四角いオブジェクトのほうにもかすかな穴をひとつつくっておくと、ある程度思うようにアニメーションさせることができる【3】。四角いオブジェクトに開けた穴が、目立つ大きさになるようであれば、下層レイヤーに穴をふさぐようなパスを置いてあげるとごまかすことができる。

解説：マルチカ

（※本文中、及びキャプション内で使用している「＜」、「＞」は、全角になります。ご注意ください。）