wxdbetter
2007-04-27, 06:35 PM
一、深思熟虑，点滴做起
最近有好多人问我关于制作图片切换的问题，感觉这个问题是很多人普遍存在的一个现象。在很多的韩国网站上都有类似的模版，直接拿来可以套用，但是如果想完全自定义一个真正属于自己的，能够灵活运用的一个程序来说，有很多的障碍，即使是破解的，处理起来可能也不是完全满意的。正好今天我在工作中也设计到了这部分的内容，做了一下，由于时间有限，我以后循序渐进讲解，今天先从基础的做起。（注：本教程主要以介绍思路为主，方法可以变通，不作为主要内容） 首先，当我们要实现一个整体效果的时候，要将效果分成若干部分，每个部分都有独立的功能，然后将各部分再整合到一起，一般作为老手肯定都知道，但是新手要养成一个良好的编程习惯。闲话少絮，下面看一下我的设计思路。
第一、想象一个图片切换的方式（这里以一个简单的淡入淡出效果为例）
第二、能够让图像自动按一定时间切换（setInterval、clearInterval）
第三、可以手动控制当前展示的图片（需要根据xml节点动态输出按钮）
第四、其他的扩展功能（各种特效遮罩、图片滚动、视频特效的嵌入、控制自动循环开关等等）
下面做一下图片切换的效果。
FadeIn = function () {
if (mc.down._alpha<100) {
mc.down._alpha += 5;
} else {
mc.down._alpha = 100;
delete mc.down.onEnterFrame;
}
};
FadeOut = function (thepath, theurl) {
if (mc.down._alpha>0) {
mc.down._alpha -= 5;
} else {
mc.down._alpha = 0;
delete mc.down.onEnterFrame;
mc.down.pic.loadMovie(thepath);
mc.down.onEnterFrame = function() {
FadeIn();
};
}
};
Load = function () {
var thepath:String;
var theurl:String;
var intro = myXML.firstChild;
var len:Number = intro.childNodes.length;
if (i<len) {
thepath = intro.childNodes[i].attributes.path;
theurl = intro.childNodes[i].attributes.url;
mc.down.onRelease = function() {
getURL(theurl, "_blank");
};
mc.down.onEnterFrame = function() {
FadeOut(thepath, theurl);
};
i++;
} else {
i = 0;
thepath = intro.childNodes[i].attributes.path;
theurl = intro.childNodes[i].attributes.url;
mc.down.onRelease = function() {
trace(theurl);
getURL(theurl, "_blank");
};
mc.down.onEnterFrame = function() {
FadeOut(thepath, theurl);
};
i++;
}
};
mc.down._alpha = 0;
//下面的xml读取方式ego已经多次讲过，这里不再赘述，参考相关教程
var myXML = new XML();
myXML.ignoreWhite = true;
myXML.onLoad = function(success) {
if (success) {
Load();
control = setInterval(Load, 5000);
} else {
}
};
myXML.load("title.xml");
当刚开始读取第一张图片的时候，就应该有淡入的效果，所以开始要让mc.down._alpha = 0;然后将外部文件信息用 Load() 全部载入，再调用淡出的效果 FadeOut()，其中myXML.onLoad = function(success) {
if (success) {
Load();
control = setInterval(Load, 5000);
} else {
}
};
里面的Load用于第一次调用，以后将用control = setInterval(Load, 5000);来循环调用，但是我们知道，第一次显示的时候，图片效果是不需要淡出的，所以需要加入判断语句，如果alpha=0的时候直接调入FadeIn函数。但是我们知道，淡入淡出效果执行一次不可能实现，所以记得用 对象.onEnterFrame，当淡入淡出效果完毕以后记得用 delete 对象.onEnterFrame将其删除，否则很消耗内存。
这样我们的图片切换效果就完成了。
方法总结：
1、图片淡入淡出FadeOut、FadeIn算法
2、设定时间频率setInterval的使用办法
心灵鸡汤：编程的思维方式有很多可以灵活运用到生活中，比如我们在做每一件事情的时候，可以把整件事看作一个最终效果，然后把事情分解成一件一件的小事去做，可以提高平时生活中的工作效率。欲速则不达。
最近有好多人问我关于制作图片切换的问题，感觉这个问题是很多人普遍存在的一个现象。在很多的韩国网站上都有类似的模版，直接拿来可以套用，但是如果想完全自定义一个真正属于自己的，能够灵活运用的一个程序来说，有很多的障碍，即使是破解的，处理起来可能也不是完全满意的。正好今天我在工作中也设计到了这部分的内容，做了一下，由于时间有限，我以后循序渐进讲解，今天先从基础的做起。（注：本教程主要以介绍思路为主，方法可以变通，不作为主要内容） 首先，当我们要实现一个整体效果的时候，要将效果分成若干部分，每个部分都有独立的功能，然后将各部分再整合到一起，一般作为老手肯定都知道，但是新手要养成一个良好的编程习惯。闲话少絮，下面看一下我的设计思路。
第一、想象一个图片切换的方式（这里以一个简单的淡入淡出效果为例）
第二、能够让图像自动按一定时间切换（setInterval、clearInterval）
第三、可以手动控制当前展示的图片（需要根据xml节点动态输出按钮）
第四、其他的扩展功能（各种特效遮罩、图片滚动、视频特效的嵌入、控制自动循环开关等等）
下面做一下图片切换的效果。
FadeIn = function () {
if (mc.down._alpha<100) {
mc.down._alpha += 5;
} else {
mc.down._alpha = 100;
delete mc.down.onEnterFrame;
}
};
FadeOut = function (thepath, theurl) {
if (mc.down._alpha>0) {
mc.down._alpha -= 5;
} else {
mc.down._alpha = 0;
delete mc.down.onEnterFrame;
mc.down.pic.loadMovie(thepath);
mc.down.onEnterFrame = function() {
FadeIn();
};
}
};
Load = function () {
var thepath:String;
var theurl:String;
var intro = myXML.firstChild;
var len:Number = intro.childNodes.length;
if (i<len) {
thepath = intro.childNodes[i].attributes.path;
theurl = intro.childNodes[i].attributes.url;
mc.down.onRelease = function() {
getURL(theurl, "_blank");
};
mc.down.onEnterFrame = function() {
FadeOut(thepath, theurl);
};
i++;
} else {
i = 0;
thepath = intro.childNodes[i].attributes.path;
theurl = intro.childNodes[i].attributes.url;
mc.down.onRelease = function() {
trace(theurl);
getURL(theurl, "_blank");
};
mc.down.onEnterFrame = function() {
FadeOut(thepath, theurl);
};
i++;
}
};
mc.down._alpha = 0;
//下面的xml读取方式ego已经多次讲过，这里不再赘述，参考相关教程
var myXML = new XML();
myXML.ignoreWhite = true;
myXML.onLoad = function(success) {
if (success) {
Load();
control = setInterval(Load, 5000);
} else {
}
};
myXML.load("title.xml");
当刚开始读取第一张图片的时候，就应该有淡入的效果，所以开始要让mc.down._alpha = 0;然后将外部文件信息用 Load() 全部载入，再调用淡出的效果 FadeOut()，其中myXML.onLoad = function(success) {
if (success) {
Load();
control = setInterval(Load, 5000);
} else {
}
};
里面的Load用于第一次调用，以后将用control = setInterval(Load, 5000);来循环调用，但是我们知道，第一次显示的时候，图片效果是不需要淡出的，所以需要加入判断语句，如果alpha=0的时候直接调入FadeIn函数。但是我们知道，淡入淡出效果执行一次不可能实现，所以记得用 对象.onEnterFrame，当淡入淡出效果完毕以后记得用 delete 对象.onEnterFrame将其删除，否则很消耗内存。
这样我们的图片切换效果就完成了。
方法总结：
1、图片淡入淡出FadeOut、FadeIn算法
2、设定时间频率setInterval的使用办法
心灵鸡汤：编程的思维方式有很多可以灵活运用到生活中，比如我们在做每一件事情的时候，可以把整件事看作一个最终效果，然后把事情分解成一件一件的小事去做，可以提高平时生活中的工作效率。欲速则不达。
