Technical Notes
テクニカルノーツ
カンベの つまずきポイント①〜Adobe Animate編 トゥイーンの違い〜
こんにちは、デザインアシスタントのカンベです！
最近はYouTubeやTik Tokなどの各種SNSで動画を見ない日はないですね。
自分で動画を作っているという方も多いのではないでしょうか？
また、アニメーションを使った動画もよくみかけます。
当社でも企業やサービス紹介などのアニメーションを使った動画制作を依頼されることもあります。
今回は、そんなアニメーションを作る時に私がつまずいたポイントについてご紹介します！
使うのは「Adobe Animate（アドビ アニメイト）」というアプリです。
Adobe Animateとは
「Adobe Animate」は画像やIllustratorで用意したイラストなどに動きをつけてアニメーションを作ることができる高機能なアプリです！
ただ、Animateは他のAdobe製品（Photoshopやillustrrator）に比べて知名度も低く、使い方を調べようにも使っている人が少ないせいか、なかなか知りたいことがわからないということも…
私も使い始めたときは非常に苦労しました。
なので、私がつまずいたポイントをまとめよう！
と思い立ち、今この文章を書いています。
特に悩んだポイントは2つ
- トゥイーンの違い
- 音のつけかた
長くなってしまうので、今回は最初につまずいた「トゥイーンの違い」についてまとめていきます。
トゥイーンの違い
トゥイーンとは「between（〜の間）」から由来する言葉で、アニメションの最初と最後を指定するだけで、その間の動きを自動的につけてくれるとても便利な機能です。
Animateにはこの「トゥイーン」が３種類あります。
- クラシック
- モーション
- シェイプ
まず、この３つの違いがよくわからず、初心者の私はつまずきました。
１つづつ見ていきましょう。
クラシックトゥイーン
Flash CS3 以前でのトゥイーン処理を指しており、主に以前に作られたデータの移行のために維持されているそうです。
キーフレーム（動作の始点と終点）間の細かな調整はできず、移動するだけのアニメーションなどに向いています。
モーショントゥイーン
クラシックトゥイーンと似ていますが、キーフレームを使ってより細かく動きを調整することができます。
移動・サイズ変更・回転・フェード・カラー効果など、様々な動作に最適です。
また、動きの軌跡が点線で見えるのでとっても便利。
一番使うのはこれです。
シェイプトゥイーン
これは他2つとは少し違い、2つのシェイプ（図形）間の中間のシェイプ（形状・色の変化）を自動で生成してアニメーションを作る事ができます。
つまり最初に「丸いシェイプ」を置いて、動作の最後に「四角形いシェイプ」を置き、シェイプトゥイーンを作成すると、丸から四角に変化していくの過程を勝手に作ってくれるのです。
またはシェイプの形を一部変えてやることで、伸びる矢印といったアニメーションも作れちゃいます。
動かしてみよう！
実際にそれぞれのトゥイーンをつかってアニメーションを作ってみましょう！
クラシックトゥイーン
クラシックトゥイーンをつかって、当社のマスコットキャラのめろんチュ（LINEスタンプ販売中！）をジャンプさせてみましょう。
- 画像を挿入
- 空白のフレーム追加（30Fまで）
- フレームを選択してクラシックトゥイーンを作成
- 5、10、15、20、25、30Fでそれぞれジャンプしているイメージでジグザグに画像を移動
直線的な動きではありますが、めろんチュをジャンプさせることができました。
モーショントゥイーン
もっと自然な感じにジャンプさせたい！
って言うときはモーショントゥイーンの出番です。
先程と同様に、今度はクラシックトゥイーンを作成してジグザクに移動させます。
このまま再生してもさっきと同じように直線的な動きになってしまいますが、動きの軌跡を示すパスを引っ張って曲線にすることで…
なめらかにめろんチュをジャンプさせることができました！
このようにモーショントゥイーンはどう動くのか、軌跡が点線で見えるのでわかりやすく、細かな調整をしやすいのが特徴です。
シェイプトゥイーン
最後にシェイプトゥイーンを使ってみましょう。
- 最初のフレームにシェイプで青い丸を描く
- 空白のフレームを追加
- 最後のフレームにシェイプで赤い四角を描く
- フレームを選択してシェイプトゥイーンを作成
青い丸がだんだん赤い四角に変化していくアニメーションを作ることができました！
今回のまとめ
今回はカンベのつまずきポイントとして、Adobe Animateの「トゥイーン」の違いについて説明させていただきました！
これらのトゥイーンを使いこなせば、キャラクターを歩かせてみたり、ちょっとしたエフェクトをつけてみたりと様々なアニメーションを作る事ができます。
動画広告以外にもWebサイト上で動いているアニメーションや企業のロゴアニメーションなど、様々な場面にぴったりです。
次回は「音のつけかた」を紹介します！
