このチュートリアルでは、下のような素敵な効果を加えていこうと思います。これは主に、流線形のラインを持ったロボットや工業的なデザインに有効だと思います。







チュートリアルファイル

ムービーの設定
flashを開いて、ドキュメントの設定を行います。サイズをあなたが使うイメージと同じように設定し、フレームレイトを20～30にしましょう。フレームレイトが高い方が、スムーズなアニメーションとなると思います。

[You must be registered and logged in to see this image.]


タイムラインの設定
「image」と「fix」という2つのレイヤーを作成しましょう。あなたのイメージを「Image」レイヤーに読み込みましょう。イメージの位置を
「x:0」、「y:0」にし、左上のコーナーに配置し、レイヤーをロックします。今後このレイヤーは操作することはありません。

注意：今後、Flash内で読み込んだイメージの大きさを変えたり、変形させたりしないようにしましょう。イメージの編集はPhotshopや他のソフトでおこないましょう。

ライブラリに行き(F11)、イメージをダブルクリックし、「スムージング」のチェックをはずしましょう。これはムービーをスローダウンしたり、イメージの変形の原因となる余分な、必要のないflash内でのアンチエイリアスを防ぐことができます。

[You must be registered and logged in to see this image.]


マスクのドローイング
flashの描画ツールを用いて、効果を与える部分のアウトラインを作成しましょう。例えば、金属パーツ、輝きを放つ表面、ケーブルやチューブなどでしょうか。私は線と、円形ツールだけを用いてアウトラインを作成しました。アウトライン内を着色し、形状を仕上げましょう。

[You must be registered and logged in to see this image.]

消しゴムツールを選んでください、「線の消去」に設定します。形状から、線を消去し、内側の着色部のみを残しましょう。

[You must be registered and logged in to see this image.]

「fix」レイヤー内を全て選択します。図形をグループ化し(CRT+G)、下に示すように、そのグループをムービークリップに変更します(F8)。名称を「mc_fx」とし、基準点を左上に設定します。

[You must be registered and logged in to see this image.]


マスクキング効果の作成
ステージ上の「mc_fx」インスタンスをダブルクリックし、シンボルの編集モードに移動します。作成した形状が「layer1」に含まれているはずです。レイヤーの名称を「mask」にし、もう一つのレイヤーを「light」とします。

[You must be registered and logged in to see this image.]

レイヤー「light」にとどまった状態で、135×120pxの長方形を作成します。着色部を選択し、カラーミキシング(Shift+F9)を次の設定で用い、線形グラデーションに変更します。そして、変形ツールを使って、下のイメージのように回転させます。

[You must be registered and logged in to see this image.]

グラデーションをグループ化し、グラフィックシンボルに変換します。「g_light」と名づけましょう。そして、「g_light」レイヤーの位
置を「x:0」、「y:265」とします。「light」レイヤーの50フレーム目にキーフレームを作成し、そのフレーム上で、「g_light」の位置
を「x:0」、「y:-120」とします。「mask」レイヤーの50フレーム目にも下のようにフレームを挿入しましょう。

「light」レイヤーの最初のキーフレームを右クリックし、モーショントゥイーンを作成しましょう。25フレームを選択し、F6を押して、キーフレームにします。フレーム1から100までと25から100までの値を設定しましょう。

[You must be registered and logged in to see this image.]

「mask」レイヤーを選択し、右クリックして、メニューから、マスクレイヤーに変換するマスクという項目を選択しましょう。

[You must be registered and logged in to see this image.]

ムービーのテストを行って、効果の完成を確認してください。



引用:Web Design Library著者:Aeon翻訳:atuk]