先日某案件で「写真が1枚しかないけど、良い感じに動かしたい！」という依頼がありました。

CSSやJSで動かすことも試みたのですが、なかなか思い通りにいかず
紆余曲折を経てたどり着いたのがAdobe Animate CC（旧名Flash Professional CC）でした。

使い方もこれまでのFlashを触られたことがある方ならば迷うことがなさそうですし、
なによりも、HTML5 CanvasやWebGL、SVGなどの形式に出力できるのが嬉しいところです。

今回はそんなAdobe Animate CCで静止画像を動かす工程を紹介してみようと思います。

公式サイト
Adobe Animate CC

完成イメージ

サンプルとして下記の写真を用意しました。
手を動かしてタイピングしているかのように動かしていきましょう。

上記はGifアニメーションなので少し画像が荒いですが、HTML5 Canvasで書き出すとこのようになります。

HTML5 Canvasで見る

準備

まずはPhotoshopを使って画像を幾つかのパーツに切り分けます。
作業内容は大きく分けると下記の２点。

1）今回は手を動かしたいだけなので、両手を個別に切り抜く
2）手を動かした時に見えていなかった背景が見えてしまうので、背景を簡単に合成しておく

この時に注意したいのは、1）の切り抜く手の範囲。
例えば下記のように手先だけ切り抜いて動かしてしまうと、人間味のないロボットのような動きになってしまいます。

人や動物をアニメーションさせる場合は少し手間をかけてでも、パーツを関節ごとなどに細かく切りわけ、それらを少しの時間差で動かしてやることで動物的な動きに見せることができる！…気がします（持論）

なので、完成版では下記のように右手を2つ、左手を3つに分けた画像を用意しました。

また、2）の背景画像に関してはPhotoshopの「塗りつぶし」や「コピースタンプツール」などを使いながら手を消して、多少動いても不自然さがでないように合成しておきます。

以上で準備は完了です。

Adobe Animate CCで動かす

Animate CCを起動させて、ファイル / 「新規」をクリック後「HTML5 Canvas」を選択します。

画面が開いたら、作成しておいた画像を読み込ませ、下記のようにそれぞれのパーツを少しずつずらして動かしていきます。
※Adobe Animate CCの詳しい使い方はオフィシャルサイトにチュートリアルがありますので、そちらをご覧ください。

サンプルではパーツごとに動かす方向や角度を少しづつ変えています。

納得いく動きができればHTML5 形式へ書き出します。
（ファイル / 「パブリッシュ設定」を選択し、パブリッシュ欄の「Javascript/HTML」にチェックを入れて、パブリッシュ）

動画やアニメーションGif形式で書き出したい場合は、ファイル / 「書き出し」からムービーやビデオでの書き出しを選択してください。

※直接アニメーションGifを書き出すと荒く汚い画像になることが多いので、そんな時は一旦「PNGシーケンス」で一コマずつPNGで書き出し、それらを手動でアニメーションGifにしてやると綺麗な画像を書き出すことができます。

完成版を HTML5 Canvas で見る

いかがでしたでしょうか？
他にもアニメーションの仕方は色々あると思うので、一つの方法として参考にしていただければ幸いです！