在制作走马灯之前,首先要讲明白。走马灯的效果当中我使用了几个知识,一个是xml里面的读取,一个duplicateMovieClip函数的使用。好现在设计我的走马灯。我把他分为了三个文件,一个是专门放图片的文件夹,一个是xml文件,主要是记录图片的名称。
代码如下。
我新建一个记事本,改后缀名为menu.XML
<?xml version="1.0" encoding="gb2312"?>
<item>
<menuname url0="photo/1.jpg" />
<menuname url0="photo/2.jpg" />
<menuname url0="photo/3.jpg" />
<menuname url0="photo/4.jpg"/>
<menuname url0="photo/5.jpg"/>
<menuname url0="photo/6.jpg"/>
<menuname url0="photo/7.jpg"/>
</item>
这个是很简单的写法,不清楚的话就需要看多其他的资料了。
我要说明的是,这个xml文件主要是记录photo文件夹里面的里面每一张图片的名称,日后方便我们图片外部导入到flash。同样我们修改起来方便
问题:xml文件和外部加载图片的作用是什么?这里要我们去思考的问题,特别网站开发的时候。
接下来我们设计我们的fla文档
第一步:新建文档,我们随便改一个名称叫走马灯.Fla 场景大小594X116
第二步:创建两个影片剪辑名字为kuang 大小为 88X105,一个为mark,为了加上边框效果mark的大小为99x116,正好符合我们的场景大小(注意:我们的图片也要这里处理以kuang的大小为准)
第三步:我们将kuang这个元件放入到mark里面去。名为kuang,
第四步:在元件的链接里面设计mark 和kuang这个标识符。选择第一帧导出
弄好了这些我们的工作可以开始了,就是最麻烦的代码编写
我分了两层写,都在同第一帧写:
第一层:
var pic=new XML();//建立一个xml对象
pic.ignoreWhite=true;
pic.load("menu.XML");//外部加载xml文件
var list=new Array();
pic.onLoad=function(success){
if(success)
{ getpic(pic);
Move(Del);
//trace("ok");
}
}
第二层:
j=2;
function getpic(obj){
this.attachMovie("kuang","kuang",2);
this.attachMovie("mark","mark",3);
picNum=obj.firstChild.childNodes.length;//外部xml的子节点的长度
for(i=0;i<picNum;i++){
mark.duplicateMovieClip("mark"+i,i+50);//复制影片
this["mark"+i].kuang.duplicateMovieClip("kuang"+i,i+300);//复制影片
//mm=eval("mark"+i);//每张图片对象名整一个变量
cont=this["mark"+i]["kuang"+i];
//this["mark"+0]._x=0;
//this["mark"+0]._y=0;
mm=eval("mark"+i);
this["mark"+i]._x=99*i;//mark的坐标分布
this["mark"+i]._y=0;//mark的坐标分布
mm._x=99*i;
mm._y=0;
list[i]=obj.firstChild.childNodes[i].attributes.url0;//获取外部图片的名称
cont.loadMovie(list[i]);//加载图片
}
removeMovieClip("kuang");
removeMovieClip("mark");
}
Del=function(){
for(i=0;i<picNum;i++){
mm=eval("mark"+i);
mm._x-=j;
if(mm._x<-99){
mm._x=(picNum-1)*99;
}
}
}
function Move(obj){
moveID=setInterval(obj,33);
updateAfterEvent();
}
解析代码:
代码就这些了:第一层我写了一个加载xml的代码:原理很简单。目的就是获取外部的图片的地址。也可以这里理解。里面有两个函数
getpic(pic);
Move(Del);
里面有两个参数都是对象
第二层就是xml 结合数组的使用。数组是储存数据的,目的就是将xml的数据放入到数组,日后方便我们调用。当中我们要做的事情有利用 loadmovie 导入图片到我们的影片剪辑那里,第二我们要复制影片剪辑,同时候也要他能动起来。
那么我们需要进行一点计算。特别是我们要注意场景的大小和图片的大小,影片的大小。这三个计算起来。
Del=function(){
for(i=0;i<picNum;i++){
mm=eval("mark"+i);
mm._x-=j;
if(mm._x<-99){
mm._x=(picNum-1)*99;
}
}
function Move(obj){
moveID=setInterval(obj,33);
updateAfterEvent();
}
这段代码就是使我们动起来的关键,利用判断语句使我们的动画动起来和这个 moveID=setInterval(obj,33);这个时间计数器来帮助我们我图片动起来。
同样我们不用计数器可以用onEnterFrame=function()的方法也可以实现我们让外部加载的图片动起来。
运动的函数:
function Move(){
onEnterFrame=function(){
for(i=0;i<picNum;i++){
mm=eval("mark"+i);
mm._x-=j;
if(mm._x<-99){
mm._x=(picNum-1)*99;
}
}
}
}
大概流程:
第一写xml文件,第二,整理好图片的大小,第三步,利用loadmovie将我们的图片加载我们的影片剪辑,第四步就计算位置让这些图片动起来。大概就这样的设计思路
拓展:
走马灯当中我们也可以加入按钮去。我们鼠标停放到图片上一点击就可以超链接这
我们再设计我们的xml文件。好今天就写到这里累。。
写得不好望能见谅--夏天的树人