Flashで複雑な幾何学パターンを作成するためのパターン描画ツールとスプレーブラシの使用
作成日
1 February 2009
ページ ツール |
必要条件
この記事に必要な予備知識
Flashインターフェイスやシンボルの使用、および基本タイムラインアニメーションに関する基本的な実務知識。ActionScriptの知識は必要あ りません。記事に記載されているコードサンプルを自分のファイルにペーストすることができます。このコードサンプルには、完成したFLAファイルが含まれ ています。パターン描画ツールの基本機能について既に習熟している場合は、基本的な使用方法に関する最初の節はスキップしてもかまいません。
ユーザーレベル
初級
必要な製品
- Flash Professional (Download trial)
サンプルファイル
- deco_intro_src.zip (393 KB)
Adobe Flash CS4 Professionalの２つの新しい装飾描画ツールは、Creative Suite 4に組み込まれた手続き型モデリングエンジンを使用してシェイプを描画します。この記事では、パターン描画ツールとスプレーブラシツールについて説明し、それぞれのツールの面白くて役立ちそうなサンプルをいくつか示します。
手続き型モデリングエンジンは、Flash JavaScript API （JSAPI）を使用してアルゴリズムを処理するFlashのライブラリです。アルゴリズムは、エンジンが解釈可能な構造化ファイルに組み込まれます。
パターン描画ツールとスプレーブラシの基本的な使用方法
パターン描画ツールとスプレーブラシは、Flashの標準ツールパネルからアクセスできます。これらの新規ツールの基本ワークフローは、ツールバーでツールを選択してからステージをクリックして、パターンの描画を開始します。さらに、オプションをいくつか変更すると、カスタムパターンを非常に簡単に作成できます。
パターン描画ツールには、つる模様、格子模様、および対称ブラシという３つのエフェクトがあります。この３つのエフェクトとスプレーブラシが、CS4の手続き型エンジンを使用するために作成された４つの新規ツールです。これらの新規ツールはすべて同じエンジンを使用するので、機能およびUIは似ています。UIは、各ツールの選択時に縦のプロパティインスペクタに表示されます。
ツールまたはエフェクトが変わると、プロパティインスペクタはそのエフェクトで使用可能なオプションに変わります。これらのツールとエフェクトはそれぞれ、類似したUIを一部共有します。デフォルトシンボルをライブラリシンボルに置き替える「編集」シンボルボタン、デフォルトのシェイプの色を変更するカラーピッカー、デフォルトのシェイプをリセットするチェックボックスなどです。これらの共通オプションの下に、詳細オプションがあります。詳細オプションについては、次の節で説明します。
スプレーブラシの基本
スプレーブラシを使用するには、ツールバーからスプレーブラシを選択します。通常のブラシツールをクリックしたままにしてブラシ選択メニューがポップアップしたら、「スプレーブラシツール」をクリックします。通常のブラシで行うようにステージ上に描画すると、小さい円形粒子のスプレーがグループとして表示されます。次に、プロパティインスペクタでカラーピッカーをクリックし、新しい色を選択してブラシの色を変更し、ステージ上にさらに描画します（図１を参照）。
パターン描画ツールの描画エフェクトの切り替え
パターン描画ツールが選択されている場合、「エフェクト」ドロップダウンから、つる模様、格子模様、および対称ブラシの3つのエフェクトを選択できます（図２を参照）。
格子模様の基本
格子模様を使用するには、パターン描画ツールを選択して、プロパティインスペクタで「格子模様」エフェクトを選択します。カラーピッカーをクリックして格子の色を選択してから、ステージ上の任意の場所をクリックします。格子がデフォルト設定で描画されます（図３を参照）。
対称ブラシの基本
対称ブラシを使用するには、パターン描画ツールを選択して、プロパティインスペクタのポップアップから「対称ブラシ」エフェクトを選択します。ハンドルのセットが、ある角度でステージ上に表示されます。これらのハンドルを使用すると、シェイプを対称にさらに追加したり、グループ全体を回転したりできます。
対称ブラシエフェクトを選択した状態で、カラーピッカーをクリックして対称の色を選択します。次に、ステージ上の任意の場所（対称ハンドル以外）をクリックすると、デフォルトのシェイプが対称に追加されます。続いて、２つのハンドルのうち短いハンドルの末端にある小さい円をクリックしてドラッグします。ハンドルをドラッグして左右に動かすと、シェイプが対称に追加されたり削除されたりします。次に、長いハンドルを同じようにドラッグして、対称全体が回転することを確認します（図４を参照）。ステージをクリックすると、引き続き新しいシェイプを対称に追加できます。
別のツールを選択すると、対称はシェイプのグループに変換されるので、対称ハンドルで再び編集することはできなくなります。
つる模様の基本
つる模様を使用するには、パターン描画ツールを選択して、プロパティインスペクタのポップアップメニューから「つる模様」エフェクトを選択します。カラーピッカーをクリックして葉と花の色を選択してから、ステージ上の任意の場所をクリックします。境界に達するまで、クリックした場所がつる模様で塗りつぶされます（図５を参照）。ステージ上のシェイプをクリックすると、そのシェイプのみがつる模様で塗りつぶされます。
カスタムシンボルと詳細オプションの使用
これらの新しいツールの最大の特徴は、各ツールが描画するデフォルトシェイプのライブラリからカスタムシンボルを入れ替える機能です。各ツールの詳細オプションを使用すると、各パターンの描画方法を詳細に定義できます。以下に、カスタムシンボルと詳細オプションを使用してタスクを迅速に完了する新しいツールの例を示します。カスタムシンボルと詳細オプションを使用しない場合は、非常に長いActionScriptコードの設計や使用に長い時間がかかります。
スプレーブラシの高度な使用法
スプレーブラシは、多くの描画ツールに共通するツールで、多くのユーザが一般的な使用法に習熟しています。Flashスプレーブラシの特徴的な違いの１つは、デフォルトシェイプの内部にムービークリップの代わりにアニメーションを使用できるため、アニメーション化されたスプレーパターンを作成できる点です。この例では、浮かび上がるランダムな泡を作成する方法を示します（図６を参照）。
- 大きな画像 + *
アニメーション化された泡のムービークリップを作成するには：
- Flash CS4 Professionalで新規ドキュメントを開いて、ステージカラーを青に設定します。
- 楕円ツールを選択して、ステージの下部に円を描画します（図７を参照）。反射を表すために、円を白い小さな点で装飾してあります。これは、白に設定された通常のブラシツールを使用して泡シェイプの隅を一度クリックしただけです。
- 選択ツールを使用して円を選択し、Bubbleという名前のムービークリップに変換します（図８を参照）。
- Bubbleムービークリップをダブルクリックして、編集します。
- 選択ツールで、円シェイプを選択します。
- 円シェイプを右クリックして、「シェイプトゥイーンを作成」を選択します（図９を参照）。
- タイムラインで、フレーム100を選択してF6キーを押し、キーフレームを挿入します（図10を参照）。
- フレーム100を選択したまま、泡シェイプを選択してステージのトップから出るように上に移動し、表示の外まで浮かび上がる泡のトゥイーンを作成します。
- タイムラインでフレーム１を選択してF9キーを押し、アクションパネルを開きます。
- 以下のフレームスクリプトをフレーム１に追加します。
// randomize bubble animation:
// go to a random frame between 1 and 80
gotoAndPlay(Math.round(Math.random()*80));
- アクションパネルを閉じて、ドキュメントのトップでシーン１をクリックして、メインステージに戻ります。
- ステージからBubbleムービークリップを削除します。
泡のアニメーションクリップをカスタムスプレーブラシとして使用するには：
- ツールバーからスプレーブラシを選択します。
- プロパティインスペクタで、スプレーブラシのシンボル設定の下にある「編集」をクリックします。
- シンボルの入れ替えダイアログボックスに、使用可能なライブラリアイテムが表示されます。Bubbleムービークリップを選択して、「OK」をクリックします（図12を参照）。
- プロパティインスペクタで、「ランダムに伸縮」、「シンボルを回転」および「ランダムに回転」のチェックが解除されていることを確認してから、ブラシの幅を99、高さを150に調整します。
- スプレーブラシを使用して、ステージ底部のすぐ下をマウスでクリックしてすばやくドラッグし、泡クリップを線状にスプレーします（図13を参照）。
- 保存してムービーをテストします。
多数の泡が浮かび上がり、ステージ上で泡自体がランダムに置き替えられる様子がわかります。泡シェイプのアルファ設定を変更して、さらに透けて見えるようにエフェクトを拡張できます。
格子模様の高度な使用法
格子模様エフェクトは、多くの面白いタイル作業に使用できます。この例では、UIやビデオゲームで使用される3Dタイルの背景を作成します。
塗りのカスタムシンボルとして使用するムービークリップを作成するには：
- Flash CS4で新規ドキュメントを開いて、ステージカラーをダークグレーに設定します。
- 矩形ツールを選択し、塗りは暗い色、線は明るい色でステージ上に小さな正方形を描画します（図14を参照）。
- 選択ツールを使用して正方形を選択し、Tileという名前のムービークリップに変換します（図15を参照）。
- Tileムービークリップをダブルクリックして、編集します。
- ステージ上で正方形シェイプを選択して、InsideTileという名前のムービークリップに変換します（図16を参照）。
- ステージ上でInsideTileムービークリップを選択し、インスタンス名tile_mcを付けます（図17を参照）。これは、ActionScriptに添付するメインのTileクリップ内部で使用するムービークリップです。
- タイムラインで第１フレームを選択してF9キーを押し、アクションパネルを開きます。
- 以下のActionScriptをフレームスクリプトに追加します。
var rotationNumber:Number = 0;
tile_mc.addEventListener(MouseEvent.MOUSE_OVER, startFlip);
function startFlip(evt:MouseEvent){
tile_mc.addEventListener(Event.ENTER_FRAME, flipIt);
}
function flipIt(evt:Event):void{
if(rotationNumber < 10){
tile_mc.rotationY += 18;
rotationNumber++;
} else {
tile_mc.removeEventListener(Event.ENTER_FRAME, flipIt);
rotationNumber = 0;
}
}
このコードスニペットは、rotationNumberという名前のカウンタを作成し、このカウンタを使用して、マウスが上を通過したときにtile_mcを180°反転します。
- ドキュメントのトップにあるシーン１をクリックして、メインステージに戻ります。
- ステージからTileムービークリップを削除します。
格子模様エフェクトの塗りとしてTileムービークリップを使用するには：
- パターン描画ツールを選択します。
- プロパティインスペクタで、描画エフェクトポップアップメニューから「格子模様」を選択します。
- プロパティインスペクタで「編集」ボタンをクリックして、シンボルを入れ替えダイアログボックスからTileシンボルを選択し、「OK」をクリックします。
- プロパティインスペクタの詳細オプションで、垂直および水平方向の間隔をそれぞれ2ピクセルに変更します。
- ステージをクリックして、格子模様エフェクトを適用します（図18を参照）。
- 保存してムービーをテストします。 ステージ上でマウスを移動してタイルを反転させます（図19を参照）。
- 大きな画像 + *
マウスを背景のタイルの上に置くと、タイルが3Dで反転するのを確認できます。TileムービークリップでActionScriptスニペットを変更して、タイルの反転方向を変えたり、反転速度を変えたりできます。
ActionScriptではなく、ステージ上のトゥイーンとして3D回転を作成すると、まったく同じエフェクトをさらに少ないコード行で実現することが可能です。その場合、必要な唯一のコードは、mouseoverイベントをリッスンしてタイムラインに再生を指示するコードです。
対称ブラシの高度な使用法
対称ブラシの詳細オプションポップアップメニューには様々な変換があるため、多くのタスクで役立ちます。よくあるタスクに、12個の目盛りがある時計の文字盤の作成があります。通常は、手動でステージ上に目盛りを描画して整列パネルを使用するか、三角法のコードを使用して中心点の周りに目盛りを配置します。対称ブラシを使用すると、カスタムの時計文字盤を数ステップで簡単に作成できます。
カスタム時計目盛りとして使用するムービークリップを作成するには：
- Flash CS4で新規ドキュメントを開きます。
- 矩形ツールを選択して、時計の各目盛り用のサイズでステージ上に小さい正方形を描画します。各目盛りを表示させたい形に編集します（図20を参照）。
- 選択ツールで時計の目盛りを選択し、ClockHandという名前のムービークリップに変換します。
- ステージからムービークリップを削除します。
時計目盛りムービークリップを対称ブラシのカスタムシンボルとして使用するには：
- パターン描画ツールを選択します。
- プロパティインスペクタで、描画エフェクトポップアップメニューから「対称ブラシ」を選択します。
- プロパティインスペクタで「編集」ボタンをクリックして、ClockHandシンボルを選択します。
- ステージの最上部近くで、回転シンボルの対称ブラシハンドルのすぐ上をクリックして、まず８つの目盛りを追加します（図21を参照）。
- プラス記号の付いている対称ハンドルをクリックしてドラッグし、時計の目盛りを追加して12個にします（図22を参照）。
- 対称の編集完了後、選択ツールに切り替えると、対称全体がグループ化されます（図23を参照）。これで、ステージ上に12個の時計目盛りのグループが作成 され、時計にする準備ができました。
これらのデザインは従来のFlashでも実行できましたが、パターン描画ツールを使用する大きな利点は、パターンをすばやく描画できることです。パターン 描画ツールを使用すると、多数のシンボルの位置を揃えたりグリッドに吸着させたりする必要もなく、複雑なパターンを非常に簡単に描画できます。
５分とかからず作成できる面白いエフェクト
装飾エフェクトとカスタムシンボルをFlash CS4の他の描画機能と組み合わせて使用すると、手動またはActionScriptで長時間かけて作成していた面白いエフェクトを簡単に作成できるようになります。ここでは、パターン描画ツールエフェクトをインバースキネマティック（IK）、フィルタおよび3Dなどの他の機能と共に使用して５分とかからずに作成したエフェクトの例をいくつか示します。例にはそれぞれ、完全なサンプルファイルが含まれています。
粒子と星雲エフェクト
これらの例（図24および25）では、アニメーション化された小さい粒子がステージ上にスプレーされ、3Dまたはフィルタで編集されて、宇宙のように見えています。
- 大きな画像 + *
- 大きな画像 + *
らせんエフェクト
この例では、矩形パターンに簡単なアニメーションを指定してから、この矩形パターンを対称ブラシエフェクトのカスタムシンボルとして使用しています。その後、パターン全体を発光させるためにフィルタを適用してあります（図26を参照）。
- 大きな画像 + *
手続き型モデリングエンジンの詳細について
Flash CS4 Professionalの手続き型モデリングエンジンは、各パターン描画ツールのエフェクトやスプレーブラシの記述として、XMLおよびJavaScriptを受け取るために作成されました。これらのファイルは今後の拡張性を考慮して、外部ディレクトリからFlashにロードされます。描画エフェクトのモデルを構成するスクリプトについて知りたい場合は、CS4のインストールディレクトリに含まれるファイルを参照してください。
C:\Program Files\Adobe\Adobe Flash CS4\en\First Run\ProcScripts
また、手続き型モデリングエンジンは、 UserScripts フォルダでFlash用ユーザディレクトリのスクリプトを検索するようにコーディングされています。
\\UserDir\Local Settings\Application Data\Adobe\Flash 10\en\Configuration\ProcScripts\UserScripts
デフォルトではフォルダは作成されませんが、フォルダが存在し、その中にパターン描画モデルがある場合は、パターン描画ツールのプロパティインスペクタのエフェクトポップアップメニューにそれらのモデルが自動的にロードされます。含まれているスクリプトの１つを、新規作成したUserScriptsディレクトリにコピーして名前を変更してみると、新規アイテムがパターン描画ツールのプロパティインスペクタにどのように表示されるかを確認できます。
次のステップ
描画ツールの詳細については、Flashドキュメントの「パターン描画ツールを使用したパターンの描画」を参照してください。さらに詳しい情報については、「ActionScript 3.0 アニメーションの作成」をお読みください。Flashプロジェクトでムービークリップを簡単に移動、リサイズ、トランジション、およびフェードするためにモーションエフェクトをプログラムで作成する方法を学ぶことができます。
