第一章 步入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保持一致哈。
本文转自 xcf007 51CTO博客,原文链接:http://blog.51cto.com/xcf007/292810
,如需转载请自行联系原作者