Flash/Flashの基本

Flashでリアルな水面の波紋

水面に広がる波紋は繊細で美しい物です。Flashを使ってこの波紋をリアルに再現するアニメーションを作成しましょう。

執筆者:渡辺 大介

水面に広がる波紋は繊細で美しい物ですよね。今回はこの水面の波紋をFlashでリアルに再現していきます。
波紋完成図
波紋完成図。完成した.flaファイルをダウンロード

楕円ツールと放射状グラデーションで波紋を描く

背景は水面の色
1. Flashの背景色にはグラデーションが設定できません。そこで一番下のレイヤーにグラデーションのついた短形を置くことで再現します。短形ツールで線をなし、塗りを線状グラデーションに設定し、画面いっぱいに長方形を描いてください。下から上へのグラデーションを付け、始点は水色(#0099CC)に、終点は白(#FFFFFF)に設定してください。

Shift+Altを押しながら移動
2. 一番上にレイヤーを追加してください。楕円ツールを選択し、塗りを放射状グラデーションに設定します。「Shift+Alt」キーを押しながら、ステージ中心から矢印の方向へドラッグしてください。画面いっぱいに正円を描きます。

グラデーションの始点を移動
3. 「カラーパレット」のグラデーションの始点をドラッグし図の位置まで移動します。始点がずれることで中心が空洞のような表現が可能になります。色を始点・終点ともに白。始点だけアルファを[0」に設定してください。

中心が透明になった円
4. ここまでの完成図です。中心が大きく空洞になり、円の外側にだけグラデーションがつきました。

次のページでは波紋にリアルなアニメーションするように設定していきます。
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます