6/12のまとめ

授業

ActionScript

  • switch文 :分岐の条件は値の一致
  • case()の後はコロンを使う（セミコロンではない）
if文
var key:String = "B";
var message:String;

if(key == "A") {
	message = "AはAlphaのA";
} else if (key == "B") {
	message = "BはBravoのB";
} else if(key == "C") {
	message = "CはCharlieのC";
}
else  {
	message = "知らない文字です";
}
trace(message);
switch文
var key:String = "B";
var message:String;

switch(key) {
	case "A":
	message = "AはAlphaのA";
	brake;
	case "B":
	message = "BはBravoのB";
	brake;
	case "C":
	mesage = "CはCharlieのC";
	brake;
	default:
	message = "知らない文字です";
	brake;
}
trace(message);
  • インクボトルツール: 面に輪郭を付けられる

簡単なJavaScriptを使って画像置換させる

  • Photoshopで数値固定のシェイプで長方形を作りスタイルを適用
  • シェイプの上に新規調整レイヤーを作成
  • 色相彩度で変化を付けてマウスオーバー用にする
  • Dreamweaver上で画像を隣からドラッグすると自動的にsrcなどができる
  • altの後ろに↓を打つ
<onMouseOver="this.src='hover用画像のパス'" onMouseOut="this.src='通常画像のパス'">
  • " "の中（画像のパス）は' 'で囲む
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>画像置換</title>
  <style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	img {
		border: none;
	}
	nav {
		width: 800px;
		height: 60px;
		margin: 10px auto;
	}
	ul {
		list-style-type: none;
  	}
	li {
		float: left;
                width: 160px;
                height: 60px;
	}
  </style>
</head>
<body>
<nav>
<ul>
<li><a href="#"><img src="images/btn01.jpg" width="160" height="60" alt="" onMouseOver="this.src='images/btn_o01.jpg'" onMouseOut="this.src='images/btn01.jpg'"></a></li>

<li><a href="#"><img src="images/btn02.jpg" width="160" height="60" alt="" onMouseOver="this.src='images/btn_o02.jpg'" onMouseOut="this.src='images/btn02.jpg'"></a></li>

<li><a href="#"><img src="images/btn03.jpg" width="160" height="60" alt="" onMouseOver="this.src='images/btn_o03.jpg'" onMouseOut="this.src='images/btn03.jpg'"></a></li>

<li><a href="#"><img src="images/btn04.jpg" width="160" height="60" alt="" onMouseOver="this.src='images/btn_o04.jpg'" onMouseOut="this.src='images/btn04.jpg'"></a></li>

<li><a href="#"><img src="images/btn05.jpg" width="160" height="60" alt="" onMouseOver="this.src='images/btn_o05.jpg'" onMouseOut="this.src='images/btn05.jpg'"></a></li>
</ul>
</nav>
</body>
</html>

Dreameweaverで簡単に画像置換させる

  • ナビの一つを選択し、オプションからタグセレクタでimgを選択
  • IDを打ち、ビヘイビアーからスワップイメージ
  • 参照から置換する画像を選択してokボタンを押す
  • 注: ビヘイビアーは基本的に使わない
CSSスタイルパネル
  • スタイルを適用したい所をタグセレクタで選択
  • 新規スタイルを押す(右下の＋)
  • 複合、省略、このテキスト内 でokすると、CSSルール定義で細かく選べる
  • 適用後はプロパティから変えられる
ほか
  • hover用の画像名
  • _o (例: btn01_o )
  • _on
  • ctrl + F: 検索および置換
  • 上で検索したものを下で置換する