ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

HomeFlash講座 > クールなマスキング効果

クールなマスキング効果

投稿日:2006年6月2日   レベル:中級    ソフトウェア:Flash


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





チュートリアルファイル

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

500_501_002_1.jpg


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

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

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

500_501_002_2.jpg


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

500_501_002_3.jpg

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

500_501_002_4.jpg

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

500_501_002_5.jpg


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

500_501_002_6.jpg

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

500_501_002_7.jpg

グラデーションをグループ化し、グラフィックシンボルに変換します。「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までの値を設定しましょう。

500_501_002_8.jpg

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

500_501_002_9.jpg

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


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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング