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

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

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

【Webスタンダードテクニックユニット 教程20 Flash】
Webデザイナースクール名古屋 Flash講座Flashの3回目。
先週の続きで、今週はヘッダー右側の「会社概要」などの5つのボタンにボタンタイプをつくり、ここに動きを入れていきます。
ページが表示された時、タイトル部分の動きが止まると同時くらいに上部から5つのボタンが順番におりてくるように設定。
マウスオーバー時のカラーにも変化をつけます。
完成ファイルはこちら

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

・ボタンのシンボル化、トウィーン設定。

・シンボル編集エリアでのFlashの画面に慣れること。
Flashのシンボル編集エリアは、タイムラインとプレビュー画面の2つの画面を見ながらの操作になります。
自分が今、どちらのエリアをみているのか、どのシンボルを編集しているのかを把握する訓練を兼ねながら、あえてローテクな方法で進みました。

・アクションスクリプト。

Flash
■ボタンのシンボル化と編集エリア

・ボタンのシンボル化
マウスの動作に応じて対応するボタンを作成するためには、まず「ボタンシンボル」に変換しておく必要があります。

Fireworksからペーストした時点では、ボタンは自動的にグラフィックパーツになっているので、各文字をシンボルに変換していきます。

各文字を選択してF8キーを押して、シンボル名をつけます。
ここでは「ボタン01」としました。

【タイプ】はボタンを選択し、【基準点】は左上。

・シンボル化と編集エリア
「会社概要」ボタンをダブルクリックすると、タイムラインの上に「シーン1」「ボタン01」と表示され、シンボル編集画面に切り替わります。
(ライブラリーで編集したいシンボルをダブルクリックしてもできます。)

タイムラインにはフレーム番号のかわりに【アップ】【オーバー】【ダウン】【ヒット】と表示されます。

・オーバー時の設定
マウスオーバーに対応するボタンの設定をしていきます。

【アップ】はじめに表示されている状態。
【オーバー】マウスポインタを上に重ねた時の状態。
【ダウン】クリックした時の状態。
【ヒット】オーバーやダウンの適用される領域(ヒットエリア)

【オーバー】のフレームで右クリックし、【キーフレームの挿入】を選択。
【アップ】のオブジェクトが【オーバー】に複製されます。

【オーバー】のフレームを選択。
次に下部のシンボルボタン「会社概要」を選択し、詳細カラー設定でカラーを調整。

【ダウン】フレームで右クリックし、【キーフレームの挿入】を選択。
【オーバー】のオブジェクトが【ダウン】に複製されます。
【オーバー】のカラーを変える場合は、ここで変更します。

Webデザイナースクール名古屋 Flash講座

残りの4つのボタンも同様に設定。

■トウィーン設定
ボタンをアニメーションとして動かすためにトウィーン設定をしていきます。

配分したい5つのボタンを選択し、修正→タイムライン→レイヤーに配分。

この時点でのレイヤー名を見るとグレーの帯となっています。
まだ、トウィーン設定をしていないので、何も計算されていない状態です。

Webデザイナースクール名古屋 Flash講座

トウィーン設定(モーション)にするには、

今の状態だとフレーム1から始まってしまうので、5つのボタン達をフレーム45まで移動させます。
ボタン01からボタン05までのフレーム部分をまとめて選択し、45まで移動させます。

Webデザイナースクール名古屋 Flash講座

選択されたままの状態で、プロパティーウィンドウのトウィーン設定をモーションとします。

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

この状態では、ボタンの動きは等速で単純になってしまうので、動きを確認しながら任意でキーフレームを挿入していきます。
ここでは、フレーム63辺りにキーフレームを挿入し、そのままフレーム43くらいまで左にドラック。

Webデザイナースクール名古屋 Flash講座

これで、ボタンは早く現れ、ゆっくりと落ちていくというタメができました。

徐々に降りてくるように階段状にずらします。

Webデザイナースクール名古屋 Flash講座


表示させていたいパーツ類にフレームを挿入。
Webページが表示された時点では、ボタンは領域外に置きたいので、フレーム45を選択肢、y-75とします。

Webデザイナースクール名古屋 Flash講座

■アクションスクリプト

・フレームアクション
今の状態では、ページが表示されている限り同じ動きを繰り返してしまうので、アクションフレームでフレーム75の時点でストップするように命令を入れる。

Webデザイナースクール名古屋 Flash講座

・オブジェクトアクション
ボタンをクリックしたら特定のWebページが開くように「アクション」の設定を行います。

Webデザイナースクール名古屋 Flash講座

flash_1028_11.jpg

完成ファイルはこちら


今日は、先週、先々週習った基本を踏まえながら、これにさらに実戦的な応用を学びましたが・・・
んーーーすごいスピード。この3時間はめちゃくちゃ集中しています。

わからないところは、そのままにしておくと、どんどんわからなくなってしまうので、その場ですぐに質問。
すると、後からではなく、そこで中断して丁寧に教えてもらえます。
ここが、通学、少人数制のよいところですね。

来週は、ここで作ったswfファイルをhtmlに組み込み、複数ページ展開していきます。


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

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

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

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

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

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

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


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


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

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

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

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

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


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

« 【Webスタンダードテクニックユニット 教程19 Flash】 | HOMEへ | 【Webスタンダードテクニックユニット 教程21 Flash・HTML・CSS】 »

【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/17

コメントを投稿

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