Animate CCを使ってみる #1 -キャラクターを動かそう-

こんにちは、イラスト・漫画担当のまなみです。

今回はアニメーション作りに挑戦してみよう!という企画です。

アプリやゲームのアニメーションまで幅広く作成のできるAdobeのソフト『Animate CC』を使って少しずつキャラクターを動かす練習を進めておりますので、こちらに行ったことを随時メモしていきます。さぐりさぐり。

 

第一回目はまずオリジナルキャラクターに単純な動きをつけていきます。

今回の企画はAnimateの知識ゼロの状態から勉強していきますので、学んでいく上でおや?という発見があれば随時記事の方も更新かけていきます🤯

今日ご紹介するのはこちらの作業▼です。

本日の作業の流れ

1.キャンバス(ステージ)を作る

2.キャラクターを動かしてみる

3.おまけ

これだけでキャラクターが動かせます💪💥

それではどうぞよろしくお願いします。

 

 

1.まずはステージ(キャンバス)を用意する

Animate CCを起動し、新規作成でステージを開きます。

この”ステージ”とはペイントソフトで言うところのキャンバスのようなものです。

サイズは使用目的に合わせ選択し、今回はプラットフォームタイプをHTML5 Canvasドキュメントに設定。

特殊なことしない限りはHTML5 Canvasを選んでおけばOKです!

(幅広いOSに対応したHTML5 Canvasと対照的にAIR形式は特定のOSのみに対応する形になるので、その都度変換する必要があるみたいです)

 

(背景が必要な場合はCCライブラリにデータを用意しておくと手軽に設定できます!)

 

画面の最下部にタイムラインというタブがあり、[レイヤー_1]1…5…10…と数字が打たれています。

この数字がアニメーション上での経過時間を表します。

レイヤーはパーツごとに作り分けができるので部分ごとに動きをもたせたい時には複数使用します。(今回はめっちゃ単純です😙)

 

2.キャラクターを動かしてみる。

次に現在のレイヤーにキャラクターを配置します。

今回はキャラクターのパーツなどを細かく動かさないため、別ソフトで作画したパーツのレイヤ分けされていないシンプルなキャラクターを読み込ませました。ダイスケくんです。

まず動かしたい部分をシンボル化します。

キャラクターを右クリックシンボルに変換で完了です。

入り組んだものだとパーツごとにシンボルやレイヤーを分けたりしますが今回はキャラクターをまるごとシンボル化させます。

タイムライン上にフレームを設定。伸ばしただけ再生時間が発生します。

 

30秒で左側に移動する動画を作りたいので、[30]のマスを右クリックして「フレームを挿入」。

 

フレーム内のどこででもOKなので

右クリックモーショントゥイーンを作成を選択します。

このトゥイーンという機能を使うことで、右から左に移動する間の画像データが自動的に補完されるようになります。

今回は30秒後に左に移動して欲しいので、30秒地点にいるダイスケを左側まで移動させます。


この時、背中に青い矢印が現れます。

するとこのように動きます。(というか滑ります)
わーい!(無事完成です。)

 

3.おまけ

1.キャラクターの軌道をカーブさせる

選択ツールでキャラクターの軌道線をクリックし、カーソル部分に弧が現れると編集できます。

再生するとこんな感じに動きます。

2.移動しながら小さくなる

自由変形ツールキャラクターを選択着地地点のキャラクターを縮小(shiftキーを押しながら)

逆に出発地点のキャラクターを縮めておけばキャラクターが大きくなる効果も。

3.キャラクターが消えていく

選択ツールキャラクターを指定→プロパティカラー効果アルファ

着地時点でのアルファ(透明度)の値を0にしておけばフェードアウトさせることができます。

逆に出発地点のアルファ値を0に設定しておけばフェードインなどといった効果をつけることもできます。素敵。

今回覚えた機能は以上です、次回はキャラクターのパーツを動かして歩かせるなどのアクションをつけていきたいと思います。

その際にはまたこちらのブログで共有していきます😈

参考にしたのはAdobeの公式ガイドです。丁寧に各機能の補足説明がされているので興味のある方は是非☺️

それではまた次回!

 

この記事を書いた人

まなみ
漫画家・イラストレーター
1992年生まれ、愛媛県宇和島市出身。LINEスタンプ・体験漫画など制作しています☺️

関連記事

  1. LINEスタンプはじめました / Started selling LI…

  2. 「インドア、パーソナルジムへ行く」第5話 ペアトレーニング編 後編公開…

  3. 小さなお客様 / Our little customer.

  4. Animate CCを使ってみる #2 -キャラクターを歩かせよう-…

  5. 宇和島市復興支援チャリティーTシャツのイラストを描かせて頂きました/ …

  6. 誕生『ちりぺぱ』と『ぺにょ』/The birth of “…

  7. 「インドア、パーソナルジムへ行く」第2話先行公開!

  8. イラスト・漫画担当のまなみ作のLINEスタンプ配信開始!

PAGE TOP