flash+txt教程 As2

想从外部文件(例如文本文件,或由 ColdFusion、CGI 脚本、ASP、PHP 或 Perl 脚本生成的文本)中读取数据,并设置 Flash Player 的某个级别中的变量的值。我们一般要用到
指 定的 URL 处的文本必须为标准的 MIME 格式 application/x-www-form-urlencoded(CGI 脚本所使用的一种标准格式)。可以指定任意数量的变量。例如,下面的代码定义了多个变量:loadVariablesNum 函数 和loadVariables 函数
loadVariablesNum 函数
loadVariablesNum(url:String, level:Number, [method:String]) : Void此函数还可用于使用新值更新活动 SWF 文件中的变量。
参数
url:String – 变量所处位置的绝对或相对 URL。如果发出此调用的 SWF 文件正在 Web 浏览器上运行,则 url 必须与 SWF 文件位于同一个域中;有关详细信息,请参见”说明”部分。
level:Number – 一个整数,指定 Flash Player 中接收这些变量的级别。
method:String [可选] – 指定用于发送变量的 HTTP 方法。该参数必须是字符串 GET 或 POST。如果没有要发送的变量,则省略此参数。GET 方法将变量附加到 URL 的末尾,它用于发送少量的变量。POST 方法在单独的 HTTP 标头中发送变量,它用于发送长字符串的变量。
loadVariables 函数
loadVariables(url:String, target:Object, [method:String]) : Void
参数
url:String – 变量所处位置的绝对或相对 URL。如果发出此调用的 SWF 文件正在 Web 浏览器上运行,则 url 必须与 SWF 文件位于同一个域中;有关详细信息,请参见”说明”部分。
target:Object – 指向接收所加载变量的影片剪辑的目标路径。
method:String [可选] – 指定用于发送变量的 HTTP 方法。该参数必须是字符串 GET 或 POST。如果没有要发送的变量,则省略此参数。GET 方法将变量附加到 URL 的末尾,它用于发送少量的变量。POST 方法在单独的 HTTP 标头中发送变量,它用于发送长字符串的变量。
如果要将变量加载到目标影片剪辑中,请使用 loadVariables() 而不是 loadVariablesNum()。
了解了这两个函数后我们就可以用它实现载入外部TXT文件。
准备工作:
创建一个文本文件t.txt,内容是t=xxxxxxxxxxxxxxxxxxxxxx。
(注意:“=”前后不能有空格。)
示例:t=这正在制作载入外部TXT文本文件的效果
FLASH部分:
这里直接在_root里创建文本域content_txt,使用loadVariables()方法。
System.useCodepage = true;
createTextField(“content_txt”,0,0,0,200,0);
/*创建一个新文本字段的深度为0 x 坐标为0 y 坐标为0字段的宽度为200字段的高度为0的content_txt /*
content_txt.wordWrap = true;
content_txt.variable = “t”;
content_txt.autoSize = “left”;
content_txt.selectable = false;
loadVariables(“t.txt”, _root);
装载t.txt后,其t的内容自动赋值给_root.content_txt的变量t。
这种方法不需要在场景内建立任何动态文本框。加载t.txt中T的内容直接显示在主场景上

Flash是支持少量的html语法的。
如果你对html语法不太熟悉的话,先用网页制作工具frontpage等建一个简单的文本,
在普通页面里给它加上超连接、字体颜色、下划线等非常简单。
frontpage里html显示如下:<p align=left><font color=’#FF6699′>载入TXT实验</font></p>
给变量t赋值如下:
t = “<p align=left><font color=#FF6699>载入TXT实验</font></p>\r\n
<p>***********************************************************************************。</p>\r\n
<p align=right><a href=http://www.578453175.com/>
<font color=#008080><u>转载网址</u></font></a></p>”

FLASH的AS:
在主场景第一帧上:
loadVariablesNum(“t.txt”, 0); //把t.txt载入进FLASH
在第二帧上:
t.htmltext = t;
stop();
同时把实例名为T的动态文本框加入些帧(在flash里建动态文本框,实例名为t。设置多行显示,把html等4个选项的勾全选。 )
这样,FLASH就能够把简单的HTML代码所标识的效果反映出来。
上 面几节flash+txt教程我们了解了FLASH怎么调用外部的TXT文本文件,这样更新网站内容时,只需打开这个TXT更改内容就可以了。但是我们需 要把TXT文件打开才能更改,有没有办法在后台里直接更新TXT文本内容呢,或者直接用FLASH来生成这个TXT。这节我教大家用FLASH通过ASP 直接生成TXT的文本文件。(可用于制作留言本)

准备工作:
1、一个ASP文件用于写入数据的用途:guest.asp
<%
subject = request(“sub”)
name = request(“name”)
text = request(“text”)
action = request(“action”)

if (action <> “add”) then

set fin = Server.CreateObject(“Scripting.FileSystemObject”)
filepath = Server.MapPath(“guest.txt”)
set f = fin.OpenTextFile(filepath)
buf = f.readAll
response.write(buf)

f.close
end if

if (action = “add”) then

set fin = Server.CreateObject(“Scripting.FileSystemObject”)
filepath = Server.MapPath(“guest.txt”)
set f = fin.OpenTextFile(filepath)
line = f.readline
total = int(mid(line,8))

buf = f.readAll

f.close

set fout = Server.CreateObject(“Scripting.FileSystemObject”)

Application.lock

filepath = Server.MapPath(“guest.txt”)
set f = fout.CreateTextFile(filepath,TRUE)

total = total + 1
f.writeline “&total=”&total
f.writeline “&sub”&total&”=”&subject
f.writeline “&name”&total&”=”&name
f.writeline “&text”&total&”=”&text
f.write buf

f.close

Application.unlock

response.write(“&added=1”)
end if
%>

2、文本文件(数据库用途)guest.txt
内容:
&total=0
先定义数据为0
FLASH部分:
我们创建三个数据写入TXT,分别是:sub(主题),name(名字),text(内容);然后total数据自动增加.
在FLASH里的第一帧,我们先把这些数据初始化,并调用ASP文件读取TXT里的数据。
在第一帧上写:
total = 0;
added = 0;
sub = “”;
name = “”;
text = “”;
backmethod = 0;
r = random(65500);
loadVariables(“guest.asp?action=” add r, “”);

在第二帧上:
接着我们创建几个输入文本框,把要创建的数据提交上去
变量名为sub的输入文本框
变量名为name的输入文本框
变量名为text的输入文本框
一个提交按钮,提交钮
on (release) {
gotoAndPlay(“do_insert”);
}
把过程交给帧实例名为do_insert的去处理,当然你也可以直接提交处理,但这样看起来清楚些。
在第三帧上:
if ((sub eq “”) or (name eq “”) or (text eq “”)) { //判断各项数据填写是否为空
gotoAndPlay(“error”);//填写为空的话就转到帧实列名为error的处理效果
} else {
temp = “正在向服务器添加数据……”;//或者动态文本text里出现提示语
loadVariables(“guest.asp?action=add”, “”, “POST”);
gotoAndPlay(“wait2”);//转到帧实列名为wait2的处理效果
}
并对该帧命名为do_insert,在此帧上创建一个动态文本,变量命为text。
在第四帧上创建ERROR错误出现效果,在第五帧上创建WAIT2等待写入的效果。
这样,就完成了,用FLASH生成一个叫guest.txt的文件的效果,并且每次写入新信息,会在该txt文件里加一条新的信息。

Flash Player 与 HTML 容器之间发送数据的过程演示

以下示例演示了在 Flash Player 与 HTML 容器之间发送数据的过程。package {
import flash.display.Sprite;
import flash.events.*;
import flash.external.ExternalInterface;
import flash.text.TextField;
import flash.utils.Timer;
import flash.text.TextFieldType;
import flash.text.TextFieldAutoSize;

public class ExternalInterfaceExample extends Sprite {
private var input:TextField;
private var output:TextField;
private var sendBtn:Sprite;

public function ExternalInterfaceExample() {
input = new TextField();
input.type = TextFieldType.INPUT;
input.background = true;
input.border = true;
input.width = 350;
input.height = 18;
addChild(input);

sendBtn = new Sprite();
sendBtn.mouseEnabled = true;
sendBtn.x = input.width + 10;
sendBtn.graphics.beginFill(0xCCCCCC);
sendBtn.graphics.drawRoundRect(0, 0, 80, 18, 10, 10);
sendBtn.graphics.endFill();
sendBtn.addEventListener(MouseEvent.CLICK, clickHandler);
addChild(sendBtn);

output = new TextField();
output.y = 25;
output.width = 450;
output.height = 325;
output.multiline = true;
output.wordWrap = true;
output.border = true;
output.text = “Initializing…\n”;
addChild(output);

if (ExternalInterface.available) {
try {
output.appendText(“Adding callback…\n”);
ExternalInterface.addCallback(“sendToActionScript”, receivedFromJavaScript);
if (checkJavaScriptReady()) {
output.appendText(“JavaScript is ready.\n”);
} else {
output.appendText(“JavaScript is not ready, creating timer.\n”);
var readyTimer:Timer = new Timer(100, 0);
readyTimer.addEventListener(TimerEvent.TIMER, timerHandler);
readyTimer.start();
}
} catch (error:SecurityError) {
output.appendText(“A SecurityError occurred: ” + error.message + “\n”);
} catch (error:Error) {
output.appendText(“An Error occurred: ” + error.message + “\n”);
}
} else {
output.appendText(“External interface is not available for this container.”);
}
}
private function receivedFromJavaScript(value:String):void {
output.appendText(“JavaScript says: ” + value + “\n”);
}
private function checkJavaScriptReady():Boolean {
var isReady:Boolean = ExternalInterface.call(“isReady”);
return isReady;
}
private function timerHandler(event:TimerEvent):void {
output.appendText(“Checking JavaScript status…\n”);
var isReady:Boolean = checkJavaScriptReady();
if (isReady) {
output.appendText(“JavaScript is ready.\n”);
Timer(event.target).stop();
}
}
private function clickHandler(event:MouseEvent):void {
if (ExternalInterface.available) {
ExternalInterface.call(“sendToJavaScript”, input.text);
}
}
}
}为了测试前面的 ActionScript 代码,请使用以下 HTML 模板嵌入生成的 SWF 文件: <!– saved from url=(0014)about:internet –>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>ExternalInterfaceExample</title>
<script language=”JavaScript”>
var jsReady = false;
function isReady() {
return jsReady;
}
function pageInit() {
jsReady = true;
document.forms[“form1”].output.value += “\n” + “JavaScript is ready.\n”;
}
function thisMovie(movieName) {
if (navigator.appName.indexOf(“Microsoft”) != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
function sendToActionScript(value) {
thisMovie(“ExternalInterfaceExample”).sendToActionScript(value);
}
function sendToJavaScript(value) {
document.forms[“form1”].output.value += “ActionScript says: ” + value + “\n”;
}
</script>
</head>
<body onload=”pageInit();”>

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
id=”ExternalInterfaceExample” width=”500″ height=”375″
codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab”>
<param name=”movie” value=”ExternalInterfaceExample.swf” />
<param name=”quality” value=”high” />
<param name=”bgcolor” value=”#869ca7″ />
<param name=”allowScriptAccess” value=”sameDomain” />
<embed src=”ExternalInterfaceExample.swf” quality=”high” bgcolor=”#869ca7″
width=”500″ height=”375″ name=”ExternalInterfaceExample” align=”middle”
play=”true” loop=”false” quality=”high” allowScriptAccess=”sameDomain”
type=”application/x-shockwave-flash”
pluginspage=”http://www.macromedia.com/go/getflashplayer”>
</embed>
</object>

<form name=”form1″ onsubmit=”return false;”>
<input type=”text” name=”input” value=”” />
<input type=”button” value=”Send” onclick=”sendToActionScript(this.form.input.value);” /><br />
<textarea cols=”60″ rows=”20″ name=”output” readonly=”true”>Initializing…</textarea>
</form>

</body>
</html>

FLASH起步AS2.0教程

1.你先学会加动作的三种方式:在帧上加,在mc上加,在按钮上加.用play stop goto这三
个命令反 复练习.不要用太多的命令给自己吃迷晕药.用实例练,不要空练.
2.会了我说的1后,要学给按钮加动作的8种方法和给mc加的9种方法.
3,会了我说的2了,就要学个编程最基础最重要的东西—-路径的描述(能看懂就能用)

1> _root.mc1.mc2. … mcn.play()[或stop(), _x, …….]
2>_parnet
3>this
4>mc1.mc2. …
5>_leveln.mc1.mc2. … mcn.play()[或stop(), _x, …….]

练习这样个实例对你也许有帮助, 把一首你喜欢听的歌随意放在某个mc中,随
意地在某个mc或按钮上加动作去控制它,想让它停就停,想让它放就放.
4。遇到问题,自己想办法解决,不要老是依靠别人,在自己做过之后还是不行的话可就要发问拉,当然问的方法要好多种,这里就不说拉!
5.要自强自信,不要迷信洋人的东东,活学活用重在理
6.了解代码执行的先后顺序:
图层默认的是从下向上执行
level是从下向上执行
帧是随实际播放顺序执行
代码本身从上向下一行一行地执行
7.了解两种坐标系统:
场景下的坐标,o点在左上角,y轴向下是增大 x向右是增大
组件的坐标,o点在组件中心,y轴向下是增大 x向右是增大
8.了解三种文本域
静态文体域:和排版软件的文字工具一样.
动态文本域和输入文本域:其实就把它们看是两种变量,只不过是可见的变量,
9.详细了解GOTO语句
prevFrame()
跳至并停止在前一祯。
nextFrame()
跳至并停止在下一祯。
prevScene()
跳至并停止在前一场景的第1帧。
nextScene()
跳至并停止在下一场景的第1帧。
gotoAndPlay([scene,] frame)
跳至scene场景(省略表示当前场景)的frame帧并播放。
gotoAndStop([scene,] frame)
跳至scene场景(省略表示当前场景)的frame帧并停止。
10,了解MC的各种可改写的属性
_x 中心点所在相对X坐标(象素单位)
_y 中心点所在相对Y坐标(象素单位)
_xscale 横向缩放比例,初始为100
_yscale 纵向缩放比例,初始为100
_rotation 相对旋转角度(度单位)
_width 相对显示宽度(象素单位)
_height 相对显示高度(象素单位)
_alpha 显示透明度(0~100)
_visible 是否可见
_focusrect 是否显示焦点框
_name 实例名称
11,三大纪律:1>写代码时一定要用英文(如EN CH)输入法
2>必须要有唯物主义思想,没有加载的MC是不可以更改它的属
性,更不可以写代码去控制它。这个问题较难掌握,高手有时也会
犯,道理就是先有吃的才能请客吃,啥也没有请客吃什么呢
3>操作什么一定要选什么(实际上哪个软件也要这样)。在MX中加代
码时如不选,就一定要写明名称,实际上也是一种先择。
12,八项注意:1>按钮不能盖着输入文本,动态文本和输入文本域不能盖着按钮
2>用loadMoie时LEVEL1及以上的文件尽量少用大隐型按钮
3>从一个文件中复制MC实例到别一个文件中时,尽量复制帧,而不能直接
复制实例,
4>从一个文件中复制MC实例到别一个文件中时,要先把目标文件中的符
号库中原有的符号,装进资夹里,很多网友这个问题上上过当吧?

5>….. ActionScript的基本语法规则
使用ActionScript编写脚本时,如果使用正常模式的动作面板,通过菜单和列表选择选项,可以创建简单的动作。要想用ActionScript编写功能强大的脚本,你就必须深入了解和学习Flash MX的ActionScript脚本语言。
像 其它脚本语言一样,ActionScript也有变量、函数、对象、操作符、保留关键字等语言元素,有它自己的语法规则。ActionScript允许用 户创建自己的对象和函数。ActionScript的语法和风格与javascript非常相似,但不完全相同。ActionScript拥有自己的句法 和标点符号使用规则,这些规则规定了一些字符和关键字的含义,以及它们的书写顺序。例如,在英语中用句号结束一个句子,而在ActionScript中则 用分号结束一个语句。
下面列出的是ActionScript的一些基本语法规则,对于比较比较特别的规则,请参阅ActionScript词典。
1.点语法
在 ActionScript中,点(.)被用来指明与某个对象或电影剪辑相关的属性和方法。它也用标识指向电影剪辑或变量的目标路径。点语法表达式由对象或 电影剪辑名开始,接着是一个点,最后是要指定的属性、方法或变量。例如,表达式ballMC.x是指电影剪辑实例ballMC的_X属性,_X电影剪辑属 性指出编辑区中电影剪辑的X轴位置。
例如,submit是在电影剪辑form中设置的一个变量,而form又是嵌套在电影剪辑shoppingCart中的电影剪辑。表达式shoppingCart.form.submit=true的作用是设置实例form的submit变量的值为true。
表达一个对象或电影剪辑的方法遵循相同的模式。例如,ballMC实例的play方法用于移动ballMC的时间轴播放头,就像下面的语句:

ballMC.play();
点语法使用两个特殊的别名:_root和_parent。别名_root是指主时间轴。可以使用_root别名创建一个绝对路径。例如,下面的语句调用主时间轴中电影剪辑functions的buildGameBoard函数:
_root.functions.buildGameBoard();
Flash MX允许使用别名_parent来引用嵌套当前电影剪辑的电影剪辑。也可以用_parent创建一个相对目标路径。例如,如果电影剪辑dog被嵌套在电影剪辑animal之中,那么,在实例dog上的下列语句告诉animal电影剪辑停止播放:

_parent.stop();

2.斜杠语法
Flash的以前版本是使用斜杠语法指出电影剪辑或变量的目标路径的。Flash MX播放器仍然支持这种语法,但不推荐使用。在斜杠语法中,斜杠被用来代替点,用以标明电影剪辑或变量的路径。要指出一个变量,可以在变量前加上冒号,如下面的语句所示:
myMovieClip/childMovieClip:my Variable

我们现在用点语法取代上述斜杠语法来表示上面的目标路径:
myMovieClip.childMovieClip.myVariable

斜杠语法在tellTarget动作中使用最为普遍,但这种动作在Flash MX中已不再推荐使用。
【说明】与其使用tellTarget动作还不如使用with动作与点语法兼容。 3.大括号
ActionScript语句用大括号({})分块,如下面的脚本所示:
on(release){
myDate = new Date();
currentMonth = myDate.getMonth();
}
4.分号
ActionScript语句用分号(;)结束,但如果你省略语句结尾的分号,Flash仍然可以成功地编译你的脚本。例如,下面的语句用分号结束:
colum = passedDate.getDay();
row = 0;

同样的语句也可以不写分号:
colum = passdDate.getDay()
row = 0
5.圆括号
定义一个函数时,要把参数放在圆括号中:
function myFunction (name, age, reader){

}

调用一个函数时,也要把要传递的参数放在圆括号中:
myFunction (“Steve”,10,true);
圆括号可以用来改变ActionScript的运算优先级,或使自己编写的ActionScript语句更容易阅读。
也可以用圆括号来计算点语法点左边的表达式。例如,在下面的语句中,圆括号使表达式new color(this)得到计算,并创建了一个新的颜色对象:
onClipEvent(enterFrame){
(new Color(this)).setRGB(oxffffff);
}

在上例中,如果不使用圆括号,就需要在代码中增加一个语句来计算它:
onClipEvent(enterFrame){
myColor = new Color(this);
myColor.setRGB(0xffffff);
}
6.大小写字母
在ActionScript中,只有关键字区分大小写。对于其余的ActionScript,可以使用大写或小写字母。例如,下面的语句是等价的:

cat.hilite = true;
CAT.hilite = true;

但是,遵守一致的大小写约定是一个好的习惯。这样,在阅读ActionScript代码时更易于区分函数和变量的名字。如果在书写关键字时没有使用正确的大小写,你的脚本将会出现错误。例如下面的两个语句:
setProperty(ball,_xscale,scale);
setproperty(ball,_xscale,scale);

前一句是正确的,后一句中property中的p应是大写而没有大写,所以是错误的。在动作面板中启用彩色语法功能时,用正确的大小写书写的关键字用蓝色区别显示,因而很容易发现关键字的拼写错误。 7.注释
需要记住一个动作的作用时,可在动作面板中使用comment(注释)语句给帧或按钮动作添加注释。如果你在协作环境中工作或给别人提供范例,添加注释有助于别人对你编写的脚本的正确理解。
在动作面板中选择comment动作时,字符”//”被插入到脚本中。如果在你创建脚本时加上注释,即使是较复杂的脚本也易于理解,例如:
on(release){
//建立新的日期对象
myDate = new Date();
currentMonth=myDate.getMonth();
//把用数字表示的月份转换为用文字表示的月份
monthName = calcMoth(currentMonth);
year = myDate.getFullYear();
currentDate = myDate.getDat();
}

在脚本窗口中,注释内容用粉红色显示。它们的长度不限,也不影响导出文件的大小。
8. 关键字
ActionScript保留一些单词,专用于与本语言之中。因此,不能用这些保留字作为变量、函数或标签的名字。下表列出了ActionScript中所有的关键字:
break continue delete else
for function if in
new return this typeof
var void while with
【注意】这些关键字都是小写形式,不能写成大写形式。 9.常量
常量有其值永不改变的属性。常数用大写字母列于动作工具箱中。例如,常数BACKSPACE、ENTER、QUOTE、RETURN、SPACE和TAB是Key对象的属性,指键盘上的键。要测试用户是否在按Enter键,可使用下面的语句:
if(keycode()= =key.ENTER){
alert = “你准备好了吗?”
controlMC.gotoAndStop(5);
}

ActionScript中的术语
ActionScript根据特定的语法规则使用特定的术语。以下按字母顺序介绍重要的ActionScript术语.
Actions(动作):是指导Flash电影在播放时执行某些操作的语句。例如,gotoAndStop动作就可以将播放头转换到指定的帧或帧标记。Action(动作)也可以被称作statement(语句)。
Arguments(参数):是允许将值传递给函数的占位符。例如,以下语句中的函数welcome就使用了两个参数firstName和hobby来接收值:

function welcome(firstName,hobby) {
welcomeText = “Heelo,” + firstName + “I see you enjoy” + hobby;
}

Classed(类):是各种数据类型。用户可以创建”类”并定义对象的新类型。要定义对象的类,用户需创建构造器函数。
Constants(常量):是不会改变的元素。常量对于值的比较非常有用。
Constructors(构造器):是用来定义”类”的属性和方法的函数。以下代码通过创建Circle构造器函数生成了一个新的Circle类。

function Circle(x, y, radius) {
this.x = x;
this.y = y;
this.radius = radius;
}

Data types(数据类型):是可以执行的一组值和操作。ActionScript的数据类型包括:字符串、数值、逻辑值、对象和影片剪辑。
Events(事件):是在电影播放过程中发生的动作。例如,当电影裁入时、当播放头到达某一帧时、当用户单击按钮或影片剪辑时、当用户按压键盘上的按钮时,都会产生不同的操作。
Expressions(表达式):是可以产生值的语句。例如2+2就是一个表达式。
Functions(函数):是可以重复使用和传递参数的代码段,可以返回一个值。例如,getProperty函数就可以使用影片剪辑的实例名称和属性名称,返回属性值。getVersion函数可以返回当前播放电影的Flash播放器的版本。
Handlers(句柄):是可以管理诸如mouseDown和load事件的特殊动作。例如,onMouseEvent和onClipEvent就是ActionScript的句柄。
Identifiers(标识符):是用来指示变量、属性、对象、函数或方法的名称。标识符的首字母必须是字符、下划线(_)或美元符号($)。后续字符可以是字符、数字、下划线或美元符号。例如,firstName就是一个变量名。
Instances(实例):是属于某些class(类)的对象。每个类的实例都包含该类的所有属性和方法。例如,所有影片剪辑实例都包含MovieClip类的属性(透明度属性、可见性属性)和方法(例如gotoAndPlay、getURL等)。
Instance names(实例名称):是一个唯一的名称。可以在脚本作为目标被指定。
Keywords(关键字):是具有特殊意义的保留用词。例如,var就是一个关键字,它可以用来定义本地变量。
Methods(方法):是指定给对象的函数。在函数被指定给对象之后,该函数就可以被称为是该对象的方法。
Objects(对象):是属性的集合。每个对象都有自己的名称和值。对象允许用户访问某些类型的信息。例如,ActionScript的预定义对象Date就提供了系统时钟方面的信息。
Operands(运算项):是由表达式中的运算符操控的值。
Operators(运算符):可以从一个或多个值中计算获得新值。例如,将两个数值相加就可以获得一个新值。
Parameters(参数):也被称之为Arguments(参数)。
Properties(属性):是定义对象的attributer(属性)。例如,所有影片剪辑对象都具有_visible(可见性)属性,通过该属性可以决定影片剪辑是否显示。
Target paths(目标路径):是Flash电影中影片剪辑名称、变量和对象的垂直分层结构地址。主时间轴的名称是_root。影片剪辑属性检查器中可以命名影片剪辑的实例。
用户可以通过目标路径使动作指向影片剪辑,也可以使用目标路径获取或设置变量的值。例如,以下示例语句就是影片剪辑stereoControl内部的变量volume的路径:
-root.stereoControl.volume
Variables(变量):是存储了任意数据类型值的标识符。变量可以创建、修改和更新。变量中存储的值可以被脚本检索使用。在以下的示例中,等号左边的是变量标识符,右边的则赋予变量的值:
x = 5;
name = “Lolo”;
customer.address = “66 7th Street”;
c = new Color(mcinstanceName);

编写ActionScript脚本
编 写Flash动作脚本并不需要用户对ActionScript有完全的了解,用户的需求才是真正的目标。有了设计创意之后,用户要做的就是为此选择恰当的 动作、属性、函数或方法。学习ActionScript的最佳方法是创建脚本。用户可以在动作面板的帮助下建立简单脚本。一旦熟悉了在电影中添加诸如 play和stop这样的基础动作之后,用户就可以开始学习更多有关ActionScript的知识。要使用ActionScript的强大功能,最重要 的是了解ActionScript语言的工作原理:ActionScript语言的基础概念、元素以及用来组织信息和创建交互电影的规则等。 1.脚本的规划和调试
在为整个电影编写脚本时,脚本的数量和变化可以可能都是巨大的。例如,用户可能需要考虑以下问题:决定使用哪些动作,如何建立更有效的脚本结构,以及在哪些地方放置脚本?所有这些问题都需要经过仔细规划和测试。特别是当电影变得越来越复杂时,这些问题更加显得突出。
在开始编写脚本之前,用户需明确自己要达到的目标。例如,这些目标可能是
使用Flash创建整个站点。
? 询问站点访问者姓名,并且在整个站点中重复使用该信息。
? 站点具有一个可拖动的导航工具栏,可以帮助用户跳转到站点的任意分支。
? 当某一个按钮被单击时,新的内容以淡入方式出现在舞台中央。
? 专门设立一个和用户联系的场景,其中包含已经填入用户姓名的表单。
在明确了制作动画要达到的目的之后,用户就可以开始创建对象并编写脚本来控制这些对象。
让 脚本按照自己需要的方式工作,这通常比编写脚本要花费时间。用户需要经常不断地测试自己的脚本是否工作正常。为达到目的,最好的方法是从简单脚本开始,频 繁测试,编写并测试完一部分可正常工作的脚本之后,就可以保存文件的一个版本。这种工作方法可以帮助用户更有效地调试脚本错误,在编写更加复杂的脚本时也 有坚实的基础。 2.面向对象的脚本编程
在面向对象的编程方法中,用户通过将信息分类成组来组织信息。用户可以创建某一类信息的多个实例,以便 在脚本中使用。用户可以使用ActionScript预定义的class(类),也可以创建自己的类。ActionScript内置的类位于动作在板的 Objects(对象)文件夹。
在创建class(类)时,用户需为由该类所创建的每个对象定义所有属性(特性)和方法(行为)。这和现实世界中 对象的定义方法一样。例如,”人”具有诸如性别、身高和头发颜色之类的属性,”人”的行为包括说话、走路、投掷等,在本示例中,”人”就是一个类,而每个 单独的人就是该类的实例,即Object(对象)。
ActionScript中的对象可以包含数据,也可以是舞台上的影片剪辑。所有影片剪辑都是 预定义的MovieClip类的实例。每个影片剪辑实例都有MovieClip类的所有属性(例如_height,高度;_rotation,旋 转;_totalframes,总帧数等)和所有方法(例如,gotoAndPlay,转到并播放;loadMovie,载入电影;startDrag, 开始拖动等)。
要定义class(类),用户需创建一个特殊的被称为”构造器”的函数。Flash预定义的类已经定义了构造器函数。例如,如果需 要电影中一个骑车人的信息,则可以创建一个名为Biker的构造器函数。该函数包括”时间”和”距离”属性,也包含”速度”方法,该方法可以将骑车人的移 动速度告诉用户。
function Biker(t, d) {
this.time = t;
this.distance = d;
}
function Speed() {
return this.time/this.distance;
}
Biker.prototype.rate = Speed;

在编写构造器函数之后,用户就可以创建Biker类的副本,即:实例。以下代码就可以创建Biker类对象的实例emma和hamish:

emma = new Biker(30, 5);
hamish = new Biker(40,5);

实 例之间还可以相互通信。例如,对于Biker类的对象来说,用户可以创建一个shove(推)的方法,让一个骑车人推另外一个骑车人。这样,当 hamish实例靠得太近时,emma实例就可以调用shove方法,将hamish推开。要将信息传递给方法,可使用参数。例如,shove(推)方法 就可以携带who(被推者)和howFar(推多远)参数,如下列示例。

emma.shove(hamish, 10);

在 面向对象编程方法中,类可以按指定顺序相互接收属性和方法,这就是所谓的继承。用户可以使用继承扩展或重定义类的属性和方法,从其他类继承属性和方法的类 被称为”子类”,将属性和方法传递给其他类的类被称为”超类”,一个类可以同时是”子类”和”超类”。 3.脚本的流程
Flash将从第一行语句开始执行ActionScript语句,一直按次序执行到最终语句或ActionScript指定跳转到的语句。
将执行次序发送到其他地方而不是下一语句的动作包括:if语句、do…while循环和return动作。
if 语句被称为条件判断语句或”逻辑分支”,因为它是基于某些条件的评估判断来控制脚本流程的。例如,以下代码就将检查变量mynumber中的值是否否小于 或等于10,如果检查结果返回true(例如,mynumber的值为5),则变量alert被设置文本字符串值,并在输出的文本域中显示其值。
if (myNumber <=10) {
alert = “The number is less than or equal to 10”;
}

用 户也可以添加else语句来创建更加复杂的条件判断语句。在以下示例中,如果条件判断返回true(例如,变量mynumber的值为3),则第一组大括 号之间的语句将执行,alert变量将显示第二行的值。如果条件判断返回false(例如,变量mynumber的值为30),则第一组代码区将被跳 过,else语句后面的大括号之间的语句将执行。
if (myNumber <=10) {
alert = “The number is less than or equal to 10”;
}else {
alert = “The number is greate than 10”;
}

循环语句将重复执行某一动作若干次,直到满足某一条件才结束。在以下示例中,影片剪辑将被复制5次。
i = 0;
do {
duplicateMovieClip (“myMovieClip”,”newMovieClip”+i,i);
newName = eval(“newMovieClip”+i);
setProperty(newName,_x,getProperty(“myMovieClip”,_x)+(i*5));
i=i+1
}while(i<=5);

4.脚本的运行
在 编写脚本时,用户可以使用动作面板,将脚本附加给时间轴中的帧,也可以附加给舞台上的按钮或影片剪辑。附加给帧的脚本将在播放头到达该帧时执行,而附加给 按钮或影片剪辑的脚本则在某一事件发生时执行。所谓的”事件”,可以是电影播放时鼠标移动、某个按钮被按下,也可以是某个影片剪辑被载入等。使用 ActionScript可以发现操作发生的时间,然后根据该事件执行指定的脚本。
附加给按钮或影片剪辑的动作被一个特殊的动作包围,该动作被称 之为handler(处理程序),onClipEvent和on动作都被称之为处理程序,中因为它们操控或管理着操作。用户可以为每个处理程序指定一个或 多个操作。当由处理程序指定的事件发生时,影片剪辑或按钮动作才执行。如果要在不同的事件发生时执行不同的动作,则可以给一个对象附加多个处理程序。
onClipEvent 动作处理的是影片剪辑的事件,而on动作则处理按钮的事件。用户也可以和影片剪辑一起使用on动作,创建一个能接受鼠标事件的影片剪辑。 后记:当然方法有很多种,最重要的是选择适合自己的学习方法,结合示例多想多做多练,你一定会成功的!!!!!

FLASH+XML教程(适用于AS2.0)

在FLASH中,使用XML接口获取外部数据是最有效的方法之一.(通常还有WebSerivce接口和LoadVars方法)
下面来看一个简单的XML文档(city.xml)
这个文档描述的是城市地区的信息

xml version=”1.0″ encoding=”gb2312″?>
<root>
<city name=”上海” code=”021″ pnum=”500000″/>
<city name=”北京” code=”010″ pnum=”600000″/>
<city name=”浙江” code=”057″ pnum=”1000000″/>
root>
简单介绍一下XML文档格式的书写规范:
第一行:
这是一个XML文档的描述信息.其中定义了该XML文档的一些基本属性,包括:版本信息(version),使用的字符编码(encoding).

第二行:
(虽然在FLASH中我们用不到节点的任何属性,但是合式的XML文档必须要求一个根节点)
在 XML文档中,这是一个根节点.XML规定所有标签必须有闭合.所以,在最后一行使用对应的标签来闭合.同样,单行的XML节点也需要闭合,例如:其 中”/”符号就表示单行的节点闭合.”name”,”code”,”pnum”是节点的属性,写法就是:属性名=”属性值” 这样的名/值对.至于节点名和属性名都是可以自定义的,也就是说可以任意命名.但是还是建议要尽量规范

“”节点是””的子节点,相应的””叫做””的父节点

在这个XML文档中有3个子节点,我们数据就存储在这3个子节点的属性中,分别有:城市名称(name),城市代码(code),城市人口数目(pnum)
我们要做的最终目的就是在FLASH中获取这些节点的属性值

下面来看一个FLASH调用XML的实例

System.useCodepage = true;
var doc:XML = new XML();
doc.load(“city.xml”);
doc.ignoreWhite = true;
doc.onLoad = function(success){
if(success){
trace(doc.childNodes[0].childNodes[0].attributes.name);
trace(doc.childNodes[0].childNodes[1].attributes.name);
trace(doc.childNodes[0].childNodes[2].attributes.name);
}
}
分析:

System.useCodepage = true;
如果在XML文档中使用了中文编码,例如”gb2312″.那么在FLASH中必须启用使用页面编码的指令.

var doc:XML = new XML();
建立一个XML实例.赋予”doc”这个对象.

doc.load(“city.xml”);
“load()”-XML对象的一个方法:加载XML数据到”doc”这个对象当中.
提供XML数据的方式并不是限制于.xml的文件,任何符合XML书写格式的文档都可以,通常,我们是使用程序来提供XML数据的,例如”http://www.51ww.com/city.aspx?country=china”

doc.ignoreWhite = true;
“ignoreWhite”-XML对象的一个属性:指定XML文档忽略空白,因为在XML中一个换行在FLASH中会被视为一个节点

doc.onLoad = function(success){}
“onLoad”-XML对象的一个方法.将会返回一个布尔值”true或false”.用来判断XML是否被成功加载.如果加载成功则会返回”true”,反之则返回”false”
此处为该方法使用了一个函数,其参数”success”用来贮存上述的布尔值

if(success){}
一个判断语句:如果加载成功(即success的值为”true”),则触发括号内的动作

trace(doc.childNodes[0].childNodes[0].attributes.name);
输出doc(此时”city.xml”中的数据已经包含到doc这个XML对象当中)这个XML对象的第一个节点下的第一个子节点的”name”属性值
childNodes-XML对象的一个属性,它的值的类型是数组型.XML的一个节点可以在FLASH中通过这个属性来表示其包含的数据.
由于FLASH中数组的长度计算是由”0″开始,所以我们XML文档中的第一个节点就存储在数组的”0″位置.而不是”1″
所以,我们取出XML文档的第一个节点-“”,就应该表示成这样”childNodes[0]”
同样,我们取出XML对象根节点(“”)下的第一个子节点(“”),就表示成doc.childNodes[0].childNodes[0]
相应的,取出第二个子节点:doc.childNodes[0].childNodes[1]
第三个子节点:doc.childNodes[0].childNodes[2]
(这一步中,需要涉及到FLASH中数组对象的使用原理)

在FLASH与XML的数据交互中,可能数据的表现是最难的一步.
针对上面数据表现方式,我们可以充分利用数组的便利性来做
假如已经获得一个XML对象”doc”

首先,我们将这个XML中使用到的数据转换为一个数组对象来表示
var myList:Array = doc.childNodes[0].childNodes;//直接将XML文档根节点下的的所有子节点放到一个数组中
trace(myList[0].attributes.name+”,”+myList[0].attributes.code+”,”+myList[0].attributes.pnum);//输出第一个”city”节点所有的属性值
trace(myList[1].attributes.name+”,”+myList[1].attributes.code+”,”+myList[1].attributes.pnum);//输出第二个”city”节点所有的属性值
trace(myList[2].attributes.name+”,”+myList[2].attributes.code+”,”+myList[2].attributes.pnum);//输出第三个”city”节点所有的属性值

输出结果:

上海,021,500000
北京,010,600000
浙江,057,1000000

/*以上完整的代码为*/
System.useCodepage = true;
var doc:XML = new XML();
doc.load(“city.xml”);
doc.ignoreWhite = true;
doc.onLoad = function(success){
if(success){
var myList:Array = doc.childNodes[0].childNodes;
trace(myList[0].attributes.name+”,”+myList[0].attributes.code+”,”+myList[0].attributes.pnum);
trace(myList[1].attributes.name+”,”+myList[1].attributes.code+”,”+myList[1].attributes.pnum);
trace(myList[2].attributes.name+”,”+myList[2].attributes.code+”,”+myList[2].attributes.pnum);
}
}
/*代码结束*/
为了在FLASH中其他的位置都能够访问到我们所需要的XML数据,我们可以将myList数组对象放置到上下文的任意位置
例如:

System.useCodepage = true;
var doc:XML = new XML();
var myList:Array = new Array();//预先建立一个数组对象用来放置XML节点数据,以便FLASH其他位置的代码都能够访问
doc.load(“city.xml”);
doc.ignoreWhite = true;
doc.onLoad = function(success){
if(success){
myList = doc.childNodes[0].childNodes;//当XML加载成功后对上文的myList数组对象进行赋值.
}
}

//使用一个按钮动作来获取数组对象中的一个CITY节点信息
btName.onPress = function(){
trace(_root.myList[0].attributes.name+”,”+_root.myList[0].attributes.code+”,”+_root.myList[0].attributes.pnum);
}
这样的写法当然还不满足我们一些复杂的需求,而且代码过冗长.
使用函数来返回我们需要的信息,应该是最正确的做法,我们来实现它
按下按钮时,向函数递交一个城市代码,返回城市名和人口信息

System.useCodepage = true;
var doc:XML = new XML();
var myList:Array = new Array();//预先建立一个数组对象用来放置XML节点数据,以便FLASH其他位置的代码都能够访问
doc.load(“city.xml”);
doc.ignoreWhite = true;
doc.onLoad = function(success){
if(success){
myList = doc.childNodes[0].childNodes;//当XML加载成功后对上文的myList数组对象进行赋值.
}
}

//函数开始
function getCityInfo(code){? //构建一个函数的写法是:function 函数名(参数){//脚本代码}
var cityName:String;//建立一个字符窜变量来存储城市名
var pepCount:String;//建立一个字符窜变量来存储居民数量
for(var i=0;i<myList.length;i++){
if(code eq myList[i].attributes.code){
cityName = myList[i].attributes.name;
pepCount = myList[i].attributes.pnum;
}
}
return “城市:”+cityName+”,人口:”+pepCount //返回一段文字表达信息
}

//函数结束

??? /*按钮的动作*/
btName.onPress = function(){
trace(getCityInfo(“010”));//输出函数的返回结果,(在函数的参数中提交城市代码-“010”)

使IE6中DIV(或其他容器)设置高度(height)为100%

当你在制作网页中用CSS定义一个DIV(或者其他容器,如table等…)的height:100%
在IE6中此定义无法达到预期纵向(y)100%显示效果时
以下方法可以帮你解决

首先请用CSS定义
body{height:100%}
此定义是为了让本身body就具有height为100%

然后
再定义你想让其达到高100%纵向满屏的DIV(或者其他容器)的父DIV(或者其他容器)
其高度亦为height:100%

注意加重字体所表达的意思

即:
你要定义一个DIV的高100%纵向满屏
那么请先将其上级的DIV的高定义为100%
上级有多少个DIV,你都要定义它们的高为100%
这样才能达到包含在里面的DIV的高为浏览器高100%的纵向满屏效果。

flash自适应浏览器窗口

单独一个flash实现自适应浏览器窗口,其实没有什么高超的技术与代码。

如果不想用js就用下面的方法。
只要在object里面设置height=“100%”就可以了。
有的人说这不行,那好把
<!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”>
去掉换成<html>应该就可以了。

给ff的div撑起来——font-size在FF中有妙用

不知道你碰到过这样的问题没~
做一个图片列表,显示图片缩略图且有边框,边框div无浮动也就是float:none。
在火狐浏览器浏览上面的情况是图片该多大多大,但是边框无法把图片包住,换句话说就是这个放图片的div层的高度(只是高度…),而图片已经超出了层范围。
解决这个问题唯一的办法就是改变font-size的大小,让font-size:等于你图片相对长的数值(比如长>宽就是长的数值),记得层也要固定大小,而font-size超出去的部分在火狐里面自动隐藏(别问我ie该怎么办)。
这样问题就解决了:)

被绿色版的IE6玩了

绿色版的ie6我本来也没有寄予厚望,只希望能给我方便做css的hack就好了,结果今天我被IE6和IE7合伙给玩了。
竟然有这样的事情,同样的东西,完全就是css,一点附加内容都没有,在我安装的绿色版上不好用,竟然在别人机器上的IE6有效果,我顿时崩溃,想想原因可能是机器默认安装的IE6可能有其他的支持或者有补丁,即便是如此,这我以后做hack烦恼又多了。
IE7的问题就更离谱,我做一个下拉菜单的效果,试过以后本来在IE6,IE7,FF都很好,可是在IE7做其他测试是猛然发现,在IE7刚打开该页面时很正常,只要你在该页面任何地方点击一次鼠标,我的下拉菜单就真的只有下拉,回不去了,百思不得其解,用了各种山寨方法依然没有完美的解决此问题,难道是IE7对鼠标左键有个默认的onclick事件(后经过测试右键问题同样),无奈只能用其他下拉菜单方法代替。
各种科学不能解释的问题,各种纠结~~
路过的大虾多指点。

再谈浏览器兼容

早期我空间里的兼容文章

 

一、!important (功能有限)
随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)
例如:

#example {
width: 100px !important; /* IE7+FF */
width: 200px; /* IE6 */
}

二、CSS HACK的方法(新手可以看看,高手就当路过吧)

首先需要知道的是:

所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;

例如:

#example { height:100px; } /* FF */

* html #example { height:200px; } /* IE6 */

*+html #example { height:300px; } /* IE7 */

下面的这种方法比较简单

举几个例子:

1、IE6 – IE7+FF

#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
其实这个用上面说的第一种方法也可以
#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}

2、IE6+IE7 – FF

#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7 */
}

3、IE6+FF – IE7

#example {
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}

4、IE6 IE7 FF 各不相同

#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
或:
#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}

需要注意的是,代码的顺序一定不能颠倒了,要不又前功尽弃了。因为浏览器在解释程序的时候,如果重名的话,会用后面的覆盖前面的,就象给变量赋值一个道理,所以我们把通用的放前面,越专用的越放后面

解释一下4的代码:

读代码的时候,第一行height:100px; 大家都通用,IE6 IE7 FF 都显示100px
到了第二行*height:300px; FF不认识这个属性,IE6 IE7都认,所以FF还显示100px,而IE6 IE7把第一行得到的height属性给覆盖了,都显示300px
到了第三行_height:200px;只有IE6认识,所以IE6就又覆盖了在第二行得到的height,最终显示200px
这样,三个浏览器都有自己的height属性了,各玩各的去吧

这样说要是你还不明白,要么你去撞墙,要么我去!不过还是你去比较好。

哦,差点忘了说了:
*+html 对IE7的兼容 必须保证HTML顶部有如下声明:
〈!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd“〉
三、使用IE专用的条件注释

〈!–其他浏览器 –〉

〈link rel=”stylesheet” type=”text/css” href=”css.css” /〉

〈!–[if IE 7]〉

〈!– 适合于IE7 –〉

〈link rel=”stylesheet” type=”text/css” href=”ie7.css” /〉

〈![endif]–〉

〈!–[if lte IE 6]〉

〈!– 适合于IE6及以下 –〉

〈link rel=”stylesheet” type=”text/css” href=”ie.css” /〉

〈![endif]–〉

貌似要编三套css,我还没用过,先粘过来再说

IE的if条件Hack

1. 〈!–[if !IE]〉〈!–〉 除IE外都可识别 〈!–〈![endif]–〉
2. 〈!–[if IE]〉 所有的IE可识别 〈![endif]–〉
3. 〈!–[if IE 5.0]〉 只有IE5.0可以识别 〈![endif]–〉
4. 〈!–[if IE 5]〉 仅IE5.0与IE5.5可以识别 〈![endif]–〉
5. 〈!–[if gt IE 5.0]〉 IE5.0以及IE5.0以上版本都可以识别 〈![endif]–〉
6. 〈!–[if IE 6]〉 仅IE6可识别 〈![endif]–〉
7. 〈!–[if lt IE 6]〉 IE6以及IE6以下版本可识别 〈![endif]–〉
8. 〈!–[if gte IE 6]〉 IE6以及IE6以上版本可识别 〈![endif]–〉
9. 〈!–[if IE 7]〉 仅IE7可识别 〈![endif]–〉
10. 〈!–[if lt IE 7]〉 IE7以及IE7以下版本可识别 〈![endif]–〉
11. 〈!–[if gte IE 7]〉 IE7以及IE7以上版本可识别 〈![endif]–〉注:gt = Great Then 大于
〉 = 〉 大于号
lt = Less Then 小于
〈 = 〈 小于号
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于

四、css filter的办法(据作者称是从国外某经典网站翻译过来的说)

新建一个css样式如下:

#item {

width: 200px;

height: 200px;

background: red;

}

新建一个div,并使用前面定义的css的样式:

〈div 〉some text here〈/div〉

在body表现这里加入lang属性,中文为zh:

〈body lang=”en”〉

现在对div元素再定义一个样式:

*:lang(en) #item{

background:green !important;

}

这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式:

#item:empty {

background: green !important

}

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。
五、FLOAT闭合(clearing float)

网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因。如果父div没有设 float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV。解决办法:
1、给父DIV也设上float(不要骂我,我知道是废话)

2、在所有子DIV后新加一个空DIV(不推荐,有些浏览器可以看见空DIV产生的空隙)

比如:

.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}

〈div〉
〈div〉〈/div〉
〈div 〉〈/div〉
〈div〉〈/div〉
〈/div〉

3、万能 float 闭合

将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
代码:
〈style〉
/* Clear Fix */
.clearfix:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
〈/style〉

:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦。

4、overflow:auto(刚看到的,极力推荐)

只要在父DIV的CSS中加上overflow:auto就搞定。

举例:

.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}

〈div〉
〈div〉〈/div〉
〈div 〉〈/div〉
〈/div〉

作 者原话:原理是,外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见(见W3C的解释)。现在只要将给外围元素添 加一个“overflow:auto”,就可以解决问题,结果是除了IE,真的可以解决。下来就要解决IE的问题了,再加上“_height:1%”,这 个问题就完全解决了。

我试了一下,其实不加”_height:1%“在IE下也行,留着吧。

六、需要注意的一些兼容细节

1, FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会.

解决办法:给DIV设定IE、FF两个宽度,在IE的宽度前加上IE特有标记” * “号。
2, 页面居中问题.

body {TEXT-ALIGN: center;} 在IE下足够了,但FF下失效。

解决办法:加上”MARGIN-RIGHT: auto; MARGIN-LEFT: auto; ”

3, 有的时候在IE6上看见一些奇怪的间隙,可我们高度明明设好了呀。

解决办法:试试在有空隙的DIV上加上”font-size:0px;”

4, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

5, 浮动IE6产生的双倍距离

#box{ float:left;
width:100px;
margin:0 0 0 100px;
}
这种情况之下IE6会产生200px的距离

解决办法:加上display:inline,使浮动忽略

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果

6 页面的最小宽度

min- width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得min-这个定义,但实际上它把正 常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里 这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重 要的。

解决办法:为了让这一命令在IE上也能用,可以把一个〈div〉 放到 〈body〉 标签下,然后为div指定一个类:
然后CSS这样设计:
#container{
min-width: 600px;
width:e­xpression(document.body.clientWidth 〈 600? “600px”: “auto” );
}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7、UL和FORM标签的padding与margin

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0;

解决办法:css中首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,后面就不会为这个头疼了.

8 ,DIV浮动IE文本产生3象素的bug

下面这段是我在网上粘过来的

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
〈DIV id=box〉
〈DIV id=left〉〈/DIV〉
〈DIV id=right〉〈/DIV〉
〈/DIV〉

针对上面这段代码,下面说一下我的理解:

第一、只要right定义了width属性,在FF下绝对就会两行显示
第二、两个width都定义为百分比的话,就算都为100%在IE下也会一行显示。所以上面那句所谓“这句是关键”根本没用,不加也在一行,除非你width定义的是数值才用得上。

所 以说上面这段代码其实用处不大,至少在FF下不行。其实只要只定义left的width就行了,right不定义width就不管在IE还是FF下都能成 功,但这样的话父DIV BOX并没有真正的包含LEFT和RIGHT两子DIV,可以用我上面说的第5种办法解决。最简单的办法就是在RIGHT中加上float:left就 OK了,真磨叽!
9,截字省略号

.hh { -o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:
nowrapoverflow:hidden;
}
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾。技术是好技术,很多人都喜欢乱用,但注意Firefox并不支持。