初心者必見！AdobeAnimate使い方講座～その４～

こんにちは！

あたしココネ株式会社、採用広報インターン生のさけ！

こっちは相棒のマルマル。

さて、今回は予告通り、前回の続きから解説させていただきます。

前回の記事を見ていない！この黒い塊は何だ！という方はこちらの記事をご覧ください
→https://www.wantedly.com/companies/cocone/post_articles/345018

前回は最後にタイムラインについての解説をしました。
ということで早速ですが、試しに今回はこのタイムラインを使って1秒間の動画を作ってみたいと思います。

３．タイムラインを使ってみよう

①まず1sにあたる30fpsのメモリをクリックし、青く変化させます。

②そこを右クリック→「フレームを挿入」（もしくはF5）

すると、フレーム1－30fps内が灰色の帯状に表示されました。

これで1秒の間、レイヤー1の画像が表示され続けるという意味になります。
１秒間青い丸が表示される動画が完成しました。

タイムラインはこのように、時間とオブジェクトの表示/非表示を切り替えるツールだと考えてくださいね。

マルマル「なるほど！わかりやすいマル～」

マルマル「ところでフレームの左端の黒い丸は何マル？僕にそっくりマル！」

さけ「これはキーフレームといって、フレームの指標になる大事なものだよ。今から解説するね」

４．キーフレームを理解しよう

さて、タイムラインを見たとき、フレーム内に黒丸があるのがわかるでしょうか？

これは「キーフレーム」といって、フレームの重要な核となる部分です。

キーフレームは基本的にフレームの初めにつき、フレームの区切りとなります。
そしてキーフレームの担当するフレームの操作を行うことができます。
いわばフレームの司令塔です。

（ちなみにこのマルマルはキーフレームをモチーフに作られました。
キーフレームを忘れそうになったらマルマルの顔を思い出してくださいね。）

ここを右クリックで選択すると、フレーム全体の属性を変更したりできます。また、キーフレームを長押し左クリックしたまま左右に動かすと、フレームの長さを調節することもできます。

キーフレーム＝ひとつのフレームの司令塔、目印のようなものだと考えてください。

５.動かしてみよう

では以上を踏まえ、簡単なアニメーションを作ってみましょう。

今回は上の図のように、１秒間で右に動く物体を作ります。

やり方はとっても簡単です。

①まず移動が完了してほしい30fps地点で右クリックするとステータスバーが出るので、「キーフレームの挿入」を選んでキーフレームを打ちます。（詳しくは「３.タイムライン」を参照）

すると上の図のように30の地点にキーフレームが打たれます。

②次に30fps地点で図形を右に動かします。

エンターキーをおすとタイムラインが再生されるのでみてみましょう。

すると、30fps地点でぱっと青い丸が右に移動するだけの動画になってしまっているので、
この間をつなげて動いているように見せる必要があります。

ここで、Animateの機能を使います。

Animateには「クラシックトゥイーン」といって、キーフレームとキーフレームの間のモーションを自動生成してくれる機能があります。

では早速つけていきましょう。

③初めの1fps地点でキーフレームを右クリックし、「クラシックトゥイーンを作成」を選択します。

するとフレームが紫色になり、キーフレーム同士が矢印でつながれたのがわかるでしょうか。

これで,1fps地点から30fps地点の間がつながれ、その間を動くモーションが追加されたということになります。

再生してみると、青丸が滑らかに動いて右に移動しました。

これでアニメーションの基礎は完成です！お疲れ様でした！

マルマル「なんとなくわかったマル！こうしてみると、アニメーションって絵とタイムラインさえあれば作れるマルね～」
さけ「そうだね」

マルマル「最後にここまで頑張ってついてきてくれたみんなに、僕からとっておきのプレゼントがあるマル！」
さけ「え、なに？」

マルマル「この金色のひもを引っ張ってみてほしいマル」

さけ「ああ、このでてるやつか」

「よいしょ」

「えっ」

マルマルー！！！！！！！

マルマルは命を懸けて残した最後の言葉は、ここまで学んできてくださった皆様への祝福の言葉でした。

マルマルの尊い犠牲を忘れず、今後も頑張って学んでいきましょう！

最後に

もし気に入ったらいいね！していただけると嬉しいです。
フォローしていただければ更新情報がいち早く手に入りやすくなるかと思いますので、
よろしければご利用ください。

最後はマルマルと私と、遠くを見つめる猫のニャッホの写真でお別れです。

お読みいただきありがとうございました！

・

・

【おまけ】

マルマル制作中の様子です。

マルマルはくす玉に黒いねんどを貼り付けて作りました。
墨汁があるのは、はじめはくす玉を墨まみれにしようと考えていたためです。

しかし中にまで墨汁が入る危険性と、インターン先であるココネの水まわりを
墨だらけにしてクビにされる未来しか見えなかったので断念しました。

（ココネの広いワーキングスペースで無心でねんどを張り続ける私。）

社員の方が熱心に仕事をしている片隅でこの作業をするのはなかなかつらいものがありました。
ココネはそろそろこのインターン生を怒った方がいいと思います。

おわり