Flash Professionalの後継であるAdobe Animate CCを使うと たくさんのストックフォト、画像、アートワークに簡単にアクセスして 複数のフォーマット用のアニメーションを作成できます 新しいHTML5 Canvasドキュメントを作成しましょう Adobe StockにアクセスするためにCC Librariesパネルに切り替えます Adobe Stockでアニメーション用のアセットを検索しましょう CC LibrariesパネルでAnimate CC内を直接検索し アセットをライブラリに直接ダウンロードできます たとえば、このように入力すると 透かし入りのストック画像がたくさん表示されます 使用する権利を持っている画像には、ここに小さなチェックマークがあります これらの画像のライセンスが欲しい場合は まずプレビュー画像としてダウンロードしてドキュメントで使用できます 気に入ったらCC Librariesパネルで直接ライセンスを取得できます このアイコンをクリックするだけです ここでは、このライセンスを持っているので検索結果をクリアして 右クリックし、ドキュメントでの使用を選択します ビットマップ画像がステージよりも大きいので サイズを変更しましょう。
ステージは550 x 400です ここでその数値を入力し、画像をステージと同じ大きさにします このレイヤーの名前をOceanにし、ロックします そのすぐ上に新しいレイヤーを作成します。
Adobe Stockに戻り 他の検索を行います。
もう少しキーワードを増やしましょう このように入力してみると たくさんの画像が表示されます。
ほとんどはベクターアートワークの一部です ベクターアートワークは、一部だけを簡単に操作したりアニメーション化できるだけでなく ピクセル化せずに無限に拡大することもできます 必要ならビットマッププレビューを保存し ここから直接ライセンスを取得することもできます この画像はライセンスを持っているので、このライブラリに入っています 右クリックして、ドキュメントでの使用を選択します これはベクターアートの一部なので Animate CCでのベクターアートの処理方法を選びます 編集可能なパスを維持し、1つの アニメーションレイヤーとして処理します。
OKをクリックします イルカが表示されます。
ライセンスを持っていない ベクターアートは、透明ではなく白い背景で描かれます 画像のライセンスを取得すると、透明な背景になります このレイヤーの名前はDolphinにしましょう さらに、自由変形ツールを使ってサイズを変更します 選択してハンドルが表示されたらドラッグして 適切なサイズにします。
Shiftキーを使うと イルカの形が伸び縮みすることなく維持されます もう少し小さくしましょう 選択した状態で選択ツールに切り替え 「修正」、「シンボルに変換」の順に選択します。
ムービークリップシンボルを作成すると 複雑なベクターアートを簡単にアニメーション化できます Dolphinと名付けて「OK」をクリックします 次に、フレームをフレーム80に拡大しましょう フレーム80上のレイヤーをクリック＆ドラッグして 両方を選択し、「挿入」、「タイムライン」、「フレーム」の順に選択します フレーム80に拡大されます Oceanレイヤーはアニメーション化しないのでロックします Dolphinレイヤーで右クリックすると、モーショントゥイーンの作成を選択できます フレーム1に戻り、イルカをここからスタートさせ フレーム40に移動し、ここにイルカを移動します このようにモーションガイドが表示されます。
モーションガイドの上にカーソルを置くと シェイプを変更するカーソルになります カーソルの近くに弧を描きます クリック＆ドラッグしてモーションパスを操作できます この側面に沿って好きなだけドラッグできます フレーム80に移動して、イルカを画面から消します 再びクリック＆ドラッグしてモーションガイドを調整できます さて、先に進みましょう プレビューすると、このようにイルカが現れて 円を描いて消えていきます もう少し改良できそうです。
モーショントゥイーンを 選択した状態で方向を選んでみましょう イルカは1回転してから消えていきます もちろん、フレーム1に移動し、この「再生」をクリックして プレビューすることもできます Canvas用に公開するには、テストを行います このように出来上がりを確認できます Adobe Stock素材の取り込み、画像のアニメーション化 HTML5 Canvasドキュメントの書き出しなど このビデオで行っていることはすべて Animate CC内で行うことができました
