详细内容
 
当前位置
flash课件制作分页技巧
作者:管理员    发布于:2012-07-14 23:57:26    文字:【】【】【

flash课件制作分页技巧

flash课件制作创意概括:

下面是我加的一些效果,供大家参考。我个人认为,一个好的设计者,最重要的因素就是创造力。

这个程序的扩展性很好,只需很少改动甚至只修改1~2处地方,就可以应用在其他方面,比方说新闻列表,mp3、视频播放器列表等等,因为我已经有成功案例了,节省了大量的时间开发重复性工作,所以这里拿出来和大家一起分享。记住:因为你们快乐,所以我很快乐~!

一、建立分页从何下手?

通过一段时间的准备,写了这篇继“关于flash课件制作中图片切换的制作方法”之后的第二篇教程,之前我在网上看过一些人写的例子,但总感觉像是一个模子刻出来的,这其中不难发现肯定存在着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、通过判断语句的嵌套,达到限制每页图片输出的目的;
3、CreateClip传值方法;
4、缓冲移动效果的运用。

附加小程序:
“动态文本框的调用”:也许大家已经注意到了,范例中的题目是通过调用TextField类来实现的,如果不了解这方面使用方法的话,上面的源文件已经给出了范例的应用,作为你学习本教程的额外收获吧~!

脚注信息
版权所有 Copyright(C)2008-2015 龙腾动画(北京龙腾创星科技有限公司) 京ICP备16063988号-3       本站关键词:flash动画制作 

 
QQ在线咨询
咨询热线
010-57477990
7*24咨询热线
13701141129