シェイプトゥイーンでイラストをアニメーションにする際の落とし穴

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

　Flashにはパスでつくったイラストをアニメーションにするシェイプトゥイーンという機能がある。タイムライン上に2点のキーフレームを置き、ひとつのパスの形からもうひとつのパスの形へ変形していくアニメーションをつなげていくというものだ。

　これは、単純な形から単純な形へ変化する場合はあまり気にしなくていいのだが、たとえば、人のシルエットなど複雑な形から複雑な形へ変形するようなアニメーションにした場合、思わぬ変化の仕方でアニメーションしてしまう【1】。それでは使っていてもしようがないと思うかもしれないが、シェイプのヒントで、ある程度任意の変化に設定することができる。

　これは変形前にaの点を設定し、aが変形後、どの位置にくるか設定することができるというものだ。これを使えばいろいろな形や動きを滑らかに動かすことができる【2】。

　ただし、シェイプトゥイーンはシンボルやグループになっていないパスのイラスト限定なのでシンボルがグループになっている場合はヒントも使えない。

解説：Ni-Ma

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