一、深思熟虑，点滴做起

　　最近有好多人问我关于制作图片切换的问题，感觉这个问题是很多人普遍存在的一个现象。在很多的韩国网站上都有类似的模版，直接拿来可以套用，但是如果想完全自定义一个真正属于自己的，能够灵活运用的一个程序来说，有很多的障碍，即使是破解的，处理起来可能也不是完全满意的。正好今天我在工作中也设计到了这部分的内容，做了一下，由于时间有限，我以后循序渐进讲解，今天先从基础的做起。（注：本教程主要以介绍思路为主，方法可以变通，不作为主要内容） 首先，当我们要实现一个整体效果的时候，要将效果分成若干部分，每个部分都有独立的功能，然后将各部分再整合到一起，一般作为老手肯定都知道，但是新手要养成一个良好的编程习惯。闲话少絮，下面看一下我的设计思路。

　　第一、想象一个图片切换的方式（这里以一个简单的淡入淡出效果为例）
　　第二、能够让图像自动按一定时间切换（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的使用办法

　　心灵鸡汤：编程的思维方式有很多可以灵活运用到生活中，比如我们在做每一件事情的时候，可以把整件事看作一个最终效果，然后把事情分解成一件一件的小事去做，可以提高平时生活中的工作效率。欲速则不达。

change1.rar

二、举一反三，发散思维

　　有了上面的基础，接下来我们就该进行下一步，按钮的制作了。其他地方改动不大，在制作的时候，我们先将按钮输出，同时伴有标号1、2、3.。。等一切没问题之后，再实现按钮的功能。这就是我将要为大家讲解的 ListBtn()功能的实现。先看下代码：

    ListBtn = function () { 
        var btnpath:Array = new Array(); 
        var btnurl:Array = new Array(); 
        var btn_x:Number = 10; 
        var btn_y:Number = 200; 
        var space:Number = 20; 
        var intro = myXML.firstChild; 
        var len:Number = intro.childNodes.length; 
        for (i=0; i<len; i++) { 
            var btn = attachMovie("botton", "botton"+i, this.getNextHighestDepth(), {_x:btn_x+i*space, _y:btn_y}); 
            btn.btnpath = intro.childNodes[i].attributes.path; 
            btn.btnurl = intro.childNodes[i].attributes.url; 
            btn.txt.selectable = false; 
            btn.num = i+1; 
            btn.ii = i; 
        } 
    };

　　对C语言稍有基础的人，一看便知，计算按钮的个数，主要用到了length，这个是记录节点长度的，其次是将各个按钮对应图片的路径和链接一个个的传到每个按钮中去，就是

    btn.btnpath = intro.childNodes[i].attributes.path; 
    btn.btnurl = intro.childNodes[i].attributes.url;  

　　这个就是主要的大致思路，其他的没什么难点。下面就要对每个按钮接收到参数以后执行哪些操作进行设计，btn第一帧代码如下：

    stop(); 
    var btnpath:Number; 
    var btnurl:Number; 
    var num:Number; 
    var ii:Number; 
    var my_fmt:TextFormat = new TextFormat(); 
    txt.text = num; 
    this.onEnterFrame = function() { 
        if (ii == (_global.i-1)) { 
            my_fmt.color = 0xffffff; 
            txt.setTextFormat(my_fmt); 
            nextFrame(); 
        } else { 
            my_fmt.color = 0x000000; 
            txt.setTextFormat(my_fmt); 
            prevFrame(); 
        } 
    }; 
    thebtn.onRelease = function() { 
        clearInterval(_parent.control); 
        _global.i = ii; 
        _parent.mc.down.onEnterFrame = function() { 
            _parent.FadeOut(btnpath, btnurl); 
        }; 
        _global.i++; 
        _parent.control = setInterval(_parent.Load, 5000); 
    };

　　当点击按钮完毕的时候，应该让自动时间重新计时，否则刚点击完毕后，可能会和自动切换相冲突，所以要用到 clearInterval(_parent.control);将其删除。_global.i 是个全局变量，对整个影片有效，他的作用就是记录当前图片所在位置的。当图片切换完毕（即调用FadeOut结束后）再次调用_parent.control = setInterval(_parent.Load, 5000);就达到了重新计时的目的。其实，现在的功能已经都实现并正常运作了，为了使效果更美观，我们可以在按钮中加些时间轴效果变换，然后用

    this.onEnterFrame = function() { 
        if (ii == (_global.i-1)) { 
            my_fmt.color = 0xffffff; 
            txt.setTextFormat(my_fmt); 
            nextFrame(); 
        } else { 
            my_fmt.color = 0x000000; 
            txt.setTextFormat(my_fmt); 
            prevFrame(); 
        } 
    };

中的nextFrame()、prevFrame()进行播放就可以了。my_fmt:TextFormat = new TextFormat();是对字体样式进行的设置，然后通过txt.setTextFormat(my_fmt);应用到文本框当中去，上面的if语句，就是对其进行判断，当按钮被选中时，文字变白色，否则变黑色。
　　好了，到此为止，基本功能已经实现，而且网络当中大部分流传的源代码基本也都如此，大同小异。不过之前我讲过，做东西要学会举一反三，后面我将为大家介绍一些网络中很少用到的或者是没出现过的做法。

　　方法总结：
　　1、循环输出按钮 ListBtn() 的算法
　　2、clearInterval的使用方法
　　3、文本样式的使用 new TextFormat()

　　心灵鸡汤：写程序要讲究条理性，生活中亦如此，先把要做的事情想清楚再去做，当做完以后，可以考虑是否能够锦上添花，使事情做得更完美。（就像上例中的按钮一样）??

*****下面的内容是举一反三，在上面的基础做了变化*****

1、遮罩变化
　　这里主要需要将思路放宽，变化效果是在一个已经出现的图片上面再出现一张图片，并且伴随过度效果，所以我们可以很容易想到，图片需要被加载到不同的mc上面（比方建立2个mc，上面的叫up，下面的叫down），再建立一个mask层。这个是前期思路，后面我们可以根据效果来想象出，down一开始已经加载了第一张图片，up加载了第二张，再把遮罩mask与up建立关系（setMask），然后开始播放mask，当up图片全部展开之后，再用down加载up的图片，这样就完成了一次切换的过程。随后，我们可以继续扩展，建立多个遮罩层，分别起好名字，然后在调用遮罩的时候，使用一个（random）随机函数，这样每次的图片切换效果都会不一样的。下面我做了一个范例，设计了5个不同的遮罩效果：

2、视频与flash的合成
　　下面这个flash是在原有的基础上进行了修改，在场景上建立了一个影片剪辑，然后将视频导入，在末尾加入关键桢，输入代码_parent.FadeIn(thepath,theurl)，让它来调用主影片的函数。接下来让FadeOut()播放这段视频就可以了。别忘了，每个按钮单击事件亦如此，让他们分别调用FadeOut()就可以了。

3、滚动效果的实现
　　这个思路和上面的又不一样了，我的想法是这样的，先建立个mc，然后将每个图片都读取出来，并按照图片的宽度将他们排列开到mc里面，再把第一张图片读取一遍加载到最后（比方有5个图片，加载顺序就是1、2、3、4、5、1），最后那个图片的作用就是，当5换到后面那个1的时候，再将mc的_x坐标赋值成前面那个1的_x坐标，然后再利用setInterval对他们进行每隔N秒移动M像素就可以了（N、M自定义）。可以设一个变量（比方设为i）显示当前的图片个数，然后让按钮调用这个i就可以了，这样当图片显示到第几个的时候，按钮也会变到相应的位置。
　　下面是我做的效果，可以设置4个不同方向滚动，我默认设置的是向下滚动：

　　好了，举一反三到此结束，上面都是一些核心思想，也许你们看我叙述的很简单，但是别忘了中国有句古话“说起来容易做起来难”，但是还有一句话，叫做“师傅领进门，修行在个人”，虽然这里我不能将源文件都上传（考虑到老大的空间很宝贵，不忍心占用了，以后大于97kb的文件就不上传了）但是我把方法已经告诉给大家了，有了这些思想，你只需要一步步将他们实现就可以了，难道还怕找不到原材料吗？

change2.rar

三、精益求精，锦上添花

　　在上面的基础完成之后，有一个问题，可能用过模版的人都知道，就是他们的代码有的感觉逻辑很复杂，不易修改，这是因为破解的原因，即便是我自己写的程序，有的再破解出来，我都感觉莫名其妙（当然对于一些简单的效果破解出来没太大问题）。上面的程序，如果只是展示几张图片的话，没太大问题，但如果展示几十张或更多的话，恐怕用起来就困难了，所以这里我再提供一个思路，为其锦上添花。
　　将按钮也做成滚动效果，不失为一个好方法，下面是核心代码：

    Mask = function (px, py, pw, ph) { 
        createEmptyMovieClip("mc_mask", 11); 
        with (mc_mask) { 
            beginFill(0xffffff, 20); 
            moveTo(px, py-5); 
            lineTo(px+pw, py-5); 
            lineTo(px+pw, py+ph+5); 
            lineTo(px, py+ph+5); 
            lineTo(px, py-5); 
            endFill(); 
        } 
        mc_btn.list.setMask("mc_mask"); 
    }; 
    ListBtn = function () { 
        var btnpath:Array = new Array(); 
        var btnurl:Array = new Array(); 
        //按钮初始化位置 
        var btn_x:Number = 40; 
        var btn_y:Number = Stage.height-25; 
        //按钮+间隙的宽度 
        var space:Number = 20; 
        //需要显示按钮的个数 
        var showbtn:Number = 7; 
        var page:Number = 0; 
        createEmptyMovieClip("mc_btn", 10); 
        mc_btn.createEmptyMovieClip("direct", 2); 
        mc_btn.createEmptyMovieClip("list", 1); 
        var left:MovieClip = mc_btn.direct.attachMovie("left", "left1", 1); 
        var right:MovieClip = mc_btn.direct.attachMovie("right", "right1", 2); 
        left._x = btn_x-28; 
        right._x = btn_x+showbtn*space+10; 
        left._y = right._y=btn_y; 
        Mask(btn_x, btn_y, showbtn*space, space); 
        var intro = myXML.firstChild; 
        var len:Number = intro.childNodes.length; 
        for (i=0; i<len; i++) { 
            var btn = mc_btn.list.attachMovie("botton", "botton"+i, i, {_x:btn_x+i*space, _y:btn_y}); 
            btn.btnpath = intro.childNodes[i].attributes.path; 
            btn.btnurl = intro.childNodes[i].attributes.url; 
            btn.txt.selectable = false; 
            btn.num = i+1; 
            btn.ii = i; 
        } 
        mc_btn.list.onEnterFrame = function() { 
            mc_btn.list._x += (mov-mc_btn.list._x)*0.2; 
        }; 
        left._visible = false; 
        left.onRelease = function() { 
            clearInterval(control); 
            if (page>0) { 
                right._visible = true; 
                left._visible = true; 
                mov = -(showbtn*space)*--page; 
            } 
            if (page<=0) { 
                left._visible = false; 
            } 
            control = setInterval(Load, scrolltime); 
        }; 
        right.onRelease = function() { 
            clearInterval(control); 
            if (page<math.ceil(len/showbtn)-1) { 
                left._visible = true; 
                right._visible = true; 
                mov = -(showbtn*space)*++page; 
            } 
            if (page>=Math.ceil(len/showbtn)-1) { 
                right._visible = false; 
            } 
            control = setInterval(Load, scrolltime); 
        };};

　　这里和上一节举一反三中的滚动效果差不多，也是现将按钮根据图片个数全部展示出来，不同的是，需要在按钮上建立个动态遮罩，然后设置一个变量可以随时控制显示按钮的多少。别的东西都讲过了，这里主要提一下遮罩的算法Mask()。先建立个空影片，然后在空影片中进行绘图，beginFill()与endFill()是成对出现的，里面的moveTo()和lineTo()是设置绘制的起始点。这里面我设置的参数，是将其绘制成一个矩形，矩形的宽度就是按钮之和的宽度。
　　之后需要设置左右按钮，并且最好能让左右按钮随着数字按钮的多少而改变距离，这样维护起来才方便，主要就是这段代码：

    left._x = btn_x-28; 
    right._x = btn_x+showbtn*space+10; 
    left._y = right._y=btn_y;  

showbtn是显示按钮的个数，space是每个按钮的宽度。然后是实现其左右键功能，代码上面已经给出，应该不算难吧，呵呵。
　　好了，这样看起来，这个程序的使用价值就更大了，你说是吧~！

　　方法总结：
　　1、Mask()的算法与相应的绘图语句
　　2、left、right键算法的实现

　　心灵鸡汤：“联想”是人特有的本领，当我们做完一件事情的时候，应该将其进行总结，因为当你做其他事情的时候，也许只是在重复上一次的工作，那你是否会联想到上一次是如何做的，然后提高自己的工作效率呢？（比方第二节举一反三提到的滚动效果，在这里的ListBtn()中再次可以使用）

change6.rar

四、创意无限，舍我其谁　
　　这里面是将前面提到效果的综合运用，只有你想不到的，没有你做不到的。

小憩：
　　很多朋友在遇到困难求助的时候，是不是遇到过这样的情况，一般别人回复你有三种形式：
　　1、将源文件直接给你。这个是对于求助者最大的帮助，不需要明白代码原理，只需要修改一些原件和参数即可运用，虽然可解燃眉之急，但是究其原因，不得其解。
　　2、给出相关语句。这个语句可能只是部分的，对于求助者而言，指点了一条明路，但是距离成功还有很长的一段路要走，需要自己查找相关书籍和帮助信息。
　　3、没有给出源文件与相关代码，只给出相关思路算法。这个是对求助者最大的帮助，虽然暂时没得到成品，但是知道了制造过程之后，最终你是能得到它的。
　　不知道大家是否听过这样的例子：有一家密制的酱汁鸡翅非常好吃，你想去学习，你可能遇到三种情况，第一种就是，师傅直接将密制酱汁给你，这样你自己也可以做了，但是酱汁用完后该如何呢？第二种，师傅给你一些制作工具，可能不是全部的，还得需要自己去研究和寻找。第三种就是，师傅告诉你制作密制酱汁的方法，别的什么都没给你，这样，你就学会了其原理，至于原材料，总会想办法寻找得到的。
　　希望我的教程能带给大家更多的收获，如果你们给我大力的支持，我将不胜感激。