xml|程序|分页
Flash调用外部的XML程序来显示新闻,当新闻达到一定数目时就存在分页的问题,今天仔细想了一下,大概可以有两种实现的方法,第一种比较简单,首先获取把XML文件的新闻数目,然后除以每页要显示的条目数,就可以知道一共有多少页,然后通过调用每页新闻来实现分页效果,例如:每页显示10条新闻,XML文件一共有36条新闻,那么应该显示4页,也就是Math.floor(36/10)+1,这样有个问题,假设新闻数目n刚好符合n%10==0的条件,此时页数应该不用加1,我开始忽略了这个问题,在做《天下贰》官方网站时发现上面的新闻条数刚好是10条,所以出现了一个空页面,要做个判断就可以避免这种问题.
现在一步步来实现,首先在场景中新建一个名为news_a的MC,里面包含一个名为dname动态文本框用来显示XML中的数据,OK,用duplicateMovieClip函数复制10个news_a用来显示调用的10条新闻,此时如果页面数大于1,还需要显示“下一页”按钮进行分页加载,同理如果存在上一页,则需要显示“上一页”按钮进行分页加载。给“下一页”按钮命名为nextp,“上一页”按钮为previousp,默认时两个按钮的状态都为不可见。
假设外部文件新闻的XML文件是news.xml,具体程序如下:
var news_xml:XML = new XML();
news_xml.onLoad = function(success:Boolean):Void {
if (success) {//加载XML文件成功
var newsItems:Array = news_xml.firstChild.childNodes;
(newsItems.length%10 == 0)?(var pages:Number = Math.floor(newsItems.length/10)):(var pages = Math.floor(newsItems.length/10)+1);//判断页数
if (pages>1 ){
nextp._visible = true;//如果页面数大于1,显示“下一页”按钮
}//本文原创,转载请注明出处!(http://www.xiacong.com)
for (var i:Number = 0; i<10; i++) {//初始状态时加载最新的10条新闻
news_a.duplicateMovieClip("na"+i, i+1000);
with(eval("na"+i)){
_x = 0;
_y = 0+i*24;
if(newsItems[i].firstChild.firstChild.nodeValue!=null){
this.dname.text = newsItems[i].firstChild.firstChild.nodeValue;
this.id = i;
this.onRollOver = menuOver;
this.onRelease = menuRelease;
this.onRollOut = menuOut;}
}
}
} else {
news_a.dname.text = "新闻加载失败";
}
};
news_xml.load("news.xml");//加载外部XML文件的路径上面的代码已经加载了默认最新的10条新闻,现在来进行分页加载,分别有两个函数:上一页函数previouspages() 和下一页函数nextpages();
上一页和下一页的实现原理是:当点击“下一页”时,利用removeMovieClip()卸载之前显示的全部内容(这为了节约CPU和内存消耗),当点击"上一页"时,也要卸载之前显示的内容,然后利用类似于上面代码的功能将新的新闻条目载入到动态文本框中,函数程序如下:
function nextpages() {
++page;
var newsItems:Array = news_xml.firstChild.childNodes;
(newsItems.length%10 == 0)?(var pages:Number = Math.floor(newsItems.length/10)):(var pages = Math.floor(newsItems.length/10)+1);//判断页数
if ((page+1) == pages) {
nextp._visible = false;
}
if (page != 0) {
previousp._visible = true;
}//本文原创,转载请注明出处!(http://www.xiacong.com)
for (p=0; p<10; p++) {
removeMovieClip("na"+((page-1)*10+p));
trace("na"+((page-1)*10+p));
news_a.duplicateMovieClip("na"+((page*10)+p), (page*10)+p+1000);
eval("na"+((page*10)+p))._x = 0;
eval("na"+((page*10)+p))._y = 0+p*24;
if(newsItems[(page*10)+p].firstChild.firstChild.nodeValue!=null){
eval("na"+((page*10)+p)).dname.text = newsItems[(page*10)+p].firstChild.firstChild.nodeValue;
eval("na"+((page*10)+p)).id = (page*10)+p;
eval("na"+((page*10)+p)).onRollOver = menuOver;
eval("na"+((page*10)+p)).onRelease = menuRelease;
eval("na"+((page*10)+p)).onRollOut = menuOut;}
}
}function previouspages() {
--page;
var newsItems:Array = news_xml.firstChild.childNodes;
(newsItems.length%10 == 0)?(var pages:Number = Math.floor(newsItems.length/10)):(var pages = Math.floor(newsItems.length/10)+1);//判断页数
if (page == 0) {
previousp._visible = false;
}
if ((page+1) != pages) {
nextp._visible = true;
}//本文原创,转载请注明出处!(http://www.xiacong.com)
for (p=0; p<10; p++) {
removeMovieClip("na"+((page+1)*10+p));
trace("na"+((page+1)*10+p));
news_a.duplicateMovieClip("na"+((page*10)+p), (page*10)+p+1000);
eval("na"+((page*10)+p))._x = 0;
eval("na"+((page*10)+p))._y = 0+p*24;
eval("na"+((page*10)+p)).dname.text = newsItems[(page*10)+p].firstChild.firstChild.nodeValue;
eval("na"+((page*10)+p)).id = (page*10)+p;
eval("na"+((page*10)+p)).onRollOver = menuOver;
eval("na"+((page*10)+p)).onRelease = menuRelease;
eval("na"+((page*10)+p)).onRollOut = menuOut;
}
}OK,分页全部实现!上面代码中的menuRelease;menuOver;menuOut表示了鼠标的动作,呵呵~当鼠标放上去时显示不同的颜色,点击时链接到详细新闻页面~~
function menuOver() {
eval("na"+this.id).dname.textColor = "0xffffff";
}
function menuOut() {
eval("na"+this.id).dname.textColor = "0xFDE5B9";
}
function menuRelease() {
var url_link = news_xml.firstChild.childNodes[this.id].childNodes[1].firstChild.nodeValue;
if (url_link != null) {
getURL("javascript:void(open_window(\’"+url_link+"\’))");
}
}终于大功告成,大家可以测试一下,我尽量用容易理解的思维方式和程序实现了分页效果,这也是网易《天下贰》内测官方网站Flash加载外部XML实现新闻的源代码,呵呵~
另外还想了一种方法,因为每页加载固定量的新闻条目,比如10条,那么第一页就是显示1-10,第二页显示11-20,如此类推,可以用页面的变量p*10+(0-10)来加载,1、11、21、31……这些都是放在同一区域,所以比较容易实现,有兴趣的可以试试~~呵呵