- リップル効果
- 課題
【演習】リップル(さざなみ)効果
リップル効果を設定したこちらの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
手順
- 新規ドキュメント作成(flaファイルを開く)
- 各レイヤーに必要な画像を読み込む(夕日のレイヤーの空白キーフレームに夕日の画像を読み込む)
- 読み込んだ画像を選択したまま「修正メニュー→シンボルに変換する(グラフィックシンボル)
- 同様に、花のレイヤーの空白キーフレームに花の画像を読み込む
- 読み込んだ画像を選択したまま「修正メニュー→シンボルに変換する(グラフィックシンボル)
- 赤い文字レイヤーに、赤い文字シンボルをライブラリから配置する
- 整列パネルでドキュメントの中央に揃える
- 赤い文字レイヤーの「35フレーム」にキーフレームを挿入する
- 赤い文字レイヤーの「1~35」までの間にクラシックトゥイーンを挿入する
- 赤い文字レイヤーの「1フレーム」のインスタンス(ステージのオブジェクト)を選択し、プロパティパネルの「カラー効果:スタイル」をアルファ0%にする
- 夕日の画像を「35フレーム」からスタートするように移動する
- 夕日のレイヤーの「70フレーム」にキーフレームを挿入する
- 夕日のレイヤーの「35~70」までの間にクラシックトゥイーンを挿入する
- 夕日のレイヤーの「35フレーム」のインスタンス(ステージのオブジェクト)を選択し、プロパティパネルの「カラー効果:スタイル」をアルファ0%にする
- 赤い文字レイヤーの「70フレーム」にキーフレームを挿入する
- 赤い文字レイヤーの「70フレーム」のインスタンス(ステージのオブジェクト)を選択し、プロパティパネルの「カラー効果:明度」を100%にする
- 夕日のレイヤーの「80フレーム」にキーフレームを挿入する(70~80フレームまで同じ画像が見え続ける)
<<