Flashの基礎&JavaScriptによる画像置換
JavaScript ActionScript(Flash)
↓ ↓
DOM AS3.0(Java)
↓
基本的に完成形から作成し、タイムラインを反転させることで作りこむ
ライブラリ(オブジェクト)
ステージ(インスタンス)
オブジェクトをステージへ移動させることで、効果を得ることできる
ライブラリのアイコンをダブルクリックで編集できる
挿入→新規シンボル→ボタン
ActionScriptパネルへコマンド投入することで動きを制御する
[Ctrl]+[Alt]+[Enter] でシーンプレビューの表示
[F6] でキーフレームの挿入
・TIPS
ビヘイビアーで作成したJavaScriptははビヘイビアーで削除可能
ウインドウ→ビヘイビアー を開き削除したい行をマウスで選択し [-] で削除
MM_????? で書かれているScriptの削除に使う
MMは旧MacroMedia製を意味する
オブジェクトは、基本的にカット&ペーストで中央座標へ移動する
//////////////////////////////////////////////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JAVAScriptで画像表示</title>
<style>
/* reset */
html, body, div, ul, li {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
ul {
list-style: none;
overflow: hidden;
}
/* layout */
#nav {
margin: 50px 0 0 50px;
}
#nav li {
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div><!--header-->
<div id="nav">
<ul>
<li><a href="#"><img src="img/home.jpg" alt="ホーム" onmouseover="this.src='img/home_hover.jpg'" onmouseout="this.src='img/home.jpg'"></a></li>
<li><a href="#"><img src="img/food.jpg" alt="カフェフード" onmouseover="this.src='img/food_hover.jpg'" onmouseout="this.src='img/food.jpg'"></a></li>
<li><a href="#"><img src="img/drink.jpg" alt="カフェドリンク" onmouseover="this.src='img/drink_hover.jpg'" onmouseout="this.src='img/drink.jpg'"></a></li>
<li><a href="#"><img src="img/info.jpg" alt="インフォメーション" onmouseover="this.src='img/info_hover.jpg'" onmouseout="this.src='img/info.jpg'"></a></li>
<li><a href="#"><img src="img/contact.jpg" alt="お問い合わせ" onmouseover="this.src='img/contact_hover.jpg'" onmouseout="this.src='img/contact.jpg'"></a></li>
</ul>
</div><!--nav-->
<div id="wrapper">
<div id="content">
</div><!--content-->
</div><!--wrapper-->
<div id="footer">
</div><!--footer-->
</div><!--container-->
</body>
</html>