|
一、建立分页从何下手？
在得到ego老大的支持和其他朋友的鼓励下，通过一段时间的准备，写了这篇继“关于图片切换的制作方法”之后的第二篇教程，之前我在网上看过一些人写的例子，但总感觉像是一个模子刻出来的，这其中不难发现肯定存在着copy，当然我不反对这样。不过在这里我想先岔开个话题，现在网上公开的源代码很多，你完全可以把别人的东西拿来修改然后使用，但是要记住一点，如果代码里面，你编写的东西没有超过50%以上的话，千万别说这个代码是你写的，因为这是做人最基本的道德问题，而且对于学习者来说这也是自欺欺人，水平永远都停留在这个阶段，要知道自己写一遍代码，学到的东西可能不光是代码本身，更重要的是学会了思考，很多人问我同样一个问题，想做一个效果该从哪做起呢？我的回答是“思考+实践”。我通过自己学习，总结出来的经验就是，学习编程其实就是学的一种思想，代码只是一种实现的手段，千万不要为了学代码而学代码。就拿这个贴子的话题来说吧，当你想写一个分页程序的时候，你首先考虑到的是什么呢？我的建议是：
1、先将外部数据调入数组（为什么要使用数组，后面会讲到）；
2、设定每页需要显示多少，至少需要这些自定义参数：行、列、（数组）元素总数；
3、将数组中的数据有选择性的输出；
4、增加显示特效。
（注：本教程以算法为主，代码不作为主要内容，因为方法不唯一）
下面我们就从第一步做起，有些人可能不习惯使用数组，但是它的优点真的很多，管理方便，而且能帮助我们提高效率，寻找它们就像寻找数据库的记录一样，想要什么数据一目了然。下面这段代码就是把xml节点数据读入数组：
Load = function () {
var intro = myXML.firstChild;
var len:Number = intro.childNodes.length;
for (i=0; i<len; i++) {
box[i] = new Array();
box[i][0] = intro.childNodes[i].attributes.spath;
box[i][1] = intro.childNodes[i].attributes.path;
box[i][2] = intro.childNodes[i].attributes.url;
box[i][3] = intro.childNodes[i].attributes.title;
box[i][4] = intro.childNodes[i].attributes.description;
}
record = len;
pages = Math.ceil(len/total);
if (i == len) {
refreshmenu(page);
}
};
读取结束以后，下面才是核心问题，如何将图片输出呢，我们可以根据自己预设的行、列参数来让它自动输出，但是单纯这样输出的话是不会分页的，所以我们要从中针对行、列分别进行一下判断，代码如下：
refreshmenu = function (page) {
var i:Number = 0;
var j:Number = 0;
var num:Number = 0;
copy = function () {
if (i<hang) {
if (j<lie) {
if (total1<=total) {
CreateClip(i, j, num, box[num+(page-1)*total][0], box[num+(page-1)*total][1], box[num+(page-1)*total][2], box[num+(page-1)*total][3], box[num+(page-1)*total][4]);
thecount = ((page-1)*total)+count;
count++;
j++;
num++;
total1++;
}
if (total1>total) {
total1 = 1;
count = 0;
i = 0;
j = 0;
nb.gotoAndStop(1);
pb.gotoAndStop(1);
clearInterval(control);
ListMenu();
}
} else {
j = 0;
i++;
}
}
};
var control = setInterval(copy, 50);
};
上面这段代码没有什么难点，都是一些计数器之类的，关键是上面CreateClip自定义函数，通过它把数组里面的数据和图片的计数器变量读取出来，然后对其进行有选择性的输出。
这里是自定义函数的内部结构：
CreateClip = function (i:Number, j:Number, num:Number, thespath:String, thepath:String, theurl:String, thetitle:String, thedescription:String) {
var movie = mc.createEmptyMovieClip("mc"+i+j, num);
dx = movie.attachMovie("tu", "tu1", 1);
dx._x += (dx._width+feng_x)*j+x;
dx._y += (dx._height+feng_y)*i+y;
dx.msg.selectable = false;
dx.msg.text = thetitle;
dx.imgs = thespath;
dx.link = theurl;
};
上面有两个变量没有用到（thepath、 thedescription），这是为了以后扩展用的，比如做个图片放大读取或者相关信息描述之类的都可以，这里相当于个接口，但是因为他们所涉及到的内容和本教程无关，所以这里不作为研究对象（这里可以当他们不存在）。其中每个图片（dx）里面的第一帧也有一些代码，不过只是限制图片大小和加载图片的简短代码，老声常谈的东西这里就不赘述了。
之后我们再继续添加关于翻页按钮输出：
ListMenu = function () {
var menupath = mc.menu.menu1;
menu._x = x+30;
menu_y = y+hang*(dx._height+feng_y);
menu._y = menu_y;
menupath.up.onRelease = function() {
if (page == 1) {
} else {
page--;
refreshmenu(page);
}
gotoAndStop(1);
};
menupath.down.onRelease = function() {
if (page == pages) {
} else {
page++;
refreshmenu(page);
}
gotoAndStop(1);
};
menupath.makesure.onRelease = function() {
if ((menupath.jump.text>pages) || (menupath.jump.text<1)) {
menupath.jump.text = page;
makesure = true;
} else {
page = menupath.jump.text;
refreshmenu(page);
}
};
mc.menu.menu1.totaltxt.selectable = false;
mc.menu.menu1.pagetxt.selectable = false;
mc.menu.menu1.totaltxt.text = "--共"+pages+"页--";
mc.menu.menu1.pagetxt.text = "--第"+page+"页--";
};
这样，一个分页展示的雏形基本就已经出来了，下面给出了源文件fenye.rar，但是这样程序是不健全的，我们可以从中看到很多的不完善：
1、最后一页图片出现undefined;
2、狂点翻页按钮，显示会出现问题，因为图片是循环输出的，有时间间隔，当还没完全输出的时候，又点击了另外一组图片，所以显示就会错误了;
在下面我们就继续来分析如何解决上述bug。
fenye.rar
二、如何完善你的程序？
什么样的程序才能算是完善呢，首先你的程序的bug要全部得到解决，所以你可以让别人来帮你一起测试，做到万无一失；第二点是你的程序功能是否可以扩展，如果我们需要做很多程序，而其中有些东西是可以再利用的，如果前期工作没有做好的话，那么很可能你要把代码再重新写一遍，做重复性的工作，所以我们在写程序的时候，要多想想后面你会碰到什么样的问题以方便将来程序的扩展；还有一点，你的想法是否“另类”，能够让你的效果看上去与众不同。
下面我们就来一步步解决这些问题。针对第一点，程序中出现的undefined是因为他们是多余的，没有数据传输过去，所以我们应该想办法把他们屏蔽掉。
我做了如下修改：
if (total1<=total) {
if (total1<=flag) {
CreateClip(i, j, num, box[num+(page-1)*total][0], box[num+(page-1)*total][1], box[num+(page-1)*total][2], box[num+(page-1)*total][3], box[num+(page-1)*total][4]);
thecount = ((page-1)*total)+count;
count++;
j++;
} else {
var movie = mc.createEmptyMovieClip("mc"+i+j, num);
movie.removeMovieClip();
}
num++;
total1++;
}
我新引入了一个变量flag，是用来判断本页应该显示几张图片的，var movie = mc.createEmptyMovieClip(”mc”+i+j, num);movie.removeMovieClip();
这两句是用来屏蔽undefined用的。
关于防止用户狂点按钮，我们可以采取当图片正在显示过程中，让按钮失效的做法，再引入一个变量makesure，把按钮代码做如下修改：
menupath.up.onRelease = function() {
if (makesure == true) {
makesure = false;
if (page == 2) {
menupath.up._visible = false;
} else {
menupath.up._visible = true;
menupath.down._visible = true;
}
page--;
refreshmenu(page);
}
gotoAndStop(1);
};
menupath.down.onRelease = function() {
if (makesure == true) {
makesure = false;
if (page == pages-1) {
menupath.down._visible = false;
} else {
menupath.up._visible = true;
menupath.down._visible = true;
}
page++;
refreshmenu(page);
gotoAndStop(1);
}
};
menupath.makesure.onRelease = function() {
if (makesure == true) {
makesure = false;
if ((menupath.jump.text>pages) || (menupath.jump.text<1)) {
menupath.jump.text = page;
makesure = true;
} else {
page = menupath.jump.text;
refreshmenu(page);
}
if (page == 1) {
menupath.up._visible = false;
menupath.down._visible = true;
} else if (page == pages) {
menupath.up._visible = true;
menupath.down._visible = false;
} else {
menupath.up._visible = true;
menupath.down._visible = true;
}
}
};
现在来讲，一个分页展示就已经完成了，测试一下吧~~！见（fenye1.rar）
******************************************************************
（进阶教程——-图片飞入）
现在网站上流行的主要是一些比较动感的特效，在这里，我做的是让每张图片按先后次序连续飞入场景的特效，代码如下：
PicIn = function () {
for (i=0; i<hang; i++) {
for (j=0; j<lie; j++) {
mc["mc"+i+j]._y += (InTarget-mc["mc"+i+j]._y)*0.2;
}
}
};
因为之前我们已经将每个图片在场景中实例化了，所以我们可以利用他们来做出一些效果出来。
这里我突然又有了一个想法，如果能让翻页按钮随着行高的不同而跟随的变化的话，感觉也蛮不错的，但是怎样让他知道当前的高度是多少呢？经过思考，我的算法是这样的：
if (page == pages) {
menu_y = y+Math.ceil(flag/lie)*(dx._height+feng_y);
} else {
menu_y = y+hang*(dx._height+feng_y);
}
经过判断，如果没有到达最后一页的话，高度直接按照规定的行高就可以，否则把当前的行高重新计算再赋值。这样，图片飞入的效果就实现了。代码不算难，关键还是一个思路的问题。
（见fenye2.rar）
fenye1.rar
fenye2.rar
三、我的创意我作主
下面是我加的一些效果，供大家参考。我个人认为，一个好的设计者，最重要的因素就是创造力。
这个程序的扩展性很好，只需很少改动甚至只修改1~2处地方，就可以应用在其他方面，比方说新闻列表，mp3、视频播放器列表等等，因为我已经有成功案例了，节省了大量的时间开发重复性工作，所以这里拿出来和大家一起分享。记住：因为你们快乐，所以我很快乐~！
方法总结：
1、利用数组保存临时数据；
2、通过判断语句的嵌套，达到限制每页图片输出的目的；
3、CreateClip传值方法；
4、缓冲移动效果的运用。
附加小程序：
“动态文本框的调用”：也许大家已经注意到了，范例中的题目是通过调用TextField类来实现的，如果不了解这方面使用方法的话，上面的源文件已经给出了范例的应用，作为你学习本教程的额外收获吧~！
(责任编辑：admin) |
