My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

※ 当サイトはアフィリエイト広告を利用しています

3/3 リップル効果 / 課題

  1. リップル効果
  2. 課題
【演習】リップル(さざなみ)効果

リップル効果を設定したこちらのFlashファイルを作成します。

作業手順は以下の指導要領に従います。
http://yahoo.jp/box/dRqSg4
(講師ブログ:
「Webデザインの勉強|Webサイト制作科補足と初心者の勉強法」
http://d.hatena.ne.jp/web-0127/
より)
※参照記事が以前のURLに存在しないため、記事画像ファイル添付にてご紹介いたします。



手順

1. 新規ドキュメント作成

※以下CS6使用時の新規ドキュメント作成画面です。
 「Action Script 2.0」で作成します。

2. 背景色を変更

3. 文字を入力する

4. 「修正」→「分解」

5. 「修正」→「タイムライン」→「レイヤーに配分」

6. 1文字づつ、「分解」→「シンボルに変換」

7. キーフレームを挿入し、動きの準備をする

8. 1フレームのインスタンスの不透明度「アルファ」を「0%」にする

  • 「アルファ」は適宜設定する

9. 次のキーフレームを「800%に拡大」「アルファ:10%」にする

10. それを「1文字づつ繰り返す」

11. 動きに併せて、フレームをずらす

12. 「フレームを挿入」して、静止した文字を表示し続ける

13. 最終フレームで止める

⇒ Flashムービー上をクリックすると、再生されます。


補足: 
フレームレート (最低でも)12fps

ポイント:

  • 修正メニューを覚える
  • Flash 動くもの ⇒ 1 / レイヤー1枚あたり
【演習】Flashムービー作成

課題:以下のようなFlashムービーを作成します。

【完成形】
http://yahoo.jp/box/dRqSg4


手順

  1. 新規ドキュメント作成(flaファイルを開く)
  2. 各レイヤーに必要な画像を読み込む(夕日のレイヤーの空白キーフレームに夕日の画像を読み込む)
  3. 読み込んだ画像を選択したまま「修正メニュー→シンボルに変換する(グラフィックシンボル)
  4. 同様に、花のレイヤーの空白キーフレームに花の画像を読み込む
  5. 読み込んだ画像を選択したまま「修正メニュー→シンボルに変換する(グラフィックシンボル)
  6. 赤い文字レイヤーに、赤い文字シンボルをライブラリから配置する
  7. 整列パネルでドキュメントの中央に揃える
  8. 赤い文字レイヤーの「35フレーム」にキーフレームを挿入する
  9. 赤い文字レイヤーの「1~35」までの間にクラシックトゥイーンを挿入する
  10. 赤い文字レイヤーの「1フレーム」のインスタンス(ステージのオブジェクト)を選択し、プロパティパネルの「カラー効果:スタイル」をアルファ0%にする
  11. 夕日の画像を「35フレーム」からスタートするように移動する
  12. 夕日のレイヤーの「70フレーム」にキーフレームを挿入する
  13. 夕日のレイヤーの「35~70」までの間にクラシックトゥイーンを挿入する
  14. 夕日のレイヤーの「35フレーム」のインスタンス(ステージのオブジェクト)を選択し、プロパティパネルの「カラー効果:スタイル」をアルファ0%にする
  15. 赤い文字レイヤーの「70フレーム」にキーフレームを挿入する
  16. 赤い文字レイヤーの「70フレーム」のインスタンス(ステージのオブジェクト)を選択し、プロパティパネルの「カラー効果:明度」を100%にする
  17. 夕日のレイヤーの「80フレーム」にキーフレームを挿入する(70~80フレームまで同じ画像が見え続ける)

<<

※ 当サイトはアフィリエイト広告を利用しています