アクセシビリティ
デベロッパーリソース

目次

Flash 8 によるキャラクターデザインとアニメーション

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. アウトラインモードのオニオンスキン