第一章 步入web的殿堂
1.一個空白的HTML頁面與一個空白的flash
html:
我們可以使用Dreamweaver,Notepad,EditPlus…這些文字工具建立一個空白的網頁,結構類似如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>無標題文件</title>
</head>
<body>
</body>
</html>
使用瀏覽器檢視時我們看到的一個空白的頁面,沒有內容(body中沒有新增任何文字或標籤)。
Flash:
對比下flash,我們開啟Flash8(文章採用flash8+as2,思想也同樣適用於高版本的flash或指令碼),新建一個空白的flash文件,釋出使用flash player檢視,得到的一個空白的flash,沒有內容。
2.Hello World
和學習其他語言一樣,我們還是一個簡單的hello world開始我們這一小節的講解。
html:
我們在<body>標籤中新增內容: Hello World!
好了,儲存html文件,用瀏覽器檢視下吧,是不是看到了如上的內容啊。
Flash:
那麼flash怎麼辦的,我們使用上面新建的flash文件,選擇文字工具,在舞臺上打上: Hello World!,為了和html的保持一致,我把flash的這個文字座標改成0,0了。
好了釋出下falsh吧,看看是不是得到了一樣的東西呢。
3.使用指令碼動態的設定文字
html:
為了操作方便我把html的文字加了個標籤,如下:
<span id=”hello_txt”>Hello World!</span>
我們新增點js指令碼:
<script type=”text/javascript”>
window.onload=function()
{
document.getElementById(“hello_txt”).textContent=”你好,世界!”;
}
</script>
注意:IE瀏覽器,屬性是innerText而不是textContent,上面的不修改的話需要在標準瀏覽器裡瀏覽,未作瀏覽器檢測。
Flash:
接著上面的flash,我們把文字改為動態文字,例項名設定為hello_txt,在主時間軸第一幀新增指令碼:
_root.onLoad=function()
{
hello_txt.text=”你好,世界!”;
}
ctrl+Enter檢視下flash吧,是不是同樣的效果呢。
4.使用按鈕動態設定
Html:
我們看看使用按鈕動態修改,而不是頁面載入時設定,修改如下:
我們加了一個Button.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>無標題文件</title>
<script type=”text/javascript”>
function changeChinese()
{
document.getElementById(“hello_txt”).textContent=”你好,世界!”;
}
</script>
</head>
<body>
<span id=”hello_txt”>Hello World!</span>
<button onclick=”changeChinese()”>切換中文</button>
</body>
</html>
好了,火狐裡測試下。
Flash:
我們也在flash裡新增一個按鈕,這裡不做一個按鈕了,元件裡有個現成的,
視窗》元件,開啟元件皮膚,裡面有個UI介面組,展開拖一個Button到舞臺。
Label改為“切換中文”(在元件引數裡改哦),選擇這個按鈕,開啟動作皮膚:
加入
on (click) {
_parent.hello_txt.text=”你好,世界!”;
}
測試看下吧。(注意不要忘了刪除之前在時間軸上新增的指令碼,這裡沒有把指令碼放在時間軸,儘量保持和上面的js保持一致哈。