PhotoshopやIllustratorと連携可能なWebアニメーションツール Adobe LiveMotion アドビシステムズ オープンプライス 3万7800円(Adobe Store価格) カスタマーインフォメーションセンター　03-5350-0407 http://www.adobe.co.jp/

アドビシステムズの「Adobe LiveMotion」は、Webページで利用するアニメーションやインタラクティブな素材を作成するためのソフトウェアだ。いわば、「Macromedia Flash」のライバルとも言うべき製品で、Webアニメーションの世界で事実上の標準となっている「SWF」(Shockwave Flash)形式への書き出しをサポートし、プロデザイナーに必携のツールである同社の「Photoshop」や「Illustrator」との強力な連携機能を持つのが大きな特徴だ。

再編集が容易な
オブジェクト単位でのアニメーション作成

	Adobe LiveMotionの全体画面。ツールボックスをはじめとして、同社の主力製品であるPhotoshopやIllustratorと共通化されている部分が多く、それらのアプリケーションを触ったことのあるユーザーならはじめてでも戸惑いは少ないだろう。

　LiveMotionのアニメーション作成機能のポイントは、“オブジェクト単位でアニメーションの変化を編集していく”という部分だ。読み込んだ画像やLiveMotion上のツールを使って作成した図形／文字は、それぞれ1つのオブジェクトとして扱えるので個々にアニメーションを設定できる。このオブジェクト単位で編集することのメリットは、たとえば「AとBという2つのキャラクターが上から落ちてくる」アニメーションを作成するときに、Bだけ早く落ちるように変更する場合には、Bの動きの設定のみを変えればいい、という具合だ。なおオブジェクトには「位置」「不透明度」「回転」「スケール(大きさ)」「色」などの属性があり、位置の値を変化させればそのオブジェクトは上下左右に移動し、スケールを変えれば大きさが変わるといったように、これらの値を変化させることでアニメーションを実現する。

	Adobe AfterEffectsのそれに近い操作感を持つ、LiveMotionのタイムラインウィンドウ。オブジェクトごとにさまざまな属性があり、その属性の値を変化させることでアニメーションを作成する。

　アニメーションを作成するとき、LiveMotionで重要な役割を担っているのが「タイムライン」ウィンドウだ。ユーザーはここで、アニメーションの全体の長さ、それぞれのオブジェクトの表示開始／終了時間、さらにどのオブジェクトに対して動作を設定するか、動作の開始キーフレームの設定などを行っていく。なお、基本的な操作は同社の映像編集ソフト「Adobe After Effects」に近く、これに慣れたユーザーならすんなりと入り込めるだろう(はじめて触る人でも、さほど難しくはない)。

　では、実際にアニメーションを作ってみよう。まずキャンバスの上に、テキスト描画ツールを使って「A」という文字を描く。するとそれがオブジェクトとして、「ブラック“A”」という名前でタイムラインウィンドウに登録される。続いて現在選択されている時間を示す「再生ヘッド」をアニメーション開始位置に合わせ、「ブラック“A”」−「変形」から「位置」属性を選び、左にあるストップウォッチアイコンをクリックし開始キーフレームを作成する。その状態のまま、再生ヘッドをアニメーション終了時間まで移動し、キャンバス上の「A」の文字を画面内の移動させたい場所までドラッグする。動かし終わると終了キーフレームが作成され、自動的にその中間も補間されてアニメーションが完成する。

　なお、属性はそれぞれ個別にも設定でき、それを組み合わせることで複雑なアニメーションを実現できる。先ほどの「A」のオブジェクトに対して回転属性でアニメーションの最後に「変形」パレットの角度の値を「360」に設定すれば、1回転しながら「A」が移動する、というアニメーションになる。同様に“不透明度”(背景を透過させる／させないの度合い、0ではオブジェクト自身が透明になり、100だと背景を透過しない不透明になる)を調整して徐々に現れながら移動する、あるいは色の属性を変化させて赤から青へと色を変えながら移動する文字、などバラエティに飛んだアニメーションが簡単に作成できる。嬉しいのは、こうして作成した“アニメーション”を別のオブジェクトにも簡単に適用(再利用)できるという点だ。異なるオブジェクトが同じ動きをするアニメーションを作る場合に、作業時間が大幅に短縮できる。

　テキストの扱いが非常に柔軟である部分は、LiveMotionを利用する大きなメリットとして特筆しておきたい。たとえば何らかの文章をアニメーションで動かすといった場合でも、まずテキストツールを使って文章を打ち込み、続いてオブジェクトメニューの「文字ごとに分割」を実行するだけですべての文字がバラバラのオブジェクトに変換される。これによって1つずつ文字を打ち込むなどといった作業は必要なく、スムースにテキストアニメーションを製作できる。また、アニメーションを作成している途中で文字あるいはフォントを変えるといったことも可能で、最初から作り直す手間が省けるのは大きい。

ペンツールからフィルタまで
描画機能の充実にも注目

	Adobe LiveMotionの主要パネル。キャンバス上の図形や文字に対して、これらのパネルでさまざまな属性を編集することができる。よく使うパレットを1つのウィンドウにまとめる、使わないパレットを非表示にするといったカスタマイズができる。

　アニメーションを作成するだけでなく、実際に動かすイラストや画像を作成・編集するための機能が豊富に用意されているのも、LiveMotironの大きなポイントの1つだ。まずイラストを描くためのツールとして、四角形や角丸四角形、楕円や多角形といった基本的なものに加え、Illustratorでお馴染みのペンツールが用意されている。加えてPhotoshopのフィルタのうち67種類(プラグインで追加が可能)を利用できる点や、個々のオブジェクトごとにレイヤーを持つことができるといった部分も、LiveMotionの描画ツールをより使いやすいものにしている。

　実際にイラストを作成してみて便利に感じたのが、3Dの文字やボタンが簡単に作成できるところ。パレットの一つに「3D」が用意されており、ここで3D効果の種類(カットアウト／エンボス／ベベル／波紋の4つ)と、深さやぼかし、照明、角度などの値を設定すれば指定したオブジェクトが簡単に3D風の画像になる。これを利用することで、“クリックするとヘコむ”ボタンを作る場合でも、クリックする前の画像に「エンボス」、クリックしたときの画像に「カットアウト」を指定するだけで、いともたやすく作れる。

	テクスチャとスタイルのパレット。テクスチャは背景やオブジェクトに対して割り付けられる画像が、スタイルはオブジェクトの属性情報などが登録されている。標準で多くのテクスチャやスタイルが用意されているほか、ユーザー自身が登録して拡充することもできる。

　「スタイル」パレットも、イラストの作成にかかる労力を軽減してくれる便利な機能だ。前項で「作成したアニメーションを登録しておける」と書いたが、このスタイルではアニメーションのほか、レイヤーごとに指定した効果なども登録できる。たとえばレイヤーを使ってオリジナルの3D効果をつけたオブジェクトを1つ作成し、それをスタイルに登録しておけば、ほかのオブジェクトに同様の効果を一発で適用できる。これは単に作業の効率化を図るだけでなく、Webサイト全体でイメージを統一できるという面でも有用な機能であろう。

定番ツールとの強力な連携
インターフェイスも統一

　Adobeお得意の、同社の他アプリケーションとの連携も充実している。PhotoshopやIllustratorファイルを直接読み込めるのはもちろん、レイヤー情報も復元される。このレイヤーは1オブジェクトのレイヤーとして扱うことも、1レイヤーごとに複数のオブジェクトに分割することもでき、さらに複数のレイヤーをアニメーション(各レイヤーをパラパラアニメの1コマ)として取り込むオプションまで用意されている。また、読み込んだファイルを選択した状態で編集メニューにある「オリジナルを編集...」を実行すれば、作成元のアプリケーション(PhotoshopやIllustrator)が自動的に立ち上がって編集でき、そこで行った変更は、LiveMotionにも即座に反映される。

　もちろん基本的なユーザーインターフェイスやショートカットの類は、PhotoshopやIllustratorとの統一が図られている。アニメーション作成ツールは機能が膨大な分、とかく操作が複雑になりがちだが、定番ツールとインターフェイスをそろえることで、戸惑うことなく入り込めるよう演出されている。プロやハイアマチュアの定番ツールとして君臨する2つのビッグネームを抱える、Adobeならではの大きなメリットだ。

　Web向けアニメーション作成ツールの元祖といってもいいマクロメディア「Macromedia Flash」と比較して、LiveMotionが勝っている点は、

• Photoshopのフィルタが利用できる
• 3D形状のオブジェクトが簡単に作成できるなど、見栄えのするイラストがLiveMotion単体で作れる

という部分が挙げられる。加えて、すでにPhotoshopやIllustratorを利用しているデザイナーにとっては、それらのアプリケーションのレイヤー構造を活用できる面でも、LiveMotionを使うメリットは大きい。一方のFlashは強力なスクリプト言語「ActionScript」を搭載し、高度なゲームまで作れてしまうほどのインタラクティビティの高さが魅力だ。それぞれに譲らぬ魅力を持っており、おそらく実際の制作現場では用途に応じて両方のツールが使われていくものと思われる。もし、これからWebアニメーションの入り口に立ってみようと考えているユーザーには、これ1本でアニメーションを作成していけるLiveMotionをお勧めしたい。

• 【関連記事】グラフィックソフトレビューインデックス (http://db.ascii24.com/db/review/soft/gra...)
• 【関連記事】ASCII24「アドビシステムズ、ウェブアニメーション作成ツール『Adobe LiveMotion日本語版』を発売」ニュース (http://ascii24.com/news/i/soft/article/2...)

(及川 晴生)