3月10日授業内容② DOM,時間の制御とボタンの作成

d.hatena.ne.jp

DOM(インターネット上で動的なものを作るのに使う)

DOMのidは変数の上に書かないと反映されないので注意!!


f:id:paris1204:20160311001407p:plain
f:id:paris1204:20160311001415p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DOMの記述</title>
</head>
<!--http://d.hatena.ne.jp/web-0818/20160524/p1-->
<body>



<div id="box">this is box</div>

<script>
window.onload=function(){
	
	var box=document.getElementById('box');//ここで取得するboxは文字列でなくオブジェクト
	//要素の中身を文字列で取得
	console.log(box.innerHTML);//This is box
	
	box.style.backgroundColor='yellowgreen';//CSSを変更する
	box.style.height="200px";
	box.style.width="200px";
	}//functionの閉め

</script>

</body>
</html>

d.hatena.ne.jp

f:id:paris1204:20160311001723p:plain
f:id:paris1204:20160311001731p:plain
f:id:paris1204:20160311001737p:plain
f:id:paris1204:20160311001746p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像タグの生成</title>

<script>
function showImage(){
	var htmlstr='';//文字列を初期値として設定するために''と書いているが中は空っぽなので下の変数の書き換えでは影響を与えない
	for(var i=1; i<=3;i++){
	htmlstr +='<img src="img/dom' + i + '.jpg" alt="#">';
	
	}
	document.getElementById('imageArea').innerHTML=htmlstr;
	
}//functionの閉め

</script>

</head>
<!--http://d.hatena.ne.jp/web-0818/20160525/p1-->
<body>


<button  id="btn"onclick="showImage()">読込</button>
<div id="imageArea">ここに画像が読み込まれます。</div>
</body>
</html>





Flash時間の制御とボタンの作成

①新規で開き、
時間の制御とボタンの作成 - Webデザインの勉強 | Webサイト制作科 1月20日開講クラス
の車の素材を読み込み→ステージに読み込みで開きます。
②actionレイヤーにthis.stop();を入力する。
③車のレイヤーを選択し、ライブラリのcarのオブジェクトをダブルクリックし、車のimgが現れたら、ドラッグしてインスタンスにペーストする。
④車のレイヤーで希望するところをクリックしてキーフレームの挿入をする。
最初のフレームに車のスタート位置。最後のフレームに車のストップ位置を設定する。
⑤ボタンレイヤーを選択し、テキストツールでSTARTを入力し色をプロパティでつける。
ctrl + X で切り取りペーストすることで中心に配置できる。
⑥STARTを選択した状態でシンボルに変換する。
startのライブラリに入り、アップ、オー、ダウン、ヒットの全てにキーフレームを挿入する。
⑦ライブラリのstartのオブジェクトを選択した状態で複製し、名前をSTOPに変える。この流れでBACKも複製する。
⑧STOPとBACKのライブラリに入りアップ、オー、ダウン、ヒットの文字と色を変更する。
インスタンスへ戻り、スタートを左下、ストップを真ん中、バックを右下に配置して、全部選択した状態で垂直の中央ぞろえにする。
⑩スタートボタンクリック
on (release) {

play();
}

スットプボタンクリック
on (release) {
stop();
}


バックボタンクリック
on (release) {
gotoAndStop(1);
}
をそれぞれアクションで入力をする。

ctrl + enterで動きを確認して終了。