Flash CS4 の新機能から探る新しいワークフロー

前バージョンの Flash CS3 では、Adobe と Macromedia が合併し、その成果として製品間の連携が驚くほど強化されたことは皆さんもご記憶のことと思います。それはほんの1 ステップで、Flash CS4 は真の意味で製品の強化に尽力されたアプリケーションです。今回は、そんな Flash CS4 の新機能の数々をご紹介いたします。すでに Adobe サイトでは製品の無償体験版がダウンロード利用可能になっています。是非実際にご自身のパソコンへインストールし、各機能を試しながらこの記事をお読み頂ければと思います。

新しいワークスペースでより効率的な作業

旧バージョンの Flash を使ってこられた皆さんが Flash CS4 を起動して最初に戸惑うのは、これまでの使い慣れたタイムラインやプロパティインスペクタ、ツールパレットの表示位置があまりにも異なっていることでしょう。

Flash CS4 起動時の画面
初期設定の Flash CS4 ワークスペース

ワークスペースを選択しかし、Flash CS4 では他の Creative Suite 製品と同様、これらの表示位置を自由にカスタマイズすることができます。右側のツールパレットが馴染めそうにない方は、ご自分の好きな位置にパネルをドラッグさせてみて下さい。タイムラインとモーションエディタが同じパネルグループではない方が便利な方もいらっしゃるでしょう。マウスでドラッグして分離させてみて下さい。また、手っ取り早く従来の設定に近い形で始めたい方や、Adobe の提案するパネルの設定で始めたい方は、アプリケーションバーの右上にあるプルダウンから予め設定されているワークスペース設定を切り替えてみて下さい。Flash CS4 ではこのように、自由自在にパネルのサイズや表示位置を変更することができ、さらにそれをプリセットとして保存することができるようになりました。机の上を整理するように、まずはご自身の使い勝手に合うパネル設定を探ってみて下さい。

 

新トゥイーンとクラシックトゥイーン

これまでの Flash では鬼門の1つとして、キーフレームによるアニメーションを理解する必要がありました。アニメーション全体の時間を伸縮するような場合、すべてのキーフレームの位置を自身で変更する必要があったり、モーションパスを別レイヤーに用意する必要があったり等、自由度や取り扱いの容易さに難がありました。Flash CS4 ではこの問題を解決するため、これまでの「モーショントゥイーン」を定義し直しました。Flash CS4 では、ステージ上にシンボルが初めて現れる「キーフレーム」と、そのシンボルがアニメーションを行うフレームグループである「トゥイーンスパン」上に現れる「プロパティキーフレーム」を使ってアニメーションを行います。プロパティキーフレームには、シンボルの座標やカラー効果といったプロパティの値が記録され、Flash はそのプロパティキーフレーム間の値を演算してシンボルをアニメーションさせます。

キーフレームとプロパティキーフレーム
青地で表されるモーショントゥイーンのトゥイーンスパン
黒丸●はキーフレーム、菱形◆はプロパティキーフレームを表す

トゥイーンスパンは、インスタンスのアニメーションの関連づけを維持したまま、伸縮、分割、結合を行うことができます。これまでのように、アニメーションが壊れてしまうことを恐れる必要はありません。特定のフレーム間のトゥイーンアニメーションを自由に伸縮させたり、異なる位置のレイヤーに移動させたりすることができます。これまでの Flash のタイムラインからは考えられないほど柔軟な操作が行えることを実感してもらえるのではないでしょうか。

特定のフレームを選択 キーボードの Ctrl キー(Windows)または Command キー(Macintosh)を押しながら、トゥイーンスパン内の特定フレームをマウスでクリックして選択
コンテキストメニューから「モーションを分割」をクリック コンテキストメニューから、Flash CS4 から追加された新しい項目「モーションを分割」をクリック
トゥイーンスパンが2つに分割 現在のフレーム位置にキーフレームが作成され、トゥイーンアニメーションが2つに分割される
別レイヤーにアニメーションを保持したままドラッグ&ドロップで移動可能 後側のトゥイーンアニメーションを別レイヤーへドラッグ。アニメーションが壊れることはない。

 

特定のフレームを選択する場合は、キーボードの Ctrl キー(Windows)または Command キー(Macintosh)を押しながらフレームをマウスでクリックします。プロパティキーフレームに存在するオブジェクトのプロパティを操作する場合や、特定のフレームを編集する場合、静止フレームシーケンスの長さを変更する場合など、この操作を行う場面は沢山出てきます。

また、トゥイーンスパンの伸縮を行うと Flash はプロパティキーフレームの位置を相対的に移動させますが、時にはプロパティキーフレームの位置を保持したまま伸縮させたい場合もあるかと思います。そのような時は、キーボードの Shift キーを押しながらトゥイーンスパンの左端または右端のいずれかをマウスでドラッグします。

キーボードのShiftキーを押しながらマウスで伸縮 キーボードのShiftキーを押しながらマウスでモーションスパンを伸縮させると、現在のプロパティキーフレームのフレーム位置を保持したままトゥイーンスパンは伸縮
プロパティキーフレームの位置は変わらない

 

さて、ここまで新しくなった Flash CS4 のモーショントゥイーンをご紹介してきましたが、使い慣れたこれまでの Flash のトゥイーンも利用したいというご要望もあるかと思います。そのような方はクラシックトゥイーンをご利用下さい。また、アニメーションの途中でシンボルをスワップさせたり、グラフィックシンボルのフレーム数を設定したりするような手法には、クラシックトゥイーンをご利用頂く必要があります。どちらのトゥイーンにもそれぞれのメリットがありますが、そのどちらも利用することができるのが Flash CS4 の強みです。

クラシックトゥイーン
これまでのクラシックトゥイーン(上側)とモーショントゥイーン

モーションプリセットで効率的なアニメーション作成

これまで Flash では、トゥイーンアニメーションを ActionScript として書き出して利用するほか、アニメーションを共有する術がありませんでした。しかし Flash CS4 では、作成したトゥイーンアニメーションをモーションプリセットとして「保存」、「書き出し」、そして「読み込み」が出来るようになりました。また、その適用もステージ上のオブジェクトを選択して、モーションプリセットパネルの「適用」ボタンを押すだけという、驚くほど容易な操作で行えるようになりました。

モーションプリセットとして保存
作成したモーショントゥイーンは、「モーションプリセットとして保存」

これによって、作成したトゥイーンアニメーションの再利用や、他のユーザーとの共同作業が容易になるなど、その効果は測り知れません。トゥイーンアニメーションライブラリといった新たな広がりも期待できるのではないかと思います。

モーションプリセットパネル
「モーションプリセットパネル」のメニュー。
製品付属のプリセットがあらかじめ用意されているので、それを使うことも可能

GUI を使った3D表現で深みのあるアニメーションに

Flash CS4 では、ムービークリップのプロパティに Z 軸を割り当てることで 3D 表現を可能にしています。これを Flash のツールとして実現したのが 3D 変換ツールと 3D 回転ツールです。

3D変換ツールと3D回転ツール
オブジェクトの 3D 移動と回転を司る「3D 変換ツール」 と「 3D 回転ツール」

3D 用語で「変換」とは、3D スペースにおけるオブジェクトの移動を表しています。オブジェクトの遠近を表現する場合、3D 変換ツールでそのオブジェクトを選択し、奥行きを表す Z 軸の値を変化させます。そして 3D 回転ツールは、文字通り XYZ の3つの回転軸を基準にオブジェクトを回転させます。内側の青線上にある各回転軸をそれぞれ選択してマウスでドラッグするか、自由回転コントロール(外側のオレンジ色の線)をマウスでドラッグして 3D 表現を加えます。

3D変換ツールと3D回転ツール、それぞれで追い分じぇくとを選択した場合の画面の違い
3D 変換ツール選択時のコントロール(左)と
3D 回転ツール選択時のコントロール(右)

この2つのツールを使って作成した 3D 効果は、ステージ上のカメラを基準に描画されます。このカメラを定義するのが「遠近の角度」と「消失点」です。「遠近の角度」は、ズームレンズの画角の変化に似ていて、角度の値を大きくするとより近くで表示されているように描画されます。「消失点」は、オブジェクトの Z 軸の向きを定義するステージ上の座標で、Z 軸はこの消失点に向かって遠ざかります。いずれも 3D 効果が適用されたムービークリップを選択し、プロパティインスペクタで値を変更して操作します。

消失点の変更
消失点の値をマウスドラッグで変更すると、ステージ上に消失点が表示される

IK でキャラクターアニメーションに新しい息吹を

これまで Flash でキャラクターアニメーションを作成する場合、フレーム間と各パーツの動きに破綻がないよう注意を払い、少しずつ動きを付けていく手法が一般的だったのではないでしょうか。人間のような多関節のキャラクターを描くためには、膨大な作業と労力、そしてテクニックを要したのではないかと思います。Flash CS4 では新たにインバースキネマティック(IK)機能が搭載され、あたかも骨格を持ったかのような自然なキャラクターアニメーションを、簡単に作成することができるようになりました。

Flash CS4 の IK アニメーションは、2種類用意されています。1つ目は、シンボル間にボーンと呼ばれる骨格情報を埋め込み、親子関係を持ったボーン(アーマチュア)同士が連動するアニメーションです。ムービークリップ同士を連動させるようなアニメーションはこちらを使用します。2つ目は、シェイプオブジェクトに直接アーマチュアを埋め込むアニメーションです。これは、蛇のようにボーンの動きに合わせて形状そのものが変化するようなアニメーションに適しています。

ポーズレイヤー
ボーンを埋め込むとそのオブジェクトはポーズレイヤーに移動

アーマチュアを設定すると、Flash はこのアーマチュアのアニメーション用の「ポーズレイヤー」を自動的に作成します。あとは通常のトゥイーンアニメーションと同じように、ポーズレイヤー上にキーフレーム(一般的なキーフレームと区別して「ポーズ」と呼びます)を設定することで、Flash 側がそのフレームの間を計算し、トゥイーンアニメーションを行います。

IKボーンのプロパティ
ボーンの可動角度をプロパティインスペクタで設定。
値を変更するとリアルタイムにその可動域が描画される(円内)

プロパティインスペクタで「実行時」に変更

IKアーマチュアのオプション設定で
「種類」を「実行時」に変更

Flash CS4 のさらに驚くべき点は、作成したポーズのアニメーションをムービーとして見せるだけではなく、マウスでリアルタイムに操作可能な IK アニメーションを作成することができることです。これには、一切のコーディング作業や複雑な設定は必要ありません。ポーズレイヤーのアニメーションスパンを選択した状態で、プロパティインスペクタに表示される IK アーマチュアの「オプション」にある「種類」の設定を「実行時」にするだけです。これによって、パブリッシュされたムービー上でアーマチュアをマウス操作できるようになります。

これによって作成した Flash ムービーが以下です。マウスで腕の部分をドラッグしてみて下さい。

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得

旧バージョンとの互換性

Flash CS4のパブリッシュ設定

パブリッシュ設定のPlayer選択画面。
モバイル用のFlash Lite や、Adobe AIR にも対応。

Flash CS4 ではこれまでと同様に、[ファイル]-[名前を付けて保存] で表示されるダイアログの「ファイルの種類」から「Flash CS3 ドキュメント」を選択することで、Flash CS3 形式でファイルを保存することができます。ここでコンテンツが失われるという警告メッセージが表示された場合、そのまま実行すると Flash CS4 のみで機能する内容は削除されてしまう可能性があります。もし 3D や IK を使ったようなアニメーションを Flash CS3 形式で保存する必要がある場合は、あらかじめフレームアニメーションに変換するなどして対処します。

なお、旧バージョンで作成したトゥイーンアニメーションは、Flash CS4 ではすべてクラシックトゥイーンとして扱われます。これまで作成したコンテンツはクラシックトゥイーンでそのまま使用し、さらに Flash CS4 の新機能を使ったコンテンツを追加することも可能です。

また、Flash CS4 は、すべてのバージョンの Flash Player に対応したムービーのパブリッシュを行うことが可能です。もしそのバージョンに対応していない機能がファイル内に存在した場合、Flash はその都度パブリッシュ時に警告表示を行います。Flash CS4 の新しいモーショントゥイーンを使ったアニメーションでも、機能的に問題なければ、10年前にリリースされた Flash Player 1 用のコンテンツを直接パブリッシュしてくれます。Flash Player のバージョンが制限されているようなコンテンツを作成する場合でも、臆することなく Flash CS4 をご利用下さい。

Flex とのコラボレーションでさらなる可能性を

Flash CS4 はこれまでと同様、Adobe サイトで無償提供されている Flex Component Kit をインストールすることで、Flex で使用可能なコンポーネントファイルを作成することができます。

この機能に加え、Flash CS4 では、Flex SDK に含まれる最新のライブラリを直接使用することができるようになりました。これによって、Flex メタデータや Flex コンポーネントを Flash CS4 で使用することができます。Flex SDK は日々更新され、その最新版は自由にダウンロードできるようになっています。これまでは Flex でしか使用することの出来なかった最新ライブラリを、是非 Flash CS4 でもお試し頂ければと思います。

ActionScriptの詳細設定でFlex SDKのライブラリパスを指定
パブリッシュ設定の「ActionScript 3.0 の詳細設定」で
Flex SDK に含まれる swc ファイルを選択

package {
	import flash.display.*;
	public class GIFEmbed extends Sprite {

		[Embed("test.gif")]
		private var theClass:Class;

		public function GIFEmbed() {

			var displayObj:DisplayObject = new theClass();
			addChild(displayObj);

		}
	}
}

Flex メタデータによる GIF 画像埋め込みクラスの例

CS4 で新たなステージへ

Flash CS4 の新機能に絞ってここまでご紹介してきましたが、まだそのすべてをお伝えするには至っていません。より詳しい内容やその他の新機能につきましては、Flash の製品情報や機能ツアーをご参照下さい。Adobe と Macromedia が真の意味で手を携え、長い開発期間を経て生み出したのがこの Flash CS4 です。是非実際に無償体験版をダウンロードし、その新機能の数々に直接触れてみて下さい。これまでの Flash からは想像もつかないような新機能で溢れていることがお分かり頂けるのではないかと思います。また、今後予定されている新製品セミナーにも是非ご参加頂ければと思います。皆さんの手で、また新しい Flash の世界を創造して下さい。

関連情報