• WAN55
  • コラム
  • マークアップ
  • Flashがない?だったらAnimate CCを使えばいいじゃない~Animate CCの仮想カメラでカメラワークして...

Flashがない?だったらAnimate CCを使えばいいじゃない~Animate CCの仮想カメラでカメラワークしてみよう編~

マークアップ Webデザイン

2017.04.07(Fri)

こんにちは、アカウントセールス部のフロントエンドエンジニア、土樋(つちとい)です。

最近というか、ずいぶん前からWebサイトでFlashコンテンツを見なくなりましたね。
Flashの先進性に心奪われてWeb業界に転職した自分としては、本当に悲しい状況です。
なぜこうなってしまったかは、「Flash ジョブズ」あたりで検索していただければと思います(諸説あり)。

ですがFlashは無くなったと思っている方、それは間違いです。
名前を変えて今も生き続けています。
そう「Adobe Animate CC」として。

※名称変更の理由についてはアドビがこちらで説明しています。

Animate CCは、Flash Professional同様、強力な操作ツールによりインタラクティブなアニメーションを直感的に作成することができる、優れたソフトウェアです。
JavaScriptやActionScript等のスクリプトを駆使すればアプリやゲームを作成してマルチプラットフォームに書き出すこともできます。
いやぁ凄いなぁ。

Animate CCで個人的に注目している機能

Animate CCはインターフェース等の基本的な使い方はこれまでのFlash Professionalと同じですが、Animate CCに名称が変更になってからも多くの機能が追加されています。

その中で私が一番気になっているのが2016年11月に追加された「仮想カメラ(内蔵V-Cam)」機能です。

今回はこの「仮想カメラ機能」を紹介します。

仮想カメラ機能とは?

「仮想カメラ」機能では、ビデオカメラのように、パン、ズームイン、ズームアウト、回転等のカメラワークを簡単に導入することができるんです。

下の画面は、1つのステージの中だけでいろんなシーンのアニメーションが動いていることを示しています。

「仮想カメラ」を使用すると、このステージの中のどの範囲を表示対象とするか、を設定できるんです。

仮想カメラツールをアクティブにすると、このような画面が表示されます。
青い枠が最終的に出力される範囲です。

この青い枠上をドラッグすると枠が移動して別の範囲を表示対象にすることができます。
この枠の動きをアニメーションすると、画面をパンする効果を実現できます。
その他にも、画面下部に表示あるコントローラーを操作してズームインや回転効果を与えることができます。

これまでよりも手軽に「映画のようなカメラワーク」を導入することができます。
凄いですね!

(作例)「仮想カメラ」機能を使って、ゆるアニメを作ってみた

「からまるくん。」というアニメーションを作成しました。
会社で席の引っ越し作業をしている時に思いついた、机と机の隙間の世界を描いたゆるアニメです。
私が常々思っていた「なんでコード類はいつの間にかありえない絡まり方をしているのだろう?」という疑問を表現した内容で、あくまでカメラワークを見せたいという目的で作ってますので、画面が無駄にパンしたりズームしたり回転したりしてうるさく感じるかもしれません。
突貫で作っていますのでクオリティについては…何卒ご容赦願います!

なお、Animate CCならではのインタラクティブ性をちょっとだけ入れたかったため、途中に出てくるボタンを押さないと次に進まないようになっています。

では、下記の再生ボタンを押してお試しください!

DEMO
※なるべく最新のブラウザでご覧ください。

まとめ

たくさんの機能があるAnimate CCの中のほんの一部の機能だけでしたが、少しでも面白さが伝わっていただければ幸いです。

個人的な考えになりますが、Flashという素晴らしいツールをアドビは名前を変えてでも残したかったのかなと思うので、私は今後もこのソフトウェアに注目し続けたいと思っています。

できればFlash全盛期のようにAnimate CCを使ったエキサイティングな作品が毎日のようにリリースされることを願っております。

ご興味を持った方はアドビのサイト(↓)を今すぐチェックしてみてください!

http://www.adobe.com/jp/products/animate.html