こんにちは、イマジカデジタルスケープの伊藤和博です。

今回は、Flash CS5のパターン描画ツールについてご紹介します。

このパターン描画ツールは、一定のエリアをパターンで敷き詰める機能ですが、ActiocScriptと連動させることで様々なアニメーションを作ることが可能です。このパターン描画ツールそのものはFlash CS4からの機能ですが、CS5になってから新しい効果が大幅に加わりました。

では、その使い方を見てみましょう。


パターン描画ツールで描画する


ファイル>新規でステージを作成し、パターン描画ツールを選択します。CS5の新機能として加わったのは、描画エフェクトの種類ですが、CS4の3種類から比べて、一気に13種類もの描画エフェクトが加わりました。





パターン描画ツールを選択した後、任意の描画エフェクトを選択し、ステージ上でクリック、または描画エフェクトによってはドラッグします。すると、設定した描画エフェクトのとおり、ステージ上にパターンが形成されます。

以下は、描画エフェクトを「つる模様」にし、プロパティパネルの「パターンをアニメーション化」にチェックし、ステージ上の任意の箇所でクリックして作成したSWFアニメです。つる模様が広がっていくレイヤーにはマスクをかけており、ステージの上部と下部のみ、這うようにつる模様が広がります。

つる模様


葉っぱや花の形状は、それぞれにシンボルを作成し、プロパティパネルで設定をすることで任意の形状に変更することも可能です。また、任意のシェイプでマスクをかけることもできるため、部分的にパターンで描画することも可能です。




パーティクルシステム(CS5)


CS5では、パターン描画ブラシを使用して、AfterEffectsなどではおなじみのパーティクルを作成することが可能になりました。

パーティクルは指定したシンボルが雨のように降り注ぐアニメーションですが、プロパティパネルで、降り注ぐ粒子(シンボル)の指定、カラー指定、フレーム数や消滅するまでの寿命フレーム、サイズ、回転角度など、様々な設定を行うことが可能です。




パーティクルを作成する場合は、まず、何フレームの間、指定した粒子が降り注ぐかをプロパティパネルの「全体の長さ」で設定しておきます。すでに既存のアニメーションがある場合は新規レイヤーを作成してそのレイヤー上に、パーティクルのみを新規で作成する場合は、プロパティパネルで設定したフレーム数だけ、あらかじめレイヤー上にフレームを作成しておきます。

以下は、2種類の音符のフォントからそれぞれシンボルを作成した後、粒子1と粒子2にそれぞれ登録し、以下の設定でパーティクルにしたものです。

全体の長さ及びパーティクル生成:120フレーム
1フレームあたりの生成数:1
寿命:15フレーム
初期方向の最小値:-45度
初期方向の最大値:45度
引力:3px
回転角度:0度

パーティクル



炎・煙のアニメーションエフェクト(CS5)


炎または煙のアニメーションエフェクトを使用すると、ユラユラとゆれる炎や煙のアニメーションを作成することができます。

炎や煙のサイズや速度、燃えている時間(フレーム数)、カラー等を設定することが可能です。




以下は、パーティクルに炎と煙を加えたアニメーションです。

パーティクル2


プロパティパネルにある「終了部分のアニメーションの追加」にチェックすると、総フレーム数は伸びますが、炎や煙が消えていく様子まで自動的にアニメーションにすることが可能になります。

なお、このパターン描画ツールのみでアニメーションを制作すると、各フレームにキーフレームを設定しなければならいなため、ファイルサイズが少々重くなります。ActionScriptと組み合わせてインタラクティブアニメにするといいでしょう。




もっとFlash CS5 の使い方を詳しく知りたい方は!
Flash Professional CS5の使い方・基本トレーニングの受講がオススメです!




イトウ先生が、Twitterを始めました!
みなさんもぜひ、フォローしてくださいね!

http://twitter.com/itoh_sensei




■■イトウ先生のTipsNote(実践・新機能コンテンツ)アーカイブ■■


基本トレーニングの受講後に、さらに学習しておきたい内容やTips、新機能を、隔週1回(月2回)で公開しています。


●Macintosh基本操作編(意外と知らない操作も多い!?)
○入力モードや変換のショートカット
○デスクトップで使えるショートカット
○階層やファイルパスの把握に便利な機能

●Illustrator(AI)
○アウトライン化と孤立点の削除について
○データを軽く作る方法について
○シンボルの親子関係について・その1
○編集モード
○シンボルの親子関係について・その2
○カラーパネルの「使えるショートカット」
○カラー一括変換のグローバルスウォッチとは
○配置した画像のすばやい編集方法
○CS5新機能01:すべてのアートボードにペースト
○CS5新機能02:内側描画と背面描画
○CS5新機能03:Web・インタラクション用のデザイン
○CS5新機能04:遠近描画
○CS5新機能05:線パネルと線幅ツール

●Photoshop(PS)
○消しゴムツールの活用
○ななめの画像をまっすぐにする方法
○自然な合成テクニック・角版
○自然な合成テクニック・切り抜き画像
○画像合成後の便利なショートカット
○調整レイヤー
○レイヤーパネルの不透明度と塗りについて
○不透明度のショートカット
○CS5新機能01:「コンテンツに応じる」機能
○CS5新機能02:絵筆ブラシと混合ブラシ
○CS5新機能03:人の記憶に近い画像・HDRについて
○CS5新機能04:パペットワープ
○CS5新機能05:3Dオブジェクトとアニメーション

●FLASH(FL)
○Illustratorだけでできる、Flashアニメ
○CS5新機能01:IKボーンスプリングでバネアニメ
○CS5新機能02:コードスニペットパネルで簡単ActionScript3.0
○CS5新機能03:パターン描画ツール

●InDesign(ID)
○CS5新機能01:マルチステートを使った、IDからFlashアニメの作り方
○CS5新機能02:アニメーションパネルとタイミングパネルを使った、IDのモーションプリセット
○CS5新機能03:キャプションの自動作成機能

●Dreamweaver(DW)
○CS5新機能01:新しいサイト定義と、CSSスターターレイアウト
○CS5新機能02:HTML5 Pack
○CS5新機能03:スマートフォン検証・CSS3のメディアクエリー
○CS5新機能04:ブラウザ検証便利ツール・Adobe BrowserLabについて

●AfterEffects(AE)
○CS5新機能01:ロトブラシ
○CS5新機能02:新しい便利なショートカット

●FireWorks(FW)
○CS5新機能01:Device Centralと連携した、スマートフォンのプロトタイプ
○CS5新機能02:divのタイル背景の強化