« デジハリセミナー:「アメリカの3DCG・VFX最前線」レポート | トップページ | 産業社会と人間:中間発表と見学会 »

2008年10月13日 (月)

デジハリ081011

デジハリ横浜校、総合ProコースWebデザイナー専攻。第22回目の授業。

エントリは遅れたが、11日で実習は終了。Flashで音の扱いとフルフラッシュサイトの作り方を学んだ。要点をメモしておく。

ボタンの効果音
ボタンのオーバーとダウンのキーフレームで、ライブラリに読み込んだ音源をステージにドラッグするだけ。
ボタンのタイムラインに音を配置

マウスカーソルがボタンにのったときとクリックしたときの効果音を設定。まず、2つの効果音を読み込んでおく。ボタンシンボルの編集画面で、オーバーのタイムライン上、ダウンのタイムライン上にそれぞれ、ライブラリから音をドラッグ&ドロップするだけ。

BGMの設定
シーンのステージにループ音楽を配置し、先のボタンでスタート/ストップを制御する。プロパティパネルで行なう音の再生の設定がミソ。同期のデフォルトの「イベント」ではダメ。
ボタンでBGMを制御

下のレイヤーは1フレームのキーフレームに(12フレームまで)BGMをタイムラインに配置し、13フレームは空のキーフレーム。同じ位置にボタンがあり、1フレーム目のボタンと、13フレーム目のボタンには互いのフレームにジャンプするように記述する。
1フレーム目のボタンのActionScript 13フレーム目のボタンのActionScript

最上位のレイヤーはActionScript用。12フレーム目には1フレーム目へのジャンプを記述。つまり、ここでループ再生を実現する。13フレーム目は stop();を記述し、音が止まった状態を作る。
12フレームのActionScript 13フレームのActionScript

フルフラッシュサイトの作り方とFlashでのプルダウンメニューの作り方
プルダウンメニューをクリックすると、メイン部分に他のSWFデータをLoadMovieで読み込むという設定。4ページ分のSWFは加工したPNG画像を配置しただけで済ます。
マウスがのるとプルダウン開始 それぞれがボタンの機能

問題はどのようにプルダウンメニューを表現するか。ロールオーバーを設定したボタンを複製し、4つ縦列して1つのムービークリップで包む。さらにムービークリップで包み、上から下へのイーズアウト付きのモーショントゥイーンを設定して、インスタンス名をmenuanimeとする。
1フレーム目の位置とActionScript
1フレーム目と12フレーム目には stop(); を記述。
12フレーム目の位置とActionScript

最初から表示されるスタート用のボタンには、このアニメーションを2フレーム目にジャンプする命令。そして、最も重要なのが、このアニメーションが見えて欲しい部分にマスクをかけること。下のブルーの矩形がアニメーションを配置したレイヤーをマスクする。
マスクの矩形とスタートボタンのActionScript

ムービークリップの中の一つひとつのボタンには、対応するSWFを読み込むためのActionScriptを記述。dummyという空のムービークリップインスタンスがメイン部分の左上に配置してある。
ProfileボタンのActionScript

■からくりが分かれば簡単なことだった。しかし、講師の佐藤先生のおっしゃるように、基本的なことをどのように組み合わせて実現するかがミソ。講義の中で、制作のヒントになることをいっぱい伝えてくださったことに感謝している。

本日で実習の部は全て終了。以後は卒業制作の期間となる。

|

« デジハリセミナー:「アメリカの3DCG・VFX最前線」レポート | トップページ | 産業社会と人間:中間発表と見学会 »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/178689/24426012

この記事へのトラックバック一覧です: デジハリ081011:

« デジハリセミナー:「アメリカの3DCG・VFX最前線」レポート | トップページ | 産業社会と人間:中間発表と見学会 »