Creating graphic effects using the new Deco scripts in Flash Professional CS5
更新日
10 May 2010
ページ ツール |
必要条件
この記事に必要な予備知識
Flash Professionalインターフェイス、シンボルの使用、基本的なタイムラインアニメーションに関する知識があれば役立ちます。
ユーザーレベル
中級
必要な製品
- Flash Professional (Download trial)
サンプルファイル
- deco_effects_flcs5.zip (2196 KB)
パターン描画ツールはFlash CS4 Professionalで導入され、Flash Professional CS5では新しいグラフィックエフェクトが追加されています。このツールは、Flashの手続き型モデリングエンジンに基づいています。手続き型モデリングエンジンとは、Flash JavaScript API（JSAPI）を使用してアルゴリズムを処理するライブラリです。アルゴリズムは、エンジンが解釈可能な構造化ファイルに組み込まれます。Flash CS5では、パターン描画ツールにいくつかの新しいスクリプトが追加され、さらに効果的なエフェクトを作成できるようになりました。
この記事では、これらのエフェクトを紹介し、その使用法を次の3つの例で示します。
新しいエフェクトの概要
新しいパターン描画エフェクトは、パターン描画ツールのDrawing Effect（描画エフェクト）リストにあります（図1を参照）。Vine Fill（つる模様）、Grid Fill（格子模様）、Symmetry Brush（対称ブラシ）の各エフェクトは、Flash CS4にも含まれていました。これらの詳細については、筆者の過去の記事を参照してください。Grid Fill（格子模様）はFlash CS5で更新され、4つの異なるタイルシンボルを使用して、いくつかの異なるパターンで配列できるようになりました。
Flash CS5で導入されたエフェクトは以下のとおりです。
- 3D Brush（3Dブラシ）は、スプレーブラシのようにシンボルをステージ上にまき散らしますが、ステージの下の方では大きく、上の方では小さくなるようにシンボルのスケールを調整します。これは、3D風景のエフェクトを作成するために使用できます。
- Building Brush（ビルディングブラシ）は、様々な種類の高層ビル群を作成します。
- Decorated Brush（パターンブラシ）は、様々な既製の白黒のシェイプをステージ上に作成します。
- Fire Animation（炎のアニメーション）は、動く炎のフレーム単位のベクトルアニメーションを作成します。
- Flame Brush（炎ブラシ）はFire Animation（炎のアニメーション）に似ていますが、炎のシェイプの静的なベクトルをステージ上に作成します。
- Flower Brush（フラワーブラシ）はDecorated Brush（パターンブラシ）に似ていますが、カラーの花のベクトルシェイプをステージ上に作成します。
- Lightning Brush（稲妻ブラシ）は、枝分かれした稲妻のシェイプをステージ上に作成します。プロパティインスペクターのアニメーションオプションを使用すれば、ブラシのストロークを複数フレームにわたってアニメーション化できます。
- Particle System（パーティクルシステム）は、組み込みのシェイプまたはカスタムシンボルを使用して、粒子のシャワーを作成するアニメーションエフェクトです。
- Smoke Animation（煙のアニメーション）は、Fire Animation（炎のアニメーション）と組み合わせて使用します。吹き上がる煙のフレーム単位のベクトルアニメーションを作成します。
- Tree Brush（ツリーブラシ）は、様々な枝分かれした木のシェイプをステージ上に作成します。
いくつかのエフェクトは一見用途が限られるように思われるかもしれませんが、実際に使ってみれば、アニメーションで使用できる面白いシェイプがいろいろと作成できることがすぐにわかります。以下の例では、新しいパターン描画エフェクトと、Flash Professional CS5のテンプレートを組み合わせて、簡単な面白いアニメーションをごく短い時間で作成します。
微生物アニメーション：Building Brush（ビルディングブラシ）、Symmetry Brush（対称ブラシ）、スクリプトアニメーション
Building Brush（ビルディングブラシ）で、デフォルトのビルディングタイプを分割すると、面白い出発点のシェイプが得られます。この例では、Building Brush（ビルディングブラシ）とSymmetry Brush（対称ブラシ）を組み合わせて、周りに毛が生えた細菌のように見える円形のシェイプを作成しました（図2を参照）。
面白いシェイプができたら、Flash CS5に付属する新しいテンプレートを使用して、ランダムな動きをシェイプに追加できます。テンプレートを使用するには、使用したいテンプレートファイルを開き、サンプルコードを切り取って作業中のファイルに貼り付けます（図3を参照）。
微生物のシェイプを変更した後、背景に溶け込ませるためにいくつかフィルターを追加しました。最後に、顕微鏡のレンズを通した映像に見えるように、いくつかの静的ベクトル形状を上に追加しました（図4を参照）。
天使の炎アニメーション：Tree Brush（ツリーブラシ）とFlame Animation（炎のアニメーション）
Tree Brush（ツリーブラシ）は、非常に多彩な分岐形状を作成できます。Tree Brush（ツリーブラシ）を使えば立派な木を描画できますが、他にも様々なアーティスティックな使い方があります。天使の炎のサンプルでは、Tree Brush（ツリーブラシ）を使用して、1つの色のわずかに異なる色調で一連のブラシストロークを組み合わせることにより、複雑な翼のようなシェイプを作成しました。
次に、導体の代わりにFire Animation（炎のアニメーション）を追加しました。スムーズなアニメーションを作成するため、アニメーションの炎をコピーしてタイムライン上に逆に貼り付けています（図6を参照）。
元のパターン描画シェイプにいくつかのぼかしフィルターを追加することで、完成したアートワークに面白い深みが加わっています。さらに、炎が自然に見えるようにFlame Animation（炎のアニメーション）にもぼかしフィルターを追加しました。
輝く飛行物体アニメーション：Lightning Brush（稲妻ブラシ）、Symmetry Brush（対称ブラシ）、Spray Brush（スプレーブラシ）
輝く飛行物体の例は微生物の例に似ていますが、出発点のグラフィックとしてBuilding Brush（ビルディングブラシ）の代わりにLightning Brush（稲妻ブラシ）を使用しています（図8を参照）。
宇宙の景色を作成するため、Spray Brush（スプレーブラシ）のランダム機能を使用して、背景に星の群を描画しています（図9を参照）。シーン全体が宇宙空間を移動するように見せるため、星の群をペーストボード上にスプレーした後で、モーショントゥイーンを追加しました。
さらに、輝く物体を回転させるため、enterFrameイベントで動作する数行のActionScriptコードを作成しました（図10を参照）。
最後に、他のアニメーションと同様、エフェクトにフィルターを追加しました。この例では、らせんシェイプに光彩フィルターを適用しています（図11を参照）。
次のステップ
パターン描画ツールと新しいエフェクトを使えば、様々な面白いことを実現できます。この記事では、いくつかのグラフィックの例を紹介しました。パターン描画ツールを使えば、ゲーム、アニメーションなど、あらゆる用途のための汎用的なシェイプを簡単に作成できます。さらに、Flashに付属するパターン描画スクリプトを開いてコピーし、変更することにより、独自のパターン描画エフェクトを作成することもできます。スクリプトがある場所とFlashでのその処理方法の詳細については、筆者の関連記事Flashで複雑な幾何学パターンを作成するためのパターン描画ツールとスプレーブラシの使用を参照してください。
More Like This
- Lip-syncing automatically with SmartMouth in Flash Professional
- Adobe Pixel Benderでのブレンド、フィルタおよび塗りの作成
- ActionScript 3.0でのアニメーションの作成
- Flash Professional CS5でのスプリングツールの使用法
- Creating an accessible animated presentation in Flash
- Creating a simple document in Flash CS4 Professional
- Animation in Macromedia Flash: Squash and Stretch
- Creating self-voicing puzzles in Flash
- Creating a simple animation in Flash
- Building Preloaders and Progress Bars in Macromedia Flash
