Archive for 十月 8th, 2009

loadMovie问题全解<转>

使用loadMovie可以动态的载入外部文件,从而减少主文件的体积,有利于网上下载,以及对各项子文件的修改,更换。

使用loadMovie有两种基本的方法:

(一)将外部swf文件载入到某一层上。

(二)将外部swf文件载入到时间轴的某个影片剪辑中。对这两种方法的使用,用图表示更加直观些。

第二种方法又可以这样写:_root.mc.loadMovie(“a1.swf”);如果a1的后缀名为 jpg那么载入的是外部图片。载入图片与载入swf文件的道理是一样的,就不赘述。说到这里还比较空洞,做一个实例来看看。

一、新建一个文件夹,任意取一个名字 比如:mywangye

二、做一个Flash发布成swf文件并且取名字为a1,保存在mywangye这个目录中,这个a1就是我们要载入的子文件。

三、然后做主文件,由于我们是做最简单的,所以什么也不画,就在这个主文件的第一桢,写 loadMovie(“a1.swf”,1) 同样将这个文件保存在mywangye目录中,取个名字叫index

四、测试效果,源文件见本文后的打包中的01文件夹

然后用上面图中的第2种语法,继续做一个,注意了,第二种方法需要在舞台上放一个mc并且取一个实例名,或者创建一个空的MC。做了上面的小实验后,我们可以总结些什么结论呢?如果仅仅是得到可以加载外部文件这么一条结论的话,那么就太肤浅了。可以让我们想到:被加入进来的外部文件的坐标问题;长宽问题;外部文件比较大,造成的加载延时问题;如何访问被加载进来的swf的问题;不要加载了,卸载问题…..这些问题我们如果不研究下,真正在做网页的时候,会遇到很多麻烦的。

由上面的最简单的加载我们可以得到这样的结论:(1)如果采用加载到层上的,加载进来后默认注册点是舞台的左上角;如果采用加载到mc里面的,那么默认注册点是MC的注册点。如果MC的注册点是左上角,那么被加载进来的SWF文件就与MC的左上角对准;如果MC的注册点是中心,那么加载进来的SWF就把左上角与MC的中心对齐。(2)被加载进来的MC保留原来的长宽比例。

问题一:如何控制被加载进来的SWF文件的坐标和长宽比例大小?

控制被加载进来的SWF文件控制其长宽要采用onEnterFrame,比如:

on (press) {

loadMovie(“a2.swf”, “_root.mymc”);

onEnterFrame = function () {

_root.mymc._x = 0;

_root.mymc._y = 0;

_root.mymc._width = 330;

_root.mymc._height = 240;

};

}

为什么用 onEnterFrame呢?因为被加载进来的的过程中,有点延时,如果没有onEnterFrame语句,那么语句读取一次就不读取了,然而读取了这一次之后,还没有加载进来,所以就会导致坐标大小设置无效。同样,如果加载到层上,也是这样的。

on (press) {

loadMovie(“a1.swf”, 1);

onEnterFrame = function () {

_level1._x = 17;

_level1._y = 30;

_level1._width = 330;

_level1._height = 240;

};

}

请注意这两种方法,第一种,把外部的a2加载到mymc中,加在进来后,a2就自动的替换了mymc,我们直接设置mymc的属性就设置了被加载进来的swf的属性。第二种方法,_level是对于加载到时间轴上的电影的引用,加载到第2层就是_level2;加载到第3层就是_level3。

问题之二:如何实现点击按钮加载一个外部SWF文件,并且要显示加载的下载进度呢?

有两个方法来实现这个效果,其一:把加载londing写在主文件中,其二,被加载的子SWF文件有自己的londing。现在分别给予说明。

其一:在主文件中写londing

外部子swf文件名为a1,主文件中有一个动态文本框名为loadText,一个按钮名为bbt,现在把loadMovie和londing写在桢上。

_root.bbt.onPress = function() {

_root.createEmptyMovieClip(“mc”, 10);

mc.loadMovie(“a1.swf”);

mc._visible = false;

_root.bbt.onEnterFrame = function() {

var l = mc.getBytesLoaded();

var t = mc.getBytesTotal();

var getPercent = l/t;

loadText = Math.round(getPercent*100)+”%”;

if (l>0 && l>=t) {

mc._visible = true;

delete this.onEnterFrame;

}

mc._x = 10;

mc._y = 10;

mc._width =440;

mc._height = 320;

};

};

其二:子文件中有自己的londing

这个写法与前面说的londing一样,只是注意一个问题就是注意路径的问题,比如这样写:

第一祯

loaded = getBytesLoaded();

total = getBytesTotal();

lts = Math.round((loaded/total)*100);

wenben = lts+”%”;

第二祯

if (lts == 100) {

gotoAndStop(3);

} else {

gotoAndPlay(1);

}

和前面的londing中介绍的比较,看出不同之处没有呢?仅仅是去掉了_root因为被加载后,外部SWF文件就相当于主文件中的一个MC 有了_root 就是指向主文件的_root 了,当然会显示错误。

问题三:我想在舞台上画一个屏幕,然后点击一个按钮就载入一个外部swf进行播放该怎样做呢?

那么我们就来一起做一个相册吧。当主文件载入后,单击按钮就载入一个外部swf 文件,并且都有londing显示。首先我们做好以下准备工作:(1)准备几张图片,现在我们准备7张,6个子文件一个一张,主文件用一张。(2)主文件舞台大小为了适应网页的需要,设置为770*420。子文件舞台大小设置为512*384,这样就不需要载入后控制大小了,方便些(其实我们应当这样,省去一些麻烦。

一、制作子文件。每个都用来显示图片,第一和第二祯写londing,第三祯~~二十祯根据自己的爱好做点亮度变化,以产生动感,最后一祯写上stop()。第一和第二祯的londing如下

第一祯

loaded = getBytesLoaded();

total = getBytesTotal();

lts = Math.round((loaded/total)*100);

wenben = “数据下载中 “+lts+”%”;

第二祯

if (lts == 100) {

gotoAndPlay(3);

} else {

gotoAndPlay(1);

}

就这样如法炮制的制作6个,分别命名为b1…..b6都发布成swf文件。保存在一个文件夹中。

二、制作主文件

第一祯用来写londing,第2祯放一些像屏幕一样的东西,和按钮,为了增加效果,放一个音乐在时间轴上。

第一祯的londing//由于前面已经说得多了,就不赘述了

stop();

i = 0; ,

onEnterFrame = function () {

// 使用不断触发的事件

loaded = _root.getBytesLoaded();

total = _root.getBytesTotal();

var aa = Math.round((loaded/total)*100);

_root.dongtai.wenbens = aa+”%”;

_root.dongtai._x = 188+aa*3;

_root.bb._width = aa*3;

if (aa>=100) {

// 检测到满足条件就跳出来,否则继续循环

_root.gotoAndStop(2);

delete this.onEnterFrame;

// 使用delete的目的是当完成下载后销毁onEnterFrame事件,以节约资源的消耗。

}

};

第2祯的按钮上的AS

on (press) {

_root.i++;

if (i == 7) {

i = 6;

}

loadMovie(“b”+i+”.swf”, “_root.mc”);

_root.tishi = “第”+i+”张图片”;

}

偷点懒,就不详细的赘述其含义, 我们也可以用很长的语句来实现相同的效果,这种写法是对AS的一种浓缩。

具体情况请参看原文件。

问题四:我想逐次载入多个外部文件,当第一个载入播放完毕后,立即载入第2个,第二个播放完毕后,立即载入第3个 ,……,直到结束。怎么办?

首先对这种提问,我们先要质问一下提问的人,这样做有什么意义? 与其这样,不如全部做到一个SWF中,因为每次调用一个外部SWF的时候,需要一定的时间来等待下载。当然,如果你想制作一个连续剧,播放完了一个后,用londing下一集的londing画面显示“正在载入下集,请稍候”那么还是可以的。

方法很简单:依照问题三的原文件,稍微修改,去掉一个按钮,用一个按钮载入第一个,然后再第一个的最后一祯放个调用主文件中的函数即可。

按钮:

on (press) {

loadMovie(“b1.swf”, “_root.mc”);

}

主文件定义的函数

function go2() {

loadMovie(“b2.swf”, “_root.mc”);

}

function go3() {

loadMovie(“b3.swf”, “_root.mc”);

}

function go4() {

loadMovie(“b4.swf”, “_root.mc”);

}

function go5() {

loadMovie(“b5.swf”, “_root.mc”);

}

function go6() {

loadMovie(“b6.swf”, “_root.mc”);

}

第一个b1 SWF的最后一祯_root. go2(),第二个外部SWF的最后一祯 _root.go3()………..

(一)将外部swf文件载入到某一层上。
(二)将外部swf文件载入到时间轴的某个影片剪辑中。对这两种方法的使用,用图表示更加直观些。
第二种方法又可以这样写:_root.mc.loadMovie(“a1.swf”);如果a1的后缀名为 jpg那么载入的是外部图片。载入图片与载入swf文件的道理是一样的,就不赘述。说到这里还比较空洞,做一个实例来看看。
一、新建一个文件夹,任意取一个名字 比如:mywangye
二、做一个Flash发布成swf文件并且取名字为a1,保存在mywangye这个目录中,这个a1就是我们要载入的子文件。
三、然后做主文件,由于我们是做最简单的,所以什么也不画,就在这个主文件的第一桢,写 loadMovie(“a1.swf”,1) 同样将这个文件保存在mywangye目录中,取个名字叫index
四、测试效果,源文件见本文后的打包中的01文件夹
然后用上面图中的第2种语法,继续做一个,注意了,第二种方法需要在舞台上放一个mc并且取一个实例名,或者创建一个空的MC。做了上面的小实验后,我们可以总结些什么结论呢?如果仅仅是得到可以加载外部文件这么一条结论的话,那么就太肤浅了。可以让我们想到:被加入进来的外部文件的坐标问题;长宽问题;外部文件比较大,造成的加载延时问题;如何访问被加载进来的swf的问题;不要加载了,卸载问题…..这些问题我们如果不研究下,真正在做网页的时候,会遇到很多麻烦的。
由上面的最简单的加载我们可以得到这样的结论:(1)如果采用加载到层上的,加载进来后默认注册点是舞台的左上角;如果采用加载到mc里面的,那么默认注册点是MC的注册点。如果MC的注册点是左上角,那么被加载进来的SWF文件就与MC的左上角对准;如果MC的注册点是中心,那么加载进来的SWF就把左上角与MC的中心对齐。(2)被加载进来的MC保留原来的长宽比例。
问题一:如何控制被加载进来的SWF文件的坐标和长宽比例大小?
控制被加载进来的SWF文件控制其长宽要采用onEnterFrame,比如:
on (press) {
loadMovie(“a2.swf”, “_root.mymc”);
onEnterFrame = function () {
_root.mymc._x = 0;
_root.mymc._y = 0;
_root.mymc._width = 330;
_root.mymc._height = 240;
};
}
为什么用 onEnterFrame呢?因为被加载进来的的过程中,有点延时,如果没有onEnterFrame语句,那么语句读取一次就不读取了,然而读取了这一次之后,还没有加载进来,所以就会导致坐标大小设置无效。同样,如果加载到层上,也是这样的。
on (press) {
loadMovie(“a1.swf”, 1);
onEnterFrame = function () {
_level1._x = 17;
_level1._y = 30;
_level1._width = 330;
_level1._height = 240;
};
}
请注意这两种方法,第一种,把外部的a2加载到mymc中,加在进来后,a2就自动的替换了mymc,我们直接设置mymc的属性就设置了被加载进来的swf的属性。第二种方法,_level是对于加载到时间轴上的电影的引用,加载到第2层就是_level2;加载到第3层就是_level3。
问题之二:如何实现点击按钮加载一个外部SWF文件,并且要显示加载的下载进度呢?
有两个方法来实现这个效果,其一:把加载londing写在主文件中,其二,被加载的子SWF文件有自己的londing。现在分别给予说明。
其一:在主文件中写londing
外部子swf文件名为a1,主文件中有一个动态文本框名为loadText,一个按钮名为bbt,现在把loadMovie和londing写在桢上。
_root.bbt.onPress = function() {
_root.createEmptyMovieClip(“mc”, 10);
mc.loadMovie(“a1.swf”);
mc._visible = false;
_root.bbt.onEnterFrame = function() {
var l = mc.getBytesLoaded();
var t = mc.getBytesTotal();
var getPercent = l/t;
loadText = Math.round(getPercent*100)+”%”;
if (l>0 && l>=t) {
mc._visible = true;
delete this.onEnterFrame;
}
mc._x = 10;
mc._y = 10;
mc._width =440;
mc._height = 320;
};
};
其二:子文件中有自己的londing
这个写法与前面说的londing一样,只是注意一个问题就是注意路径的问题,比如这样写:
第一祯
loaded = getBytesLoaded();
total = getBytesTotal();
lts = Math.round((loaded/total)*100);
wenben = lts+”%”;
第二祯
if (lts == 100) {
gotoAndStop(3);
} else {
gotoAndPlay(1);
}
和前面的londing中介绍的比较,看出不同之处没有呢?仅仅是去掉了_root因为被加载后,外部SWF文件就相当于主文件中的一个MC 有了_root 就是指向主文件的_root 了,当然会显示错误。
问题三:我想在舞台上画一个屏幕,然后点击一个按钮就载入一个外部swf进行播放该怎样做呢?
那么我们就来一起做一个相册吧。当主文件载入后,单击按钮就载入一个外部swf 文件,并且都有londing显示。首先我们做好以下准备工作:(1)准备几张图片,现在我们准备7张,6个子文件一个一张,主文件用一张。(2)主文件舞台大小为了适应网页的需要,设置为770*420。子文件舞台大小设置为512*384,这样就不需要载入后控制大小了,方便些(其实我们应当这样,省去一些麻烦。
一、制作子文件。每个都用来显示图片,第一和第二祯写londing,第三祯~~二十祯根据自己的爱好做点亮度变化,以产生动感,最后一祯写上stop()。第一和第二祯的londing如下
第一祯
loaded = getBytesLoaded();
total = getBytesTotal();
lts = Math.round((loaded/total)*100);
wenben = “数据下载中 “+lts+”%”;
第二祯
if (lts == 100) {
gotoAndPlay(3);
} else {
gotoAndPlay(1);
}
就这样如法炮制的制作6个,分别命名为b1…..b6都发布成swf文件。保存在一个文件夹中。
二、制作主文件
第一祯用来写londing,第2祯放一些像屏幕一样的东西,和按钮,为了增加效果,放一个音乐在时间轴上。
第一祯的londing//由于前面已经说得多了,就不赘述了
stop();
i = 0; ,
onEnterFrame = function () {
// 使用不断触发的事件
loaded = _root.getBytesLoaded();
total = _root.getBytesTotal();
var aa = Math.round((loaded/total)*100);
_root.dongtai.wenbens = aa+”%”;
_root.dongtai._x = 188+aa*3;
_root.bb._width = aa*3;
if (aa>=100) {
// 检测到满足条件就跳出来,否则继续循环
_root.gotoAndStop(2);
delete this.onEnterFrame;
// 使用delete的目的是当完成下载后销毁onEnterFrame事件,以节约资源的消耗。
}
};
第2祯的按钮上的AS
on (press) {
_root.i++;
if (i == 7) {
i = 6;
}
loadMovie(“b”+i+”.swf”, “_root.mc”);
_root.tishi = “第”+i+”张图片”;
}
偷点懒,就不详细的赘述其含义, 我们也可以用很长的语句来实现相同的效果,这种写法是对AS的一种浓缩。
具体情况请参看原文件。
问题四:我想逐次载入多个外部文件,当第一个载入播放完毕后,立即载入第2个,第二个播放完毕后,立即载入第3个 ,……,直到结束。怎么办?
首先对这种提问,我们先要质问一下提问的人,这样做有什么意义? 与其这样,不如全部做到一个SWF中,因为每次调用一个外部SWF的时候,需要一定的时间来等待下载。当然,如果你想制作一个连续剧,播放完了一个后,用londing下一集的londing画面显示“正在载入下集,请稍候”那么还是可以的。
方法很简单:依照问题三的原文件,稍微修改,去掉一个按钮,用一个按钮载入第一个,然后再第一个的最后一祯放个调用主文件中的函数即可。
按钮:
on (press) {
loadMovie(“b1.swf”, “_root.mc”);
}
主文件定义的函数
function go2() {
loadMovie(“b2.swf”, “_root.mc”);
}
function go3() {
loadMovie(“b3.swf”, “_root.mc”);
}
function go4() {
loadMovie(“b4.swf”, “_root.mc”);
}
function go5() {
loadMovie(“b5.swf”, “_root.mc”);
}
function go6() {
loadMovie(“b6.swf”, “_root.mc”);
}
第一个b1 SWF的最后一祯_root. go2(),第二个外部SWF的最后一祯 _root.go3()………..

YaHoo的CSS Reset(CSS重置)代码<转>

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:”;
}
abbr,acronym { border: 0;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {

padding: 0;

margin: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

fieldset,img {

border: 0;

}

address,caption,cite,code,dfn,em,strong,th,var {

font-weight: normal;

font-style: normal;

}

ol,ul {

list-style: none;

}

caption,th {

text-align: left;

}

h1,h2,h3,h4,h5,h6 {

font-weight: normal;

font-size: 100%;

}

q:before,q:after {

content:”;

}

abbr,acronym {

border: 0;

}


IE6浏览器网页文字溢出的解决办法(重复字符bug)<转>

<div style=”width:400px”>
<div style=”float:left”></div>
<!– –>
<input type=”hidden” value=”hidden” />
<div style=”display:none;”>hidden</div>
<div style = “float:left;width:400px”>IE6文字溢出的BUG</div>
</div>
今天在看一个项目的测试版的时候,发现了IE6文字溢出的BUG,文字出现了“重影”。
开始很快想到的是注释,看了源代码,发现页面里根本没有注释。实在摸不着头脑,祭出了Google,注意到了当初没有注意到的一句话“但IE6的这 个重复BUG也有些不是注释造成的,但基本上都和浮动有关系”。后来有查阅到其他文章提到type=hidden的input以及display: none的div也会导致文字溢出的BUG,正好代码有type=hidden的input。
在同事的帮助下(偶E问很烂)查阅了国外的资料,解决了type=hidden的input造成文字溢出的问题。不要把这个input直接放在form下面,可以用div或者fieldset把这个input包起来。
<div style=”width:400px”>
<div style=”float:left”></div>
<div><input type=”hidden” value=”hidden” /></div>
<div style=”float:left;width:400px”>IE6文字溢出的BUG</div>
</div>
将文字区块包含在新的div之间,但这个方法对type=hidden的input以及display:none的div不奏效。
<div style=”width:400px”>
<div style=”float:left”></div>
<!– –>
<div style=”float:left;width:400px”><div>IE6文字溢出的BUG</div></div>
</div>
而display:none的div造成的文字溢出同理可以用div将这个隐藏的div包起来。
<div style=”width:400px”>
<div style=”float:left”></div>
<div><div style=”display:none;”>hidden</div></div>
<div style=”float:left;width:400px”>IE6文字溢出的BUG</div>
</div>

今天在看一个项目的测试版的时候,发现了IE6文字溢出的BUG,文字出现了“重影”。

<div style=”width:400px”>

<div style=”float:left”></div>

<input type=”hidden” value=”hidden” />

<div style=”display:none;”>hidden</div>

<div style=”float:left;width:400px”>IE6文字溢出的BUG</div>

</div>

开始很快想到的是注释,看了源代码,发现页面里根本没有注释。实在摸不着头脑,祭出了Google,注意到了当初没有注意到的一句话“但IE6的这 个重复BUG也有些不是注释造成的,但基本上都和浮动有关系”。后来有查阅到其他文章提到type=hidden的input以及display: none的div也会导致文字溢出的BUG,正好代码有type=hidden的input。

在同事的帮助下(偶E问很烂)查阅了国外的资料,解决了type=hidden的input造成文字溢出的问题。不要把这个input直接放在form下面,可以用div或者fieldset把这个input包起来。

<div style=”width:400px”>

<div style=”float:left”></div>

<div><input type=”hidden” value=”hidden” /></div>

<div style=”float:left;width:400px”>IE6文字溢出的BUG</div>

</div>

将文字区块包含在新的div之间,但这个方法对type=hidden的input以及display:none的div不奏效。

<div style=”width:400px”>

<div style=”float:left”></div>

<div style=”float:left;width:400px”><div>IE6文字溢出的BUG</div></div>

</div>

而display:none的div造成的文字溢出同理可以用div将这个隐藏的div包起来。

<div style=”width:400px”>

<div style=”float:left”></div>

<div><div style=”display:none;”>hidden</div></div>

<div style=”float:left;width:400px”>IE6文字溢出的BUG</div>

</div>


CSS Hack<转>

CSS Hack的原理是什么
1.由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。 
2. IE6能识别下划线”_”和星号” * “,IE7能识别星号” * “,当不能识别下划线”_”,而firefox两个都不能认识。等等 
3.书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。 

如何写CSS Hack
比如要分辨IE6和firefox两种浏览器,可以这样写:

<style>

div{ 
background:green; /* for firefox */ 
*background:red; /* for IE6 */ 
}

</style>

在IE6中看到是红色的,在firefox中看到是绿色的。 
解释一下: 
1.上面的css在firefox中,它是认识不了后面的那个带星号的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。 
2.在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。 

CSS hack:区分IE6,IE7,firefox
区别IE6与FF: 
background:orange;*background:blue; 

区别IE6与IE7: 
background:green !important;background:blue; 

区别IE7与FF: 
background:orange; *background:green; 

区别FF,IE7,IE6: 
background:orange;*background:green;_background:blue; 
background:orange;*background:green !important;*background:blue; 

注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;

IE6                  IE7                FF 
*                  √                      √                    × 
!important        ×                      √                    √

补充:下划线”_”,IE6支持下划线,IE7和firefox均不支持下划线。 

浏览器优先级别:FF<IE7<IE6,    CSS hack书写顺序一般为FF IE7 IE6
以: ” #demo {width:100px;} “为例; 
#demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/

* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */

*html #demo {width:130px;} /*会被IE7执行*/ 

————— 

所以最后,#demo的宽度在三个浏览器的解释为:
FIREFOX:100px; 
ie6:120px; 
ie7:130px;


可归纳为:
width:100px;  //ff
*width:50px;  //ie7
_width:20px;  //ie6


Copyright © 1996-2011 Chesanqi's Web World. All rights reserved.
Jarrah theme by Templates Next | Powered by WordPress