クラシックモーショントゥイーンでアニメーションを作成

さあ、楽しい作業を始めましょう 前回はAnimateの描画ツールの使い方と シンボルとは何かを説明しました 今回は、クラシックトゥイーンを作成しましょう まず、最初のキーフレームをクリックして、Deleteを押します まず、最初のキーフレームをクリックして、Deleteを押します ポイントは、キーフレームをクリックすると キーフレーム内のコンテンツがすべて選択されること ここでは3つのボートがすべて選択されます Deleteを押して ボートのシンボルの新しいインスタンスをステージにドラッグします 少し大きいので、自由変形ツールを使うか Qキーを押して コーナーから縮小します Shiftキーを押しながら、縦横比を維持しましょう ステージの左側に移動します レイヤーを「boat」と名付けます キーフレームが1つできました アニメーションには必ず2つのキーフレームが必要です 始点のキーフレームと 終点のキーフレームです 終点は3秒くらいの地点にしましょう 終点は3秒くらいの地点にしましょう 3秒のところで右クリックして 「キーフレームの挿入」を選択します キーフレームが2つになりました 最初のキーフレームはステージの左側です 新しいキーフレームを作成するたびに 前のキーフレームにあるものがコピーされるため 2つ目のキーフレームには、同じサイズの同じボートが ステージの同じ場所にあります クリック＆ドラッグで右に移動します Shiftキーを押したままにすると X軸固定で水平移動できます ステージの左側にキーフレーム1 右側にキーフレーム2が配置されました このボートの動きを設定しています 元は、アニメーターが手描きで 中間の状態をすべて描いて ボートがステージ上を滑らかに航行するようにしますが 私たちは 最初の2つのキーフレームの間のどこかをクリックし 右クリックして「クラシックトゥイーンを作成」を選択します タイムラインをスクラブすると ステージ上をボートが通ります シンプルなアニメーションができました 次に、背景アートを加えましょう 今は空中に浮いているようです 新しいレイヤーを追加して 「Sky」と名付けます ここでは作成済みのビットマップがあり Skyという名前でライブラリに入っています それをステージにドラッグします これは、撮影した写真をPhotoshopに取り込み 空の一部を選択したものです コピーし、新しいファイルにペーストして 色調補正をおこなった後 Creative Cloudライブラリにドラッグすれば Animateで使えるようになります とても簡単ですね 空をボートのレイヤーの下にドラッグして 背景になるようにします もう1つレイヤーを作成して 「water」と名付けます その水のシンボルを選択して ステージにインスタンスをドラッグします 線のない単純な長方形を描きました Optionキー（macOS）または Altキー（Windows）を押しながら クリック＆ドラッグで、途中にポイントを追加し カーブを波のように調整します それをクリックして選択し 「修正／シンボルに変換」を選択します これでライブラリに配置されます 水面とボートができました ボートを水面の背面に置くため ボートのレイヤーを選択して 水面と空の間に置きます Return（Enter）を押します 良さそうですね しかし、ボートが水面に 浮かんでいたら、多少は揺れるでしょう そこで、ボートのレイヤーを選択して 右クリックし 「クラシックモーションガイドを追加」を選択します これでボートのアニメーションが通る パスを描きます ガイドという新しいレイヤーができ 空白のキーフレームが入っています それをクリックして 鉛筆ツールを使い 「スムーズ」に設定して ボートの中心点あたりからドラッグして 波に沿って 滑らかな線を描きます 厳密に描く必要はありません ダブルクリックで全体を選択し 「滑らかにする」を選択すれば調整できます 良くなりましたね 次に、ボートを選択して ガイドにロックします 最初のフレームはデフォルトでガイドにロックされるため 問題ありません 2つ目のキーフレームをクリックします 2つ目のキーフレームは、ここに中心点があるので これをドラッグしてガイドにスナップさせます するとフレームの中にボートが残ることがわかります するとフレームの中にボートが残ることがわかります そこで、ガイドをドラッグしてもう少し引き出します それからボートのキーフレームを選択して フレームの外にドラッグします これでパブリッシュしたときに、ボートが ステージから完全に消えます タイムラインをドラッグすると ボートがガイドに沿って上下します ガイドは透明化されているため ムービーでテストしても見えません もう1つ修正が必要な箇所があります 今の上下の動きはメリーゴーラウンドのようです そこで、最初のキーフレームをクリックし プロパティパネルを表示します 「パスに沿って回転」をクリックします 「パスに沿って回転」をクリックします これで、ボートはパスに沿って向きを変えます それらしい動きになりました もしも酔っ払ったように見えるときは 最初のキーフレームがパスの向きに沿っていることを 確認してください ここではパスが右上がりになっています ボートをクリックして自由変形ツールを選択し カーソルをコーナーの外側に置き 小さな回転ツールが表示されたところで 向きを調整します ボートの向きをパスの軌跡に合わせましょう その最初のキーフレームの向きが2番目のキーフレームで 終わるようにします こちらは正しい向きですね 線をまっすぐにしてから、それに合わせて ボートを動かす方法もあります タイムラインをスクラブすると モーションガイドの軌道に合わせて ボートが水面を渡っていきます アニメーションをプレビューしましょう 「制御／ムービープレビュー」を選択するか Command+Return（Ctrl+Enter）キーを押します モーションガイドを使用したボートのモーショントゥイーンが表示されます 次回は、ムービークリップという別の種類の シンボルについて説明します ご期待ください