Webサイト制作科 | 受講記録 | 苦楽中道

2014年01月27日開講の求職者支援訓練(フェリカTA_Webサイト制作科)における受講メモと習熟度記録

Flashの基礎&JavaScriptによる画像置換

ECMA Script(エクマスクリプト

JavaScript   ActionScriptFlash

  ↓        ↓

DOM      AS3.0(Java

  ↓

jQuery

 

Flash

インタプリタコンパイルを同時に行っている

基本的に完成形から作成し、タイムラインを反転させることで作りこむ

 

ライブラリ(オブジェクト)

ステージ(インスタンス

オブジェクトをステージへ移動させることで、効果を得ることできる

ライブラリのアイコンをダブルクリックで編集できる

挿入→新規シンボル→ボタン

ActionScriptパネルへコマンド投入することで動きを制御する

 

[Ctrl]+[Alt]+[Enter] でシーンプレビューの表示

[F6] でキーフレームの挿入 

 

・TIPS

Dreamweaver

ビヘイビアーで作成したJavaScriptははビヘイビアーで削除可能

ウインドウ→ビヘイビアー を開き削除したい行をマウスで選択し [-] で削除

MM_????? で書かれているScriptの削除に使う

MMは旧MacroMedia製を意味する

 

オブジェクトは、基本的にカット&ペーストで中央座標へ移動する

 

//////////////////////////////////////////////////////////////////////////////////////////////////////

f:id:sophisticatedweapon:20140225145722j:plain

<!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>