My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

2/25 CSS基礎確認テスト / はじめてのFlash

本日の授業テーマ

  • CSS基礎確認テスト
  • Flashについて

本日の学習内容~まとめと感想~

CSS基礎確認テスト

基礎確認テストとして、以下の課題に取り組みました。

[課題04]


素材:
f:id:sntkk3:20140922103225j:plain

[HTML]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>課題04 ナビボタン</title>
<link rel="stylesheet" href="css/style4.css">
</head>
<body>
<div id="nav">
<ul>
<li id="service"><a href="#">サービス概要</a></li>
<li id="results"><a href="#">実績紹介</a></li>
<li id="pr"><a href="#">プレスリリース</a></li>
<li id="employ"><a href="#">採用情報</a></li>
<li id="company"><a href="#">会社概要</a></li>
<li id="contact"><a href="#">お問い合わせ</a></li>
<li id="sitemap"><a href="#">サイトマップ</a></li>
</ul>
</div>
</body>
</html>


[CSS]

@charset "utf-8";
/* reset */
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.5em;
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  text-align: center;
  font-weight: bold;
}
#nav {
  width: 896px;
  padding: 50px 0 0 50px;
}
#nav ul {
  overflow: hidden;
}
#nav li {
  float: left;
}
#nav li a {
  display: block;
  width: 128px;
  height: 40px;
  padding-top:5px;
  color:#FFF;
}
#nav li#service a {
  background:url(../img/btn.jpg) no-repeat 0 0;
}
#nav li#service a:hover {
  background:url(../img/btn.jpg) no-repeat -128px 0;
}
#nav li#results a {
  background:url(../img/btn.jpg) no-repeat 0 0;
}
#nav li#results a:hover {
  background:url(../img/btn.jpg) no-repeat -128px 0;
}
#nav li#pr a {
  background:url(../img/btn.jpg) no-repeat 0 0;
}
#nav li#pr a:hover {
  background:url(../img/btn.jpg) no-repeat -128px 0;
}
#nav li#employ a {
  background:url(../img/btn.jpg) no-repeat 0 0;
}
#nav li#employ a:hover {
  background:url(../img/btn.jpg) no-repeat -128px 0;
}
#nav li#company a {
  background:url(../img/btn.jpg) no-repeat 0 0;
}
#nav li#company a:hover {
  background:url(../img/btn.jpg) no-repeat -128px 0;
}
#nav li#contact a {
  background:url(../img/btn.jpg) no-repeat 0 0;
}
#nav li#contact a:hover {
  background:url(../img/btn.jpg) no-repeat -128px 0;
}
#nav li#sitemap a {
  background:url(../img/btn.jpg) no-repeat 0 0;
}
#nav li#sitemap a:hover {
  background:url(../img/btn.jpg) no-repeat -128px 0;
}

[課題07]

▼ 作成手順は以下の通り
1ボタン辺り 160px × 5 = 800pxのナビゲーションボタンを作成する
- カンバスサイズ: w 800px × h 90px 
- シェイプ(長方形)w 800px × h 40px を作成
- 上記シェイプに色(スタイル)を設定
 ※今回はUltimate Web 2.0 Layer Stylesでスタイルを設定(使い方は下記記事を参照)

(1).「表示メニュー」 -「新規ガイド」で 160pxごとに新規ガイドを作成する
(2). 各ボタンに文字を入れる
(3).「長方形選択ツール」固定 w 1px × h 39px 」で 長方形を作成 ---(A)
(4). 上記長方形の色を濃いグレーに塗りつぶし([alt] + [BS]キー)
(5). (A)の長方形をコピー → 同じ位置に貼り付け → [shift] + [→]キーで1px右横に移動 ---(B)
(6). 上記長方形の色を白に塗りつぶし([alt] + [BS]キー)
(7). (A)と(B)のレイヤー両方を選択し、[shift]キーを押しながら新規レイヤーアイコン(下図赤枠部分)に重ねる → (A)(B)レイヤーのコピーが作成される
(8). このまま[shift]+[→]キー、あるいは[→]キーで調整しながら次の縦ガイド線まで移動する
(9). 基本のナビゲーションバーが完成したら、レイヤーをグループ化、
(10). 同要領でhover用のナビゲーションバーをもう1つ作成する

f:id:sntkk3:20140922125639p:plain


[関連・参考記事]

  • Photoshopにレイヤースタイルを追加する

保存版!Photoshop用無料グラデーション750個+まとめ - Photoshop VIP
Ultimate Web 2.0 Layer Styles | Dezinerfolio

レイヤースタイルのインストール方法 | Photoshop養成ギプス


[自身 習作例]
f:id:sntkk3:20140922231920p:plain


Flashの予備知識・基本操作

 ECMAScript - Wikipedia
 JavaScript の概要 - JavaScript | MDN

  • Flash 完成形(図)から描いていく
  • プログラムとして2つの性質を同時にもっている

インタプリタ(プログラム記述ごとに機械語に逐次変換)
コンパイル(プログラムファイル完成後に機械語に一括変換)

コンパイラとインタプリタ


初期設定

「プロパティ」
f:id:sntkk3:20140922221913j:plain
 サイズ    : w 555 × 400
 フレームレート: 24/s

[F6]キー :キーフレームの挿入 (実行は[Enter]キー)


【演習】時間軸 逆転

(1)新規ファイル作成(ActionScript2.0
(2)ワークスペースを「デザイナー」に変更(「ウインドウ」メニュー)
(3)円を描く(楕円ツール)
 - 楕円ツールを選択後、線「赤 5px程度」と塗り「なし」の設定を変更する
(4)F6で「キーフレームの挿入(複製)」
(5)消しゴムツールで一部分を消す
(6)この操作を、円がなくなるまで繰り返す
(7)Enterキーを押して動きを確認する
(8)フレームレートを「24.00」から「12.00」に変更する
(9)レイヤー名をクリックし、フレームをすべて選択する
レイヤー1 「修正」- 「タイムラインーフレームの反転」
(10)再生をすると、何もない画面に円が描画されるムービーになります([Ctrl] + [Enter] 連続再生)