Webサイトのマスコットキャラクター、動画やSNS投稿などに
ちょっとしたアニメーションデザインを加えてみたいと思ったことはありませんか？
この記事では
この記事では、手軽にアニメーションを作成できる「MOHO PRO」を使用して かわいいネコのアニメーションを作る方法を解説します。
この記事ではMOHO PRO12を使用していますが、最新版のバージョンはMOHO PRO13となっています。
MOHO PROの特徴
アニメーション初心者でも簡単にできます。
MOHO PROは、ベクター画像ややラスター画像を素材に使って、簡単にアニメーションを作成できるパソコンソフトです。
MOHO PROは、ベクター画像やラスター画像を素材にして、簡単にアニメーションを作成できるソフトです。 価格は手頃でありながら基本的なアニメーション機能が充実しており、アニメーションを気軽に楽しむことができます。
Moho Pro 13 作画・着色・アニメ設定 アニメーション作成ソフト ダウンロード版
Moho Pro 13（最新版） ソースネクスト | アニメーション作成ソフト | 作画、着色、アニメーション設定、出力 | 日本語マニュアル付 | Windows10/Mac
素材とタイムライン機能だけでアニメーションが作れます。
MOHO PROは、アニメーションの元となる素材（画像データ）があれば、タイムライン機能だけでアニメーションが作成できます。
もちろんボーンを使ってリアルなアニメーションを作成することもできますが
今回はタイムライン機能を使用します。
MOHO PROを使ったアニメーション画像の作成
ベクター画像や、ラスター画像（JPEG/BMP/PNGなど）
手書きのイラストやCGでも画像データに変換すればOKです。
用意した画像を、MOHO PROにドラッグアンドドロップするだけです。
取り込んだ画像は、自動的にレイヤー分けされます。
取り込んだ画像の移動・回転・拡大・縮小の原点（中心）を設定します。
この設定はデフォルトのままでも構いません。
用途に合わせて、アニメーション画像のサイズや品質を調節します。
取り込んだ画像のアニメーションしたいフレームレートを設定します。
中間のフレームは自動的に補完されるので、シンプルで構いません。
作成したアニメーションを保存して完了です！
アニメーションさせたい素材を用意します
アニメーション画像を作成するには、MOHO PROソフトに加えて
素材となる画像（ベクター画像、写真、イラストデータなど）が必要です。
このサンプルではネコの画像（PNG）を使用し、ネコの頭部と胴体の２つのパーツを取り込みます。
（下はサンプルの透過PNGデータです。容量削減のために画像出力時に品質を下げて保存しています。）
MOHO PROの起動
MOHO PROを起動し、新しいファイルを作成すると「未タイトル」の画面が表示されます。
アニメーション用のレイヤーに画像を貼り付ける
簡単なアニメーションを作成する場合、複雑な作業なしに画像をドラッグアンドドロップするだけでアニメーションができます。 用意した画像を画面にドラッグアンドドロップすると、画面右下のレイヤーに取り込んだ画像のレイヤーが自動的に作成されます。
（ネコの頭部分と胴体部分の画像データをそれぞれ行って下さい）
レイヤーは、上に表示されているものが最前面となりますので
上から「猫の頭」・「胴体」・「バックグラウンド」の順番になっていればOKです。
ここで、猫の頭と胴体の位置を整えておくと後の作業がしやすくなります。
上の図を参考にして、パーツの位置を調節して下さい。
動かしたい画像の「原点」を編集する
MOHO PROに画像を取り込むと、各画像の中央に原点（赤い十字）が設定されます。 この原点は画像の回転や拡大縮小などの基準位置となります。
今回のサンプルではネコが首を振るようなアニメーションを作りたいので、「猫の頭」のレイヤーを選択し、画面左側のメニューから「中心を設定」を選択し、ネコの首元に原点を移動します（赤い十字マーク）。
これでアニメーションの準備が整いました。
アニメーション画像のサイズや品質を設定する
アニメーションを作成する前に、アニメーション画像のサイズと品質を設定します。 MOHO PROのメニューから「ファイル」→「プロジェクト設定」を選択し、プロジェクト設定ウィンドウが表示されたら「サイズ」から好みの設定を選択します。
他の画像サイズには
カスタムサイズ
NTSC D1(720534) NTSC D1ワイド画面(872486)
PAL D1/DV(788576) PAL D1/DV ワイド画面(1050576)
480P ワイド画面(852480) 720p HDV/HDTV(1280720)
1080p HDTV(19201080) 4K ウルトラHD(38402160)
4K デジタル映画(40962160) VGA(640480)
Web(320240) Webワイド画面(426240)
YouTube(640480) YouTube 720p(1280720)
YouTube 1080p(1920*1080)
があります。
このサンプルでは「Web(320*240)」を選択し、動画のフレームレートは24、被写体深度の設定はなし、レンダリングスタイルは全て「標準」に設定し、アンチエイリアシングにチェックを入れています。
アニメーション画像のクオリティを重視する場合は、個々の設定を調節して下さい。
タイムラインを使ってアニメーションを作成する
このサンプルではシンプルなアニメーションなので、タイムラインには3つのポイントがあれば十分で、MOHO PROには中間のアニメーションを自動的に補完する機能があります。
アニメーションは1から24までの短い動画なので、まず開始フレーム1にネコが真っ直ぐ座っている画像を配置します（ネコの頭のレイヤーと胴体のレイヤーを、そのまま配置したもの）
タイムラインのフレーム1に、丸いマーカーが表示されていればOKです。
次に、中間のフレーム（12辺り）にネコの頭を傾けた画像を作成します。（上の図）
新しいフレームを作成するには、タイムライン上で12の辺りまでマウスを移動します。
（緑色のラインが選択中のフレームです。）
ネコの頭のレイヤーを選択し、画像を囲んでいる選択枠が表示されたら、枠の外側を左右どちらかに回転させます。
ネコが首を傾けている感じになったら、これでフレーム12のアニメーションが完成です。
24フレーム目のアニメーションは、1フレーム目を同じ画像にしたいので
フレーム1の丸マーカーをコピーして24フレームにも貼り付けます。
これで1・12・24フレームのアニメーションが完成です。
中間のフレームは自動的に補完されているでしょうか
最後にタイムラインの位置を動かして、アニメーションが思い通りに動くか確認してください。
またお好みで「背景」やパーティクルなどを加えても面白いと思います。
（パーティクルはMOHO PROの機能を使って実装できます）
アニメーションのエクスポート
アニメーションの確認が終わったら、あとは画像を書き出すだけです（エクスポート）
MOHO PROのメニューから「アニメーションをエクスポート」を選択し、開始フレームと終了フレームを確認し、画像の出力方法や品質設定を選択します。
（このサンプルでは「アニメーションGIF」を選択しています）
他の保存形式には
M4V
MP4
AVI
AVI(Windows動画)
Flash
アニメーションGIF
SVG
また、レンダリングやパーティクルなどの項目も必要に応じて調節し、保存先を選んで「OK」を押すと完成です。
下に表示されている画像が、アニメーションGIFとしてエクスポートしたものです。
画像のサイズや品質は、用途や見栄えに合わせて調節して下さい。
（この画像の設定では190KBになります）
アニメーションの活用
複雑な動きの付いたアニメーションを作るには、それなりの時間がかかってしまいますが
このサンプルのように、簡単なアニメーションであれば数分で作成できます。
アニメーション画像を取り入れることで、企業のマスコットキャラクター、Webサイトデザイン、YouTube動画、SNS投稿、メールなどで視覚的な効果を得ることができます。ぜひお試しください。
Moho Pro 13 作画・着色・アニメ設定 アニメーション作成ソフト ダウンロード版
Moho Pro 13（最新版） ソースネクスト | アニメーション作成ソフト | 作画、着色、アニメーション設定、出力 | 日本語マニュアル付 | Windows10/Mac
コメント