详解一导航动画的制作过程

这是偶制作东东的思路，怎样把一复杂动画简单化，再把它复杂化。大家多多指点!

最近一朋友叫偶写点东东，介绍一下下面导航条的制作原理
先来look一下这个导航条：http://asp.7i24.com/cnhys/image/da2.swf
当时这家伙说有源文件，谁知下不了，本想给它解释一下，现只好自己做一个了

思考：如这个问题是 你来回答的，你会怎么做？
这是偶的思路：
再复杂的动画也是由简单动画组成的，所以偶们要找找其中的规律，几个方块运动的规律:只有两次运动，一是往右减速运动，一是往左减速运动，所以可作一布尔值来控制，至于减速运动，tulipiing写了很多，所以可以开工了。

一、先解决运动问题
方块的每次运动都是朝一终点运动，所以先要确定两个终点，如下图建立一些东东




把方块的x坐标作为一终点，另一终点定为300,as如下：
start_x=zjs1._x;
end_x=300;
编写运动函数
MovieClip.prototype.move1=function()
{
this._x+=(end_x-this._x)/2;
}//向终点end_x运动
MovieClip.prototype.move2=function()
{
this._x+=(start_x-this._x)/2;
}//返回时的终点

二、调用函数
onenterframe=function()
{
if(click1){
zjs1.move1();
}//如是click1为真，调用move1,否则调用move2
else
{
zjs1.move2();

}
if(click2){
zjs2.move1();

}
else
{
zjs2.move2();

}
}//click1控制方块1 的运动，click2控制方块2 的运动

三、鼠标点击时的设置
zjs1.onrelease=function(){
click1=true;
click2=false;
}//zjs1被点击后，设置布尔值
zjs2.onrelease=function(){
click1=false;
click2=true;
}
运行测试，怎么样？
大体的框架有了，写得该够简单了，你可能发现象这样的程序大家可能很少看到，原因是这程序有个很大的缺点，通用性不够，如果偶有更多的方块如20个，偶也这样一个个写吗？那太辛苦了，接下去我们来优化
从以上程序可以看出有很多重复，效率太低

一、可以把判断和控制运动用一个函数来表示

MovieClip.prototype.move=function(click)
{if(click){this._x+=(end_x-this._x)/2;}
else{this._x+=(start_x-this._x)/2;}}
/*对照前面我们写的程序，找找规律，这个函数的作用是如果click为真，向end_x运动，否则向start-x运动*/

二、影片的名称如果很多，我们可用一数组贮存
myname=["zjs1","zjs2","zjs3"];
for(var i=0;i{this["zjs"+(i+1)].zjs=myname[i];}

鼠标点击影片后，怎行控制布尔值呢？
看看偶的这个函数
MovieClip.prototype.myclick=function(n)
{for(var i=1;i<=myname.length;i++)
{if(i==n){_root["click"+i]=true;}
else{_root["click"+i]=false;}}}
/*每次点击后只有一个为真，其余为假，比如说，zjs1点击后，只有click1为真，click2,click3..........都为假*/

接下去偶们来增加一个mc，有了这些函数后，你想几个就几个，偶以3个为例，先看效果，





as如下：
myname=["zjs1","zjs2","zjs3"];
for(var i=0;i{this["zjs"+(i+1)].zjs=myname[i];}
start_x=zjs1._x;
end_x=300;
MovieClip.prototype.move=function(click)
{if(click){this._x+=(end_x-this._x)/2;
zjs_name=this._name;}
else{this._x+=(start_x-this._x)/2;}}
MovieClip.prototype.myclick=function(n)
{for(var i=1;i<=myname.length;i++)
{if(i==n){_root["click"+i]=true;}
else{_root["click"+i]=false;}}}
onenterframe=function()
{
//以下都为调用函数
for(var i=0;i{this["zjs"+(i+1)].move(eval("click"+(i+1)))}}
zjs1.onrelease=function(){
myclick(1);}
zjs2.onrelease=function(){
myclick(2);}
zjs3.onrelease=function(){
myclick(3);}
源文件

http://www.flash8.net/dispbbs.asp?boardID=10&ID=88412

以上其实只是制作动画的一个简单的开头，偶只做了x方向的变化，其它的变化，如y方向的、大小的变化，颜色的变化等等，相互组合，相信你能作出一个非常cool的效果，好了，今天先到这儿了。
累!吃条鱼<:)))><补充点能量，时间紧，写得匆忙，请见谅

最后来个小应用, 掌握原理后，稍加变化，就可一个不错的导航条
先看效果：



贴代码：过隐
myname=["闪吧论坛","闪吧源码","闪吧教程","闪吧动画","闪吧游戏","闪吧音效","闪吧图库","闪吧字库"];
zjs_y=[];
for(var i=0;i{zjs_y[i]=(i+1)*40;_root["zjs"+(i+1)]._y=zjs_y[i];}
for(var i=0;i{this["zjs"+(i+1)].zjs=myname[i];}

MovieClip.prototype.move=function(click,speed,start_x,start_y,end_x,end_y)
{
if(click){
this._x+=(end_x-this._x)/speed;
this._y+=(end_y-this._y)/speed;
zjs_name=this.zjs;}
else{
this._x+=(start_x-this._x)/speed;
this._y+=(start_y-this._y)/speed}}
MovieClip.prototype.myclick=function(n)
{for(var i=1;i<=myname.length;i++)
{if(i==n){_root["click"+i]=true;}
else{_root["click"+i]=false;}}}
onenterframe=function()
{for(var i=0;i{this["zjs"+(i+1)].move(eval("click"+(i+1)),4,275,zjs_y[i],100,200)}}
zjs1.onrollover=function(){
myclick(1);}
zjs2.onrollover=function(){
myclick(2);}
zjs3.onrollover=function(){
myclick(3);}
zjs4.onrollover=function(){
myclick(4);}
zjs5.onrollover=function(){
myclick(5);}
zjs6.onrollover=function(){
myclick(6);}
zjs7.onrollover=function(){
myclick(7);}
zjs8.onrollover=function(){
myclick(8);}
for(var i=1;i<=myname.length;i++)
{
this["zjs"+i].onrelease=function(){
geturl("http://www.flash8.net";;);
}}
---作者：zjs35---
---如需转载请注明作者:)---