第7回　シェイプトゥイーン

「シェイプトゥイーン」は、グループ化やシンボル化していないベクターオブジェクトの形状をモーフィングのように変化させるアニメーションの手法だ。開始キーフレームにオブジェクトを配置して、終了キーフレームでオブジェクトの形状を変形させると、中間の動きが自動的に作成される。また、シェイプヒントを設定して、開始時と終了時の形状を対応させるポイントを定義することも可能だ。シェイプトゥイーンを使って、モーショントゥイーンでは表現できなかったアニメーションを作ってみよう。

基本的なシェイプトゥイーンの作り方を紹介しよう。オブジェクトの形状が円から星型に変形するアニメーションを作ってみよう。カラーを変化させることもできる。

1．「楕円ツール」でステージに円を描画する【図1】。

2．［フレーム30］で右クリック（〔Control〕＋クリック）してコンテキストメニューから［フレームを挿入］を選ぶ。フレームを選択した状態で、プロパティインスペクタの［トゥイーン］を［シェイプ］に設定【図2】。

3．［フレーム30］で右クリック（〔Control〕＋クリック）してコンテキストメニューから［キーフレームの挿入］を選択する。ステージのオブジェクトを削除し、「多角形ツール」で星型を描画する。カラーも違う色に変えてみよう【図3】。

オブジェクトは削除せずに、「ダイレクト選択ツール」などで変形させてもよい。

4．［フレーム60］にキーフレームを挿入する。ステージのオブジェクトを削除し、元の円を描画する。［フレーム1］の円をコピー＆同じ位置にペーストするとよいだろう【図4】。最後に［フレーム120］にフレームを挿入して完成だ。［制御］→［ムービープレビュー］で確認してみよう。

オブジェクトの形状が意図どおりに変化しない場合、開始時と終了時の変形させるポイントを対応させるシェイプヒントを設定することができる。シェイプヒントを使って本のページをめくるアニメーションを作ってみよう。

まずは、本のページがめくられるアニメーションを想定して、シェイプトゥイーンを設定しよう。

1．「矩形ツール」で、左側のページとなるグレーの四角形を描く【図5】。レイヤー名を「左ページ」としておこう。

2．新規レイヤー「右ページ」を作成する。「矩形ツール」で左ページに重なるように緑色の四角形を描く【図6】。

3．［フレーム30］にフレームを挿入する。「右ページ」レイヤーの［フレーム30］を選択して、プロパティインスペクタの［トゥイーン］を［シェイプ］に設定【図3】。［フレーム30］にキーフレームを挿入する。

4．本のページがめくれ上がって90°の状態になったときの動きを描く。「自由変形ツール」を使って、ステージの四角形を【図8】のように台形に変形し、カラーを濃い緑色に変更する。

5．［フレーム60］にキーフレームを挿入する。ステージのオブジェクトを削除し、［フレーム1］のオブジェクトをコピー＆ペーストして、見開きの状態になるように、左ページの右に配置して、カラーをグレーに変更する。「line」レイヤーを追加して、［フレーム30～60］にページを区切る中央の線を描画する【図9】。これでシェイプトゥイーンの設定が完了だ。［制御］→［再生］で確認してみよう。しかし、これでは変形するポイント同士がうまく対応していないので、［フレーム1～30］のシェイプトゥイーンが意図通りに動作しない【図10】。

開始時の形状と終了時の形状のポイントを対応付けるシェイプヒントを設定しよう。これで、ページがめくれるシェイプトゥイーンを意図通りに動かすことができる。

1．「右ページ」レイヤーの［フレーム1］を選択し、［修正］→［シェイプ］→［シェイプヒントの追加］を選択する。オブジェクトの中心に「○a」と表示される【図11】。

2．○aをドラッグしてオブジェクトの右上端にスナップさせる。同じ手順でシェイプヒント「○b」を追加し、オブジェクトの右下端にスナップさせる。同様に、「○c」、「○d」をオブジェクトの左上端、左下端にスナップさせよう【図12】。削除したい場合は、ステージの外へドラッグするとよい。

3．「右ページ」レイヤーの［フレーム30］を選択する。すでに○a～○dが配置されているので、○aをドラッグして、先ほど設定したポイントと対応するように、オブジェクトの左上端にスナップさせる。同様に○b～○dを対応させる。対応させることに成功すると○の色が赤色から緑色に変わり、［フレーム1］のシェイプヒントは黄色に変わる【図13】。

4．最後に「text」レイヤーを追加して、［フレーム60～80］にテキストがアルファで現れるモーショントゥイーンを加える【図14】。全レイヤーの［フレーム110］にフレームを挿入して完成だ。［制御］→［ムービープレビュー］で確認してみよう。シェイプトゥイーンが意図通りに変形しているはずだ。