Chris Georgenes

Team Macromediaのメンバー
www.mudbubble.com*
www.keyframer.com*

Macromedia Flash は、ベクターベースのアニメーション制作用ツールとして多くのアニメータに使用されています。幅広いワークフローや制作プロセスに対応できることが Flash の強みの 1 つです。筆者は、いろいろな動く部品を作成して操ることにより複雑なアニメーションキャラクターを表示する、独自のテクニックをいくつか開発してきました。この記事では、鉛筆描きのスケッチから 1 つのキャラクターを起こし、本格的な動きをつけた Flash のアニメーションにするまでの作業をとおして、筆者のとっておきの秘技をいくつか紹介していきます。

必要条件

このチュートリアルをすべて実行するには、次のソフトウェアおよびファイルがインストールされている必要があります。

Macromedia Flash Professional 8

• トライアル
• 購入

チュートリアルおよびサンプルファイル :

• mudbubble_boy.zip (ZIP、106 KB)

前提知識

特になし。初級者および Flash 経験者の両方が対象読者であり、スキルの程度は問いません。

Flash での描画

Macromedia Flash には、キャラクターなどをきれいに描ける描画ツールがあります。各種の描画ツールにはそれぞれ特徴があり、使い分けていろいろな画風を出すことができます。また、ファイルサイズが大きくなるツールもあれば、小さいファイルを作成できるツールもあります。使い込むにつれて、作風やファイルサイズ要件に応じた最適なツールの選び方がわかってくるでしょう。ファイルサイズとダウンロード時間や再生パフォーマンスの間には単純なトレードオフの関係があります。このセクションでは、Flash 描画ツールのそれぞれについて長所と短所を見ていくことにします。

ブラシツール

ブラシツール (図 1) はおそらく最も使い道が広いツールであり、特に筆圧感知タブレットと組み合わせたときに有用です。

図 1. ブラシツール

ブラシツールで描画することは、シェイプを使って描画するのと同じことです。筆圧と傾きを入力できる方法で使うのが最も自然だと感じられるツールです。ワコム*製のタブレットは有名で、さまざまなサイズの製品があり、Flash での使用にも適しています。同社のタブレットには、コードレスでバッテリー不要の "スタイラス" と呼ばれるペンが付属しています。ワコムのタブレットは既存のマウスと併用することも、完全にマウスの代替として使用することもでき、Flash だけに限らず非常に幅広い使い方ができます。デジタルデザイナーの多くは、タブレットとあわせて、Adobe Photoshop、Adobe Illustrator、および Macromedia FreeHand などいくつかのグラフィックエディタやアニメーション作成プログラムを使用しています。とはいえ、タブレットを持っていなくてもブラシツールは使えるので心配する必要はありません。傾きと筆圧の感知機能は使えませんが、それを除けば特に問題ありません。

ご使用のコンピュータに筆圧感知タブレットが接続されている場合は、ブラシツールを選択すると、このツールに属する設定項目として、描線の品質に影響する 2 つのオプションが表示されます。ツールボックスの最下部にある筆圧と傾きのオプションがそれです (図 2)。これらの一方または両方を選択することにより、Flash のブラシツールを使って得られる結果がさまざまに変化します。

図 2. 筆圧と傾きのオプション

図 3 は、ブラシツールで描画した結果を示しています。左側の筆跡はシェイプになっており、そのため周囲にベクターポイントが表示されています。オブジェクトに含まれるポイントが多くなるほど、ファイルサイズは大きくなります。この左側のシェイプは筆圧感知タブレットで描いたものなので、筆跡にかかった筆圧の変化に応じて、線端が細くなったり、太さが変わったりしています。右側も同じブラシツールを使用した筆跡ですが、こちらは筆圧感知の設定をオフにして描いたものです。

図 3. 筆圧感知の設定をオン (左) およびオフ (右) にして描画したシェイプ

ブラシツールには、描画結果に特定の効果を与える次のようなオプションがあります (図 4)。

• 標準 : 同じレイヤー上にある線や塗りをペイントで上書きします。
• 塗りをペイント : 塗りのカラーの内側、および (ステージ上にある) シェイプの外側をペイントします。
• 背面をペイント : 既存の塗りや線の背面をペイントします。
• 選択範囲をペイント : 選択した塗りの内側だけをペイントします。
• 内側をペイント : 塗りの内側からペイントを開始した場合、線の外側にはみ出さないようにします。

図 4. ブラシツール効果

オブジェクトの描画

[オブジェクトの描画] は Flash 8 の新機能です。個々のシェイプを独立したオブジェクトとして描画し、相互に干渉しないようにすることができます。これまで、あるシェイプが別のシェイプによって切り取られてしまうのを避けるために、個々のシェイプを独立したレイヤー上に描画する必要がある場合がありましたが、Flash 8 では、描画ツール (ブラシ、鉛筆、ペン、楕円、矩形) の [オプション] の下にある [オブジェクトの描画] (図 5) をオン / オフにすることで、このような心配をせずに描画ができるようになりました。Macromedia FreeHand や Adobe Illustrator を使い慣れたユーザーにもわかりやすい、便利な新機能です。

図 5. オプションの [オブジェクトの描画] ボタン

既存のシェイプに重ねて新しいシェイプを描画すると、[オブジェクトの描画] をオンにしていない場合、図 6 のように 2 つのシェイプが結合し、一方が切り取られます。これは結合描画モードと呼ばれ、シェイプから別のシェイプを切り取って新しい形を作る場合に便利です。

図 6. 結合描画モード

オブジェクトの描画モードでシェイプを描画すると、自動的に描画オブジェクトになり、他のシェイプとは結合しません。描画オブジェクト同士の重ね合わせは、切り取りが発生する心配をせずに実行できます (図 7)。これは、オブジェクトの配置を調整したい場合や、単に個々のシェイプを分けて扱いたい場合に便利です。

図 7. オブジェクト描画モード

図 8 は私のトレードマークである少年のキャラクターですが、これはすべてマウスだけで、矩形ツールと楕円ツールを使って作成したものです。ワコムのタブレットとブラシツールを組み合わせて使う必要はありませんでした。もちろんブラシツールを使ってもよかったのですが、シェイプツールを使ったことにより、この作品の制作の意図に合う非常にすっきりした描線が出ています。ブラシツールでは、ともすると不要なポイントが多数できてしまい、ファイルサイズが大きくなるばかりか、後でシェイプを編集しようとすると大変な思いをすることがあります。この少年のグラフィックの場合は、形をシンプルにし、ファイルサイズをできるだけ小さくするように心掛けました。

図 8. シェイプツールで作成したキャラクター

鉛筆ツール

鉛筆ツール (図 9) は、一定の幅の線を使ってイメージ全体を描きたい場合や、できる限りファイルサイズを小さくしたい場合に最適のツールです。

図 9. 鉛筆ツール

鉛筆ツールで線を描画すると、含まれるベクターポイントの数が少なくなります。完全な直線では、両端に 1 つずつ、合計 2 つのポイントしか含まれません。曲線に含まれるポイントは 3 つ以上で、曲がる回数に応じてポイント数は異なります (図 10)。

図 10. 鉛筆ツールで描画した線

鉛筆ツールにも、描線の品質に関して次のモードがあります (図 11)。

• まっすぐに : フリーハンドでまっすぐな線を引きたい場合にたいへん便利です。たとえ手が震えていても、線を描き終えると自動的に直線になります。
• スムーズ : 意図した基本の形を維持しつつ、描線を自動的にスムーズにします。
• インク : 描線の品質を調整しません。フリーハンドやルーズな作風を出す場合に便利です。

図 11. 鉛筆ツールの品質モード

シェイプツール

シェイプツール (楕円ツールと矩形ツール) は、基本的な図形の塗りと線を作成します (図 12)。Shift キーを押しながらシェイプツールを使うと、真円や正方形を描くことができます。

図 12. シェイプツール : 楕円と矩形

塗りと線のカラーは、プロパティインスペクタで選択できます (図 13)。いずれかの色見本をクリックすると、カラーパネルが開き、線またはカラーの選択肢を編集できます。

図 13. 矩形ツールのプロパティインスペクタ

赤い斜線の付いた四角形を選択すれば、カラーなしの線または塗りを指定することもできます (図 14)。

図 14. この四角形を選択するとカラーなしで描画できます

ペンツール

直線または滑らかな流れる曲線を使って正確なパスを描くには、ペンツールを使用します (図 15)。直線または曲線のセグメントを作成し、直線のセグメントの角度や長さ、および曲線のセグメントの傾きを調整できます。

図 15. ペンツール

ペンツールでは、クリックすると直線のセグメント上のポイントを作成でき、クリックしてドラッグすると曲線のセグメント上のポイントを作成できます。線上のポイントを調整すると、直線および曲線のセグメントを調整できます。曲線を直線に、または直線を曲線に変換することもできます。

曲線を引いていくと、アンカーポイントごとにコントロールハンドルが作成されるのがわかります。後で線を編集する際には、ダイレクト選択ツール (白い矢印) を使ってアンカーを選択し、このコントロールハンドルをドラッグします (図 16)。特定のアンカーポイントに対応するハンドルを動かすと、その場所で曲線の形が変わります。

図 16. ペンツールで描画した線のセグメントを、ダイレクト編集ツールで編集

オニオンスキンツール

オニオンスキンツールは、[タイムライン] パネルの下部にあります (図 17)。

図 17. オニオンスキンツール

オニオンスキンツールを選択すると、タイムライン上の再生ヘッド位置インジケータにオニオンスキンマーカーが追加されます (図 18)。それらのマーカーをドラッグすると、現在のフレームの前後にある対象フレームの数を拡大できます。

図 18. オニオンスキン効果

Flash のオニオンスキンには 2 つの種類があります。

• 標準のオニオンスキン : 現在のフレームがフルカラーで表示され、その前後のフレームは現在のフレームから離れるほど淡く表示されます。これにより、一連の絵を半透明の紙に描いて積み重ねたような表示になります (図 18)。
• アウトラインモードのオニオンスキン : 現在のフレームがフルカラーで表示され、その前後のフレームはアウトライン表示されます (図 19)。現在のフレームの前後にある異なるキーフレームをいくつも表示する場合は、こちらのほうが見やすくなります。

図 19. アウトラインモードのオニオンスキン

シンボルの操作

シンボルは、Flash を Flash たらしめている最も重要な要素であるといえます。描画したものや読み込んだものは何でも、すべてシンボルに変換でき、また、そうするのが望ましい使い方です。これはなぜなのか、説明しましょう。オブジェクトはシンボルに変換すると、自動的にその Flash ドキュメントのライブラリに属するアイテムとなります。どの Flash ドキュメント内にも必ずそれ自身のライブラリがあり、そこからシンボルをステージ上にドラッグできます。すると、ステージ上に今度は "インスタンス" と呼ばれるオブジェクトが配置されます。インスタンスがステージ上にどれだけ多く存在しても、Flash はそれらを 1 つのシンボルについて 1 回だけロードすれば済みます。このことによって、Flash では小さいファイルサイズでのストリーミングアニメーションを実現しています。シンボルをできるだけ多く再利用することで、効率性は目覚ましく高まります。インスタンスには各種のエフェクト (伸縮、着色、アルファ、明度など) を適用することも、また、モーショントゥイーンに複数のエフェクトを組み合わせて適用することもできます。

この話を先へ進める前に、シンボルとその動作について基本的な事項を説明しておきましょう。

まず、何かオブジェクトを作成してください。簡単なシェイプ 1 つで十分です。それを選択し (Ctrl+A)、次に [修正]-[シンボルに変換] を選択するか F8 キーを押して、シンボルに変換します。すると、[シンボルに変換] ダイアログボックスが開きます (図 20)。

図 20. [シンボルに変換] ダイアログボックス

[シンボルに変換] ダイアログボックスで、シンボルの名前を入力し、3 種類の動作のいずれかを選択し、さらに、このオブジェクトの基準点を決定します。3 種類の動作とそれぞれの意味は次のとおりです。

• ムービークリップ : ムービークリップはダイナミック、つまり、Flash のプログラミング言語である ActionScript を使った操作の対象とすることができます。ムービークリップにはレイヤーとフレームをいくつでも含めることができ、また、それ自体に固有の、他から独立したタイムラインがあります。たとえば、太陽系の中でいえば、個々の惑星はそれぞれ独立に太陽の周りを周回し続けています。そうした惑星の 1 つ 1 つがムービークリップのようなものであり、その場合、メインタイムラインは太陽に属していることになります。
• ボタン : ボタンには、オーバー状態、アップ状態、ダウン状態、ヒット状態の 4 つの状態があります。ボタンシンボルでは、これらの状態をそれぞれキーフレームとして表します。必要に応じて各状態にグラフィックを配置し、ボタンのインスタンスに ActionScript を適用することで、Flash ムービーにインタラクティブ性を持たせることができます。
• グラフィック : グラフィックシンボルはムービークリップに非常によく似ていますが、ダイナミックではなく、ActionScript による操作の対象とならない点が異なります。ただし、ムービークリップシンボルの中にグラフィックシンボルを配置することはできます。グラフィックシンボルにはレイヤーとフレームをいくつでも含めることができ、また、常にメインタイムラインおよび他のグラフィックシンボルと同期して動作するという最も重要な特徴があります。このことは、タイムベースのアニメーションを作成する際に非常に役立ちます。

このアニメーションチュートリアルでは、グラフィック動作を選択することをお勧めします。そうすると、Flash オーサリング環境内でタイムラインを "スクラブ" してアニメーションの再生を確認できるからです。"スクラブ" とは、再生ヘッドを手で前後に動かしてタイムラインのコンテンツを再生する操作のことです。ムービークリップシンボルの場合、フレーム 1 以外のコンテンツを再生するためには、作成した Flash ムービーをプレビュー (Ctrl+Enter) するか、SWF ファイルとしてムービーを書き出す必要があります。

スケッチを基にしたキャラクター作成

よいデザインはたいていの場合、紙と鉛筆を使った昔ながらのスケッチから始まります。筆者の経験でも、長くて退屈なマネージャ研修の時間に最高のアイデアが出ることはよくあるし、紙ナプキンに描いた落書きがヒントになって凄いキャラクターを思いつくこともあります。ひらめきは、どこで、どんなときにやってくるかわかりません。いつも鉛筆を 1 本お尻のポケットや耳の上に準備しておくのは大切です。

既に説明した Flash のいろいろなツールを使ってスケッチすることもできますが、紙に描いたスケッチを基にして Flash のキャラクターを作りたい場合は、スキャナでそのスケッチをスキャンして、グラフィックファイルに保存する必要があります。たいていのスキャナには、この作業を簡単に実行できるソフトウェアが付属しています。Flash への読み込みが可能な、一般的に使われているグラフィック形式としては、PNG、GIF、JPEG、TGA、TIFF などがあります。

スケッチを Flash に読み込んだ後は、それをどうやって個別の部品に分解するかを考える必要があります。ここが大変なところで、非常に概念的な作業であり、最終的には、作りたいアニメーションの作風やキャラクターの雰囲気に応じて考えるしかありません。

"形は機能に従う" という哲学がフォルクスワーゲンにはあるそうですが、これはキャラクターをデザインする上でも重要な考え方です。キャラクターがどのように動くのかをビジュアルに考えることは必要不可欠です。それが全体的なデザインの方向性を決めることになるからです。

図 21 は、スケッチの一例と、そこから起こした Flash のキャラクターの完成品です。このキャラクターは楕円ツールと矩形ツールだけを使って描かれています。元のスケッチを参考にして Flash の描画ツールでトレースしつつ、イメージの完成度を上げるために微妙な変更や調整を加えていることがわかります。

図 21. スケッチから Flash へ -- 筆者のトレードマーク

スケッチの隣に空のキーフレームを作成すると (F7 キー)、オニオンスキン機能をオンにし、スケッチを透かして見ることができるようになります。オニオンスキンで表示されたスケッチを下書きに、お好きな描画ツールを使って描画してください。筆者は今回、図 22 のように楕円ツールを使って少年の顔を描きました。体の部品やいろいろな飾りを作るときは、全体の姿がどうなるかを想像しながら描いてください。そのキャラクターが 3 次元空間に存在する立体的なものとして考えながら、ビジュアルを思い浮かべる必要があります。実際には 2 次元のデザインを制作するわけですが、3D アーティストと同じように考えることで、いろいろな部品同士の繋がりかたをビジュアルに理解できるようになります。

図 22. 楕円のシェイプで作ったキャラクターの顔

キャラクターを描画し終えたら、それをコピーして新しいレイヤーにペーストします。筆者の場合は、シンボルへの変換をいつもこの時点で実行します。また、ここで各種レイヤーに名前を付けることもできます。

シンボルをレイヤーに配置することによる時間の節約

筆者は、オブジェクトを必ずシンボルに変換し、短くて意味のわかりやすい名前を一定の規則に従って付けるようにしています。たとえば、head1、eye1、mouth_wide などといった名前を付けます。ただしレイヤーの名前はまだ付けません。これについては、もっと簡単で手早くできる方法があるからです。すべてのシンボルを作成して適切な名前を付けたら、それらをすべて選択し (Ctrl+A)、コピーします (Ctrl+C)。次に、新しいレイヤーを作成し、シンボルを同じ位置にペーストします (Ctrl+Alt+V)。すると、個々のシンボルがそれぞれ独立したままで、すべて同じ 1 つのレイヤー上に配置されます。これ以外のレイヤーをすべて削除し、キャラクターのシンボルをすべて含んだ 1 つのレイヤーだけが残るようにしてください。

この次の手順が、一番の見どころです。もう一度すべてのシンボルを選択してから、キャラクター上を右クリックし、[レイヤーに配分] を選択してください (図 23)。

図 23. すべてのシンボルを選択してから、キャラクター上で右クリックし、[レイヤーに配分] を選択します

なんと、個々のシンボルをそれぞれ専用のレイヤーに配置するばかりでなく、各シンボル名に応じてレイヤーの名前まで自動的に付けてくれます。これは非常に便利です。

上手なドキュメント管理による時間の節約

図 24 は、筆者のキャラクターをデザインしてシンボルに変換し、アニメーション化する用意ができた段階のタイムラインの例です。レイヤーの名前を編集する場合は、そのレイヤー名をダブルクリックし、新しい名前を入力します。レイヤーに含まれるオブジェクトの種類に応じて各レイヤーにわかりやすい名前を付けることは、タイムラインとファイルの管理の観点から望ましいことです。特に、アーティストが複数いる場合や、チーム環境で作業する場合などでは非常に重要な意味があります。

図 24. 筆者のトレードマークキャラクターを構成する部品とシンボルを配置したタイムライン

Flash MX (バージョン 6) 以降では、必要に応じてレイヤーフォルダを作成できるようになりました。レイヤーフォルダとは、フォルダのように他のレイヤーを保持できる新しいレイヤーです。表示を展開したり畳んだりすることができ、いくつものキャラクターがあって多数のレイヤーを扱う場合には非常に便利です。個々のキャラクターについてレイヤーフォルダを作成し、すべてのレイヤーをフォルダの下に配置すると、現在実行している作業の対象キャラクター以外はすべて閉じておくことができます (図 25)。これによってタイムラインを延々とスクロールする手間が省け、作業時間を大幅に節約できます。

図 25. レイヤーフォルダによる時間の節約

Flash ドキュメント内を整理するには、ライブラリ内をうまく編成するという方法もあります。前述のとおり、シンボルを作成するか、何らかのオブジェクトをシンボルに変換すると、オブジェクトはそのムービーのライブラリに属するものとして自動的に登録されます。[ライブラリ] を開くには、[ウィンドウ]-[ライブラリ] を選択するか、Ctrl+L を押します。ライブラリ (図 26) には、その中に含まれる個々のシンボルについて、各種の情報やオプションが表示されます。シンボル名をクリックして選択すると、ライブラリのプレビューウィンドウにサムネールが表示されます。

図 26. 筆者のトレードマークキャラクターのライブラリ

また、アニメーションを含んだシンボルの場合は、プレビューウィンドウの右上隅に [再生] ボタンと [停止] ボタンが表示され、プレビューウィンドウ内でアニメーションをプレビューできます。

ライブラリの右上隅には、いくつかのオプションを含んだポップアップメニューがあり (図 27)、新規のシンボル、フォルダ、フォント、またはビデオを作成できます。また、既存のシンボルに対しては、名前の変更、フォルダへの移動、複製、削除、およびプロパティの編集と表示ができます。

図 27. ライブラリ管理オプション

"2.5D" アニメーションのテクニック

Flash ではトゥイーン処理が簡単にできるからといって、それに頼ってばかりいては魅力的なアニメーションを作れません。もちろん、トゥイーンは非常に短い時間で相応の効果をあげることができる便利な機能ですが、ステージ上で単純なオブジェクトを移動させるという以上のことはできません。

しかし、そのトゥイーンを応用して、キャラクターにリアル感を与えることができるとしたらどうでしょうか。トゥイーンの手軽さを、他の Flash ユーザーがあまり考えつかなかったところに利用してみましょう。トゥイーンに関することはもう何でも頭に入っているという方も、知識の最初の 1 合目までいったん引き返して脇道に入り、その先に何があるか見に行ってみましょう。

このレッスンでは、本格的な 3D エフェクトのようにそれらしく見える、大きな威力を持った Flash アニメーションテクニックを公開します。このテクニックのよいところは、作業を Flash 環境の中だけで完結できることです。2D の世界から出る必要はありません。ここは次元のはざまなので、2D がなぜか 3D に見えるという不思議な現象が起きるのです。

それでは、皆さんを 2.5D アニメーションの世界へご案内しましょう。

"2.5D アニメーション" なんて初耳だと言われても無理はありません、筆者の造語ですから。このテクニックを筆者が発明したなどと主張する気は特にありませんが、"2 次元と半分" という呼び方は筆者が考えました。

図 28 は、筆者の Web サイト (www.mudbubble.com*) で使っているロゴキャラクターです。

図 28. かわいいでしょう?

図 29 は、個々のシンボルをそれぞれ別のレイヤーに配置した状態です。キャラクターの各部分がどのように分かれているかが見えるように、アウトライン機能をオンにしてあります。モーショントゥイーンでは 1 つのレイヤー上に 1 つのシンボルしか配置できないので、このようにしてあることには重要な意味があります。1 つのモーショントゥイーン内で同じレイヤーに 2 つの異なるシンボルを配置しようとすると、トゥイーンは正常に動作しません。

図 29. 各シンボルはそれぞれ専用のレイヤーに配置されています

各レイヤーには名前も付けてあります。これは必須ではありませんが、いずれタイムラインが大きくなれば、スクロールして探す機会が多くなるので、レイヤー名を付けておくと便利です。また、チーム環境で作業する場合には、ファイルを他のメンバーと共有するためにも重要なことです。整理しすぎて困ることもありません。

タイムラインの用意ができたら、次はキャラクターにモーショントゥイーンを適用する作業にかかります。ここではキャラクターの頭部を構成するシンボルだけをアニメーション化するので、それ以外のレイヤーをすべてロックし、間違えて無用の変更を加えることがないようにしてあります。

頭部の回転 (1)

まず、頭部の回転を開始および終了させる時点にキーフレームを作成します。上端のレイヤーをクリックして下端のレイヤーまで下へドラッグし、キーフレームに変換します (F6 キー)。これを 2 回実行してください。2 つのキーフレームの間には 15 ～ 20 フレーム程度の間隔を確保しておきます。例では、フレーム 15 および 30 をキーフレームにしました (図 30)。

図 30. モーショントゥイーンを適用する準備

頭部の動きが終了するフレームに再生ヘッドを合わせた状態で、自由変形ツールを使い、ステージ上の個々のシンボルを編集します。

筆者の手順にならって操作してみてください。まず、片方の目から取り掛かることにします。2 つの目は球状の物体 (頭部) の表面に付いていることを意識してください。これが本物の 3D オブジェクトだとすれば、手前にあるほうの目が大きく見えるはずです。また、目は卵形ではないので、幅を広くします。筆者のキャラクターの場合、目は 3 つのシンボルで構成されているので、3 つを同時に操作するために Shift キーを押しながらすべて選択し (図 31)、自由変形ツールを使って伸縮させます。完璧な形にならなくても、いつでも後から微調整できるので問題ありません。実際の効果はモーショントゥイーンを適用してみるまでわからないのですから、今は目をつぶって作業しているようなものです。

図 31. 目のシンボルを選択

次は鼻の部分です。キャラクターがこちらに振り向くとき、近づいてくる部分はすべて右から左へと移動します。本当の 3D オブジェクトならば、鼻は頭部からまっすぐに張り出しているはずですが、動きがよくわかるように、右から左へと動かすのに合わせて少しずつ下に向けることにします (図 32)。近づいてくるのを表すために少しずつ拡大するのも忘れないでください。

図 32. 鼻の修正

その次は、反対側の目を動かし、サイズを大きくし、さらに楕円の幅を広くして円形に近づけます。また、両方の眉毛についても、移動させ、わずかに回転させ、サイズを拡大します (図 33)。

図 33. 反対側の目の修正

ここで、いま編集したそれぞれのレイヤーにモーショントゥイーンを適用します。編集の結果を見て、さらに調整を加える必要があるかどうか確認してみましょう。

うまく行かなくても、何も問題はありません。この効果が思ったとおりに表示されるまでには、必ずといってよいほど数多くの手直しが必要になるからです。図 34 は、キャラクターが振り向いた顔の現時点の状態を示しています。

図 34. キャラクターの頭部を回転

このアニメーション効果の完成版を参照するには、"mudbubble_boy.swf" ファイルを開いてください (図 35)。

図 35. 完成した振り向く頭部のアニメーション

まだ最初の段階ですが、案外よくできたのではないでしょうか。このように、自由変形ツールで単純な編集操作を少し加えるだけで、エフェクトを実際に動かすことができます。完璧ではありませんが、この時点で完璧である必要もありません。納得のいくエフェクトができるまで、各部品の伸縮の度合や配置、傾斜の付け方などを何度でも手直しすればよいでのす。

頭部の回転 (2)

振り向く動作をさらに効果的に見せるために、頭部に付いている他の部分も編集することにします。

肝心なのは、平面的な 2D オブジェクトにまるで厚みや質量があるかのように、見る人を錯覚させることです。また、アニメーションの中に空間の奥行きがあるかのような錯覚を起こさせることも必要です。それには、頭の中の空間でいろいろな 3D オブジェクトを使ってこのキャラクターを組み立てる必要があります。もし本当にキャラクターがが 3D 空間内にいて、実際にこちらに振り向いたとすれば、最初こちら側にあった部分は向こう側に回るはずです。たとえば、自転軸を中心として回転する地球の姿を思い浮かべてください。地球は基本的に左回りで回転しています。その場合、こちらの真正面に向いている場所が左から右へと移動する一方で、一番遠くにある真裏の場所は、反対に右から左へと移動していくことになります。これをキャラクターの頭部に当てはめてみましょう。

頭部のシンボル自体は単なる横長の楕円なので、実際に行う必要がある操作は、形を少し歪めることです。また、同時に少し右側に動かすことにします。これは、誰かの顔がこちら側に振り向くと、左目の向こう (向かって右) にある皮膚の部分がより多く見えるようになるからです。また、この頭部本体は顔の部品よりも遠くにあるので、回転すれば反対に何ピクセルか右に動くはずだからです。これらの動きは誇張しすぎてはいけません。このエフェクトは、数少ない大きな変化ではなく、数多くの微妙な動きによって最高の効果を発揮します。要素としての微妙なアニメーションがいくつも集まって、全体としての印象的なエフェクトが完成するのです。

次に、帽子のつばを右側に向かって回転させます (図 36)。先ほど説明したとおり、裏側にある部分は手前とは反対の向きに動くからです。

図 36. 帽子のつばを回転

この操作では矢印キーを使ってつばを右へと動かし、より首の後ろへと回り込む感じを出します。

帽子の本体も同じ理屈に従って操作し、形を歪めて狭くすると共に、数ピクセルだけ右に移動します (図 37)。

図 37. 帽子を調整

耳については少し形を歪め、場所を少し左上に移動します (図 38)。

図 38. 耳の形を歪める

髪の毛も忘れてはいけません。このキャラクターの髪は 3 つの独立したシンボルを使ってデザインしてあるので、各シンボルを別々に編集できます。頭部が振り向いたときの髪は、目のほうへ向けて形を歪め、さらに、見る人に対して正面から向き合う形に近くなるのを表すために短く描きました (図 39)。これは遠近感を錯覚させる手法ですが、場合によっては難しいこともあります。シンボルを歪めたり伸縮させたりする程度には制限があるからです。繰り返しますが、このエフェクトは控えめに、微妙な動きとして使うのが肝心です。できることの範囲内で、無駄なく見せるのが一番です。

図 39. 髪の形を歪める

後から編集を加えたレイヤーに、ここでモーショントゥイーンを追加します。これまでの手順を実行できたら、結果を再生してみてください。

格好よくなってきましたね。まるで本当に 3D オブジェクトが振り向いているように見えます。ところで、人間のキャラクターなら耳は 2 つあるものです。顔の向こうに反対側の耳が見えるようにするために、もう 1 つ新しいレイヤーを最背面に追加しましょう。手前にある耳をコピーして、新しいレイヤーの、モーショントゥイーンの途中にある空のキーフレーム (フレーム 22 のあたり) にペーストします。それから、[修正]-[変形]-[横反転] を選択して左右を反転します。

頭部の向こうから、向かって右側に半分だけ耳がのぞくように配置します。そのくらい見えるようにすれば十分でしょう (図 40)。

図 40. もう 1 つの耳を配置

図 41 のように、フレーム 30 (他のすべてのキーフレームがある位置) に 2 番目のキーフレームを追加します。

図 41. 2 番目のキーフレームを追加

この耳の最初のキーフレームに戻り、耳の場所を頭部の真裏あたりに配置し直します。このとき、他のレイヤーのいくつかをアウトラインにしておくと配置が見えるようになります (図 42)。

図 42. 裏側にある耳の配置を調整

では、これにモーショントゥイーンを適用しましょう。アニメーションを再生してみると、頭部が振り向くのに合わせて耳が見えてくるようになりました (図 43)。このちょっとしたディテールを加えるだけで、振り向く動作のリアルさが驚くほど増し、頭部に実際に丸みがあるかのような印象をいっそう強く与えることができます (再生には Flash Player 8 が必要です)。

図 43. 頭部が振り向く動作に従って耳が見えてくるアニメーション効果の完成

何か不自然に感じるところがあれば、タイムラインをスクラブして動きを確認しながら自由に調整を加えてください。どの程度の手間をかけるかは、人それぞれのこだわり方と、実際に作成するキャラクターの複雑さによります。この例の少年は、デザインに使っているオブジェクトの量からすると、かなり複雑なキャラクターだといえます。

[カスタムイーズイン / イーズアウト] パネル (Flash Professional 8 のみ)

仕上げとして、頭部の振り向き動作にもう少し手を加えることにします。ご存知のように、速度が一定のモーショントゥイーンではダイナミックな雰囲気を出しにくく、そのままでは動きがぎこちなく見えてしまうことがあります。そこで Flash Professional 8 の新機能 "イーズイン / イーズアウト" を加えれば、トランジションをソフトに見せることができます。これは、トゥイーンの中に動きが加速するところと減速するところを作る機能です。

最初の手順は、モーショントゥイーンを適用することです。これには次の 2 つの方法があります。

• 2 つのキーフレームの間にあるフレームを右クリックし、ポップアップメニューから [モーショントゥイーンを作成] を選択する。
• 選択ツールでクリックしてドラッグすることにより、すべてのレイヤーを選択して黒くハイライト表示させ、プロパティインスペクタの [トゥイーン] ドロップダウンメニューから [モーション] を選択する。

プロパティインスペクタには [編集] ボタンがあります (図 44)。

図 44. [編集] ボタンをクリックすると、[カスタムイーズイン / イーズアウト] パネルが開きます。

このボタンをクリックすると、[カスタムイーズイン / イーズアウト] パネルが開きます (図 45)。

図 45. 新しい [カスタムイーズイン / イーズアウト] パネル

新しい [カスタムイーズイン / イーズアウト] パネルでは、以前のバージョンよりも細かくイージングをコントロールできます。このパネルに表示されるグラフは、時間の経過に沿ったモーションの度合いを表しています。水平軸がフレームの進行、垂直軸がオブジェクトの変化の割合を示します。

グラフの曲線によって、オブジェクトの変化の度合いがコントロールされます。曲線が水平な (傾きがない) 区間では変化の速度がゼロになり、曲線が垂直になっている時点では、まったく途中経過を表示しない瞬間的な変化が発生します。

[すべてのプロパティに対して同じ設定を使用する] チェックボックスをオンにすると、現在の曲線がすべてのプロパティ (位置、回転、伸縮、カラー、フィルタ) に適用されます。オフにすると、次の各プロパティについて異なる曲線を適用できます。

• 位置 : ステージ上のアニメーションオブジェクトの位置に関するカスタムイージング設定を指定します。
• 回転 : アニメーションオブジェクトの回転に関するカスタムイージング設定を指定します。たとえば、ステージ上のアニメーションキャラクターがユーザーのほうに振り向く速さを微調整できます。
• 伸縮 : アニメーションオブジェクトの拡大・縮小に関するカスタムイージング設定を指定します。たとえば、オブジェクトの大きさを簡単にカスタマイズすることで、オブジェクトがいったん遠ざかってから近づき、また遠ざかる様子などを表現できます。
• カラー : アニメーションオブジェクトに適用されるカラーのトランジションに関するカスタムイージング設定を指定します。
• フィルタ : アニメーションオブジェクトに適用されるフィルタに関するカスタムイージング設定を指定します。たとえば、ドロップシャドウのイージング設定をコントロールすることで、光源の方向の変化をシミュレートできます。
• [再生] および [停止] ボタン : [カスタムイーズイン / イーズアウト] ダイアログボックスで定義した現在の速度曲線をすべて使って、ステージ上のアニメーションをプレビューします。
• [リセット] ボタン : 速度曲線をデフォルトの直線の状態にリセットします。

斜線をシングルクリックするとコントロールポイントが追加され、それらのコントロールポイントをドラッグして動かすことにより、オブジェクトのモーションを精密にコントロールできます。

フレームインジケータ (四角形のハンドル) を使って、オブジェクトの動きをイーズインする (加速させる) 位置やイーズアウトする (減速させる) 位置をクリックしてください。コントロールポイントのハンドル (四角形のハンドル) をクリックすると、そのコントロールポイントが選択され、左右いずれかの側に接点 (中空の円形) が表示されます。コントロールポイントと接点は、マウスまたはキーボードのキーを使って動かすことができます。

ヒント : デフォルトでは、コントロールポイントはグリッドに吸着します。一時的に吸着をオフにしたい場合は、X キーを押しながらコントロールポイントをドラッグします。

コントロールポイント以外の曲線上の位置をクリックすると、その位置に新しいコントロールポイントが追加されます。曲線上でもコントロールポイントでもない場所をクリックすると、コントロールポイントの選択状態が解除されます。

アニメーションが緩やかに始まって緩やかに終わるようにするには、図 46 のような曲線に調整してください。コントロールポイントをいろいろな位置に作成し、コントロールポイントと接点をさまざまな形に調整して、アニメーションの再生がどのように変化するか、ぜひ実際に試してみることをお勧めします。再生にはパネルの左下隅にある [停止] ボタンと [再生] ボタンを使用します。そうすれば、曲線の形とアニメーションの効果との関係を、すぐに感覚的に理解できるようになります。

図 46. 使用するイーズイン / イーズアウトの曲線

では、アニメーションを再生しましょう。頭部の動きがだんだんと速くなり、最後にはだんだんと遅くなることに注意してください。頭部が元の位置に戻るようなアニメーションにする場合は、フレーム 1 からフレームをコピーし、上で作成したトゥイーンの後にペーストするだけです。同じ手順を繰り返してモーショントゥイーンを追加し、イーズインやイーズアウトを適用することで、キャラクターが振り向いたり元の姿勢に戻ったりする複雑な動きを付けることができます。

フィルタの適用

不可能が可能になりました。Flash 8 でグラフィックフィルタとブレンドモードが新しく導入されたのです。Flash ユーザーのコミュニティは大歓迎しました。この機能によって、ドロップシャドウ、ぼかし、グロー、ベベル、グラデーショングロー、グラデーションベベル、カラー調整などのエフェクトを任意のムービークリップインスタンスに適用できるようになったからです。ここでは、キャラクターにドロップシャドウを適用してみましょう。

最初に必要となる操作は、キャラクターをムービークリップシンボル内に配置することです。タイムライン上をクリックしてドラッグし、すべてのレイヤーに含まれるすべてのフレームを選択してください (ヒント : 左上隅のフレーム 1 をクリックし、最下段のレイヤーの最終フレームに向かって斜めにドラッグします)。すべてのフレームとレイヤーが黒くハイライト表示されたら、[編集]-[タイムライン]-[フレームのコピー] を選択して (または Ctrl+At+C を押して)、タイムライン全体をクリップボードにコピーします (または、ハイライト表示されたフレーム内のどこかを右クリックし、ショートカットメニューから [フレームのコピー] を選択します)。コピーしたことを頭に置きつつ、次の手順に進んでください。

ライブラリを開き (Ctrl+L)、右上隅のドロップダウンメニューから [新規シンボルの作成] を選択し、[ムービークリップ] タイプを選択して [OK] をクリックします。すると、新しいシンボルの編集モードに入ります。タイムライン上で先頭フレームを選択し、[編集]-[タイムライン]-[フレームのペースト] を選択して (または Ctrl+Alt+V を押して)、図 47 のように先ほどのコピー内容をペーストします (または、フレーム 1 を右クリックし、ショートカットメニューから [フレームのペースト] を選択します)。

図 47. フレーム 1 を右クリックし、[フレームのペースト] を選択

メインステージに戻り、新しいレイヤーを作成します。ライブラリに新しく作成したムービークリップシンボルを選択し、ステージ上の新しいレイヤーにドラッグします (図 48)。

図 48. ムービークリップをステージにドラッグします

元のキャラクターが含まれている他のレイヤーをすべて削除します。これにより、タイムライン上には、キャラクターのアニメーションを含んだ 1 つのムービークリップシンボルと 1 つのレイヤーだけが残ります。

作成できるシャドウには 2 つの種類があります。標準のドロップシャドウでは、キャラクターから少しずれた位置の背面に影ができます。このエフェクトは平面的な外観になりやすく、そのままでは、壁などの平らな表面に投影した影のように見えます。今回は地面にできるような影を作りたいので、これではあまり感心しません。もっとリアルなシャドウエフェクトを得るには、若干の手順を踏む必要があります。

ムービークリップインスタンスを複製し、元のインスタンスの背面に配置します (元のインスタンスと同じレイヤー上の背面に複製を配置しても、背面に新しいレイヤーを追加してそちらに複製をペーストしてもかまいません)。

複製したインスタンスを選択し、プロパティインスペクタの [フィルタ] タブで、プラス (+) メニューから [ドロップシャドウ] を選択します (図 49)。強さのレベルを 45% 前後に調整し、[オブジェクトを隠す] を選択します。すると、ムービークリップオブジェクトは見えなくなりますが、ドロップシャドウフィルタのプロパティが表示されるので、必要に応じて調整してください。画質を低、中、または高に設定できる他に、ぼかしの量、カラー、および角度、また、元のグラフィックとぼかしエフェクトの間の距離を指定できます。

図 49. 複製したムービークリップインスタンスにドロップシャドウフィルタを適用

元のオブジェクトを背面の平らな壁に投影しただけのような平面的な影にならないように、フィルタを適用したムービークリップインスタンスを自由変形ツールで傾斜させましょう。このテクニックをうまく適用するには、多少の試行錯誤が必要です。地面にできた影のように見えるところまで、インスタンスをつぶして傾斜させてください (図 50)。場合によっては、インスタンスの位置も調整しないとそれらしく見えるようになりません。

図 50. 自由変形ツールを使って、複製したムービークリップを変形

ムービーをプレビューし、エフェクトを実際に再生してみてください。

アニメーションをループさせ、他のいくつかのアニメーションループと組み合わせれば、図 51 のように本格的な視覚効果を得ることができます (再生には Flash Player 8 が必要です)。

図 51. ドロップシャドウフィルタを使用した 2.5D エフェクトの例

この例を見れば、ドロップシャドウエフェクトはアニメーションの立体感を演出する強力な手段になることがわかるでしょう。このアニメーションは、少年のキャラクターと犬のキャラクターそれぞれのアニメーションループを含んだ一連のムービークリップによって表現されています。筆者が今後執筆を予定している記事では、小さいアニメーションループを活用してムービーの表現力を大幅にアップする方法についても説明するつもりです。

皆さんが Flash によるデザインとアニメーションのスキルを磨くうえで、この記事が参考になれば嬉しく思います。Flash でアニメーション制作に使えるテクニックとしては、この他にも、フルアニメーション ("フレームバイフレーム" と呼ばれる手法) およびシェイプトゥイーン、また、ビデオや 3D アニメーションプログラムからのイメージシーケンスの読み込みなどがあります。デザイナーやアニメータが作った強力なプラグインも数多くあり、Flash での制作作業工程を短縮するために役立ちます。そうしたテクニックやツールの活用に関する記事も発表していきますので、どうぞご期待ください。

著者について