Webスクールレベルの授業が格安で学べるWebデザインのオンライン講座。Illustratorでロゴやパーツを作り、PhotoshopでWebデザイン、その後、HTML・CSSでのコーディングまでの現場レベルのWeb制作を効率的に学べる実践編 Webスクールレベルの授業が格安で学べるWebデザインのオンライン講座。

HOME >> Webデザイナースクール体験記スタンダードテクニックユニット >> 【Webスタンダードテクニックユニット 教程19 Flash】

【Webスタンダードテクニックユニット 教程19 Flash】

【Webスタンダードテクニックユニット 教程19 Flash】

flashのレイアウト今週はFlashの2回目。
ナビゲーションのエリアを使い文字の表現の仕方を交えながらFlashの基本を身につけていきます。
FireworksからWebサイトのヘッダー部分をコピーして、Flashにペースト。
タイトル部分に透明感をもたせ、動きの変化をつけていきます。
完成ファイルはこちら

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

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

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

Fireworks画面 flashのベースとなるレイアウト

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

Webデザイナースクール名古屋 flash

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

Webデザイナースクール名古屋 flash

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

Webデザイナースクール名古屋 flash

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

Webデザイナースクール名古屋 flash

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

Webデザイナースクール名古屋 flash

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

Webデザイナースクール名古屋 flash

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

Webデザイナースクール名古屋 flash

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

Webデザイナースクール名古屋 flash

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

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

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

Webデザイナースクール名古屋 flash

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

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

Webデザイナースクール名古屋 flash

Webデザイナースクール名古屋 flash

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

Webデザイナースクール名古屋 flash

Webデザイナースクール名古屋 flash

完成ファイルはこちら

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

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

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

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

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

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


Webデザイナースクール探しのコツ

ウェブデザイナースクールを探す時、まずあなたはどんな情報を重視しますか?

Webデザイナーと一言でいっても、 Webプロデューサー、Webディレクター、Webプログラマー、派遣でWeb制作、企業内でWeb担当・・といったように就職先や職種など様々な道があります。

無駄なく、すべてを学べる最適な学習プランを見つけるコツはWeb講座専用の資料を入手することです。

Web講座専用の資料を請求すると、Webデザイナーとして目指すクリエイターになるには、何を勉強し、どんなスキルを習得すればよいのか?
また、それには費用はいくらかかるのか?
など無駄なく、すべてを学べる最適な学習プランをチェックできます。

また、講座の詳しい説明はもちろん、修了生の感想や活躍状況など ネットや広告には書かれていないプロならではの業界最新事情なども手に入ります。

ヒューマンアカデミーには、無料資料が用意されていますので、スクール探しの情報収集として、まずは最新情報を無料で取り寄せてみましょう!!


ウェブデザイナー スクール ヒューマンアカデミー名古屋


ウェブデザイナー スクール ヒューマンアカデミー名古屋ヒューマンアカデミWeb講座資料請求(無料)>>>

ウェブデザイナー スクール ヒューマンアカデミー名古屋Webのお仕事とは?

ウェブデザイナー スクール ヒューマンアカデミー名古屋Web講座コース料金一覧

ウェブデザイナー スクール ヒューマンアカデミー名古屋Web講座の特徴・講師紹介

ウェブデザイナー スクール ヒューマンアカデミー名古屋Web関連試験資格情報


ウェブデザイナー スクール ヒューマンアカデミー名古屋ヒューマンアカデミーWeb講座資料請求(無料)はこちらから>>>

« 【Webスタンダードテクニックユニット 教程18 Flash】 | HOMEへ | 【Webスタンダードテクニックユニット 教程20 Flash】 »

【Webデザイナースクール体験記スタンダードテクニックユニットカテゴリーの関連記事】

【Webスタンダードテクニックユニット 教程22 Flash・Fireworks】
【Webスタンダードテクニックユニット 教程21 Flash・HTML・CSS】
【Webスタンダードテクニックユニット 教程20 Flash】
【Webスタンダードテクニックユニット 教程19 Flash】
【Webスタンダードテクニックユニット 教程18 Flash】
【Webスタンダードテクニックユニット 教程17 実践的レイアウトその6】
【Webスタンダードテクニックユニット 教程16 実践的レイアウトその5】
【Webスタンダードテクニックユニット 教程15 実践的レイアウトその4】
【Webスタンダードテクニックユニット 教程14 実践的レイアウトその3】
【Webスタンダードテクニックユニット 教程13 実践的レイアウトその2】
Webスタンダードテクニックユニット 教程12 実践的レイアウト FireworksとDreamwerverの連動
Webスタンダードテクニックユニット 教程11 実践的レイアウト、デザイン
Webスタンダードテクニックユニット 教程10 テーブルレイアウト データ用テーブル、入れ子テーブル
Webスタンダードテクニックユニット 教程9 テーブルレイアウト、テーブルタグの詳細、FFFTP
Webスタンダードテクニックユニット 教程8 テーブルレイアウト
Webスタンダードテクニックユニット 教程7 ブラウザとソースコード


HOMEへ   ▲画面上へ
Hatenaブックマークに追加 このエントリーをHatenaブックマークに追加

Yahoo!ブックマークに登録 Yahoo!ブックマークに登録  ブックマークに追加する

トラックバック

このエントリーのトラックバックURL:
http://www.pro-web.info/mt/mt-tb.cgi/18

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)