Webデザイナースクール体験記

【今日の授業内容】
今日の課題の中で習得すべき基本は、

自分が今、どこのフレーム、レイヤーをさわっているかを理解する。
キーフレームとフレームの違いを理解する。
フレームを選択してコピー・移動の練習。

Fireworks
・Fireworksからヘッダー部分をコピー。

・Flashで新規作成ファイルにペースト。
ペーストした時点で各パーツは自動的にシンボルに変換されます。

・メニューバーの修正→分解
これで各パーツがバラバラになります。

・レイヤーを新規作成。
名前を「写真」として背景となる画像をロック。

・各文字をシンボルに変換
タイトルとなる文字は自動的にグラフィックパーツになっているので、各文字をシンボルに変換していきます。
各文字を選択してF8キーを押して、シンボル名をつけます。

・メニューバーの修正→タイムライン→レイヤーに配分
各文字のシンボルがレイヤーに配分されます。

・トウィーン設定
1フレーム目を全部選択してトウィーン設定をモーションとします。
1フレーム目は最初にページが表示された時の文字の大きさ。

・キーフレームの挿入
5フレーム目を全部選択→右クリック→キーフレームの挿入

20フレーム目を全部選択→右クリック→キーフレームの挿入

このナビゲーションのキーフレームは、1・5・20の3つということになります。

・このままでは、背景画像は1フレーム目にしか表示されません。
背景を常に表示させておくためにフレームを挿入します。

20フレーム目で右クリック→フレームの挿入。

・それぞれのキーフレームに文字をどう表示させるのかという命令を入れていきます。
1フレーム目
各シンボルに対して、変形ウィンドウで文字20%、アルファ0%

5フレーム目
各シンボルに対して、変形ウィンドウで文字200%、アルファ50%

ブロックごと選択して表示させたい動きになるようにずらしていきます。
ここでは、2段階ずつずらしました。

完成ファイルはこちら

Flashでの表現をカッコよくみせるコツ。
決められた時間の間で変化を大きくみせること。
素早く表示されたかと思うとゆっくりと元にもどる・・というような「タメ」を作る。

すべての動きが等速だと動きが単純になってしまう。
緩急をつけることでクオリティの高いモノができる。

来週は、ヘッダー右側の「会社概要」などの5つのボタンにボタンタイプをつくり、ここに動きを入れていきます。

Flashの授業2回目でここまで進むというのは、かなりのハイスピード。
自分で復習・練習をしていかないとついていけません。

しかし、ここが踏ん張りどころ。

Flashをモノにするためには、ここでしっかりとついていかないと！！