我们今天要做的是一个很漂亮的菜单效果，在制作纯flash的网站时可以用上，绝对比平时常见的菜单有新意，很有视觉冲击力，大部分的动画效果都由as来完成。我会力求详细而全面的介绍整个实例的制作方法与原理，帮助大家更加深入的了解flash内部的坐标系统以及如何使用as来制作动画效果，并谈一谈关于学习as的小技巧。
实例效果描述：
在实例中左边是3个按钮，任意点击一个按钮，此按钮的边框就会滑动变大为一个色块并显示详细的内容。点击这个色块，你会发现你可以拖动它到任意位置，再次点击就取消了拖动。在这个色块的左上角有一个back按钮，点击back按钮，色块将变为边框并回到按钮1上，最妙的是当你再次点击按钮1时，再次出现的色块将停留在上次被拖动到的位置。如此奇妙的效果是怎样实现的呢？（文章末尾提供源文件下载学习）
实现原理：
本例充分的利用了as的坐标替换，我们首先要预设一个坐标值决定当用鼠标点击按钮时，色块第一次滑动出来时停止的位置，当用鼠标拖动色块时，使用变量来保存移动后的色块元件的横坐标与纵坐标，当点击了“back”按钮使色块滑动回去之后，再次点击按钮就使用保存的移动后的色块元件的横坐标与纵坐标来代替预设值，因此，色块将回到上一次运动的位置。那么怎样用as来控制元件的移动呢？其实很简单，当按钮被点下的时候，我们有运动物体（即色块）的初始横、纵坐标与终点位置的横、纵坐标（第一次为初始值），那么我们可以设定一个循环的每隔一帧执行一次的as，而这个as的内容是从改变元件的横纵坐标，使之接近终点，由于时间间隔很短，连续起来看上去就是元件在做motion运动了。当判断到元件现在的位置与终点的位置相差不大时就可以终止循环，并将最终的终点横、纵坐标赋予元件，完成运动。看上去比较复杂，但是由于有前面的基础，我相信一切都不是问题，现在我们马上开始神奇的菜单之旅。
制作步骤：
打开flash，新建一个影片，modify-movie设置此影片的宽为550，高为400，背景色为深蓝色，并且frame rats设置为120。（如图4）
Frame rate的含义是每秒钟影片播放帧数，默认值为12，即每秒影片播放12帧，但是为了达到更好的效果我们可以把这个数值提高，这样影片播放更加流畅自然。insert-symbol，新建元件命名为：“框”，在工具栏上选择rectangle tool，设置strock color为白色，fill color为none。画一个框，你可以自己决定这个框的大小，在本例中我做的是：宽为84.3，高为23.8，（如图5）windows-panels-align在align面板上将这个框居中对齐。
新建元件命名为：“色块”在工具栏上选择rectangle tool设置其stroke color为无，fill
color为浅蓝色。绘制一个矩形，windows-panels-info在info面板上设置它的宽为199，高为248。（如图6）
新建元件属性为按钮，命名为“隐藏按钮”，在hit帧建立关键帧，从library中拖拽“色块”元件layer1，在align面板上设置居中对齐。
新建元件命名为：“as”，现在先不用急着编辑as代码，我们在下面将有详细的讲解，。
新建元件属性为按钮，命名为“菜单按钮1”，在工具栏上选择rectangle tool设置其stroke color为无，fill color为蓝色，绘制一个矩形在info面板上设置其宽为84.3，高为23.8，再设置其居中对齐。使用text tool输入文字“按钮1”，文字颜色为白色。（如图7）
新建元件属性为按钮，命名为“back”，使用text tool输入文字"back"，文字颜色为浅黄色。设置其居中对齐。
新建元件命名为“弹出”，在layer1的第15帧建立关键帧，从library中拖拽“色块”元件到这一帧。新建一层layer2，在第15帧新建关键帧，从library中拖拽“隐藏按钮”元件到这一帧，并设置居中对齐。再新建一层layer3，在第15帧新建关键帧，从library中拖拽“back”元件到这一帧，将其放置在“色块”元件的左上角。
在library中双击“框”元件，对其进行编辑，从library中拖拽“弹出”元件到layer 1， windows-panels-instance在弹出的instance面板上将其name属性设置为cc。在info面板上设置其宽为84.2，高为23.6，设置居中对齐。在library中双击“弹出”元件，对其进行编辑，鼠标拖拽layer1上的第一帧到第15帧，鼠标右键单击第20帧，在弹出的菜单中选择insert keyframe新建关键帧。鼠标单击第15帧，windows-panels-effect打开effect面板在下拉菜单中选择alpha，设置alpha=0%。鼠标右键单击从第15帧到第20帧的任意一帧，在弹出的菜单中选择creat motion tween，建立motion动画。鼠标右键单击layer1上第一帧，在弹出的菜单中选择insert keyframe，双击这一帧，在弹出的frame actions面板上输入：stop();（如图8，9）
新建元件命名为“综合”，从library中拖拽“框”元件到layer1，打开info面板，设置其横坐标为：-84.3，纵坐标为：-23.8。其实就是将其右下角与中心点对齐就可以了，windows-panels-instance在弹出的instance面板上将其name属性设置为aa。再从library中拖拽“按钮1”到layer1，使其正好位于“框”元件的上方。最后将“as”元件拖拽到layer 1，随意放置在任意位置。值得注意的是，我们这次将采用含有as代码的mc 来控制整个影片，而不是象过去一样将as写在每一个mc的关键帧里。（如图10）
回到scene 1，将“综合”元件拖拽到layer1，windows-panels-instance在弹出的instance面板上将其name属性设置为zh1。用鼠标将其拖拽到左上角。
好了我们已经完成了所有的元件制作，就只差最关键的as编写了，现在大家不妨自己先做一下，那怕是做不出效果，但是只要多动手，就会对自己有好处。自己动手的时候肯定会遇到一些问题，多想想如何解决，这样印象才深刻，对自己大有好处。
现在我们添加as控制动画的效果，在library中双击“弹出”元件，开始对其进行编辑。我们首先要记得在上一节中，我们将“弹出”元件放置在了框元件中，并且设置其name属性为cc，这对我们理解以下的as有很大的好处。右键选中“弹出”元件中的隐形按钮，在弹出菜单上选择actions，打开actions面板，在其中输入如下as：
on (press) {
startDrag ("/zh1/aa");
}
//这段as的含义是，当鼠标按下时开始拖动在name 属性为zh1的元件内的name属性为aa的元件。（其实就是“框”元件）
on (release) {
stopDrag ();
xx = _root.zh1.aa:_x;
yy = _root.zh1.aa:_y;
jj = 1;
}
//当鼠标释放时，停止对该元件的拖动，并且将此时的name属性为aa的元件（即“框”元件）的x坐标储存在变量xx中，y坐标储存在变量yy中。最后设置变量jj的值为1。
鼠标右键单击“back”按钮元件，打开action面板，输入as代码：
on (release) {
tellTarget ("/zh1/as") {
gotoAndPlay (4);
}
setProperty ("_root.zh1.aa.cc", _visible, 0);
}
//这段as的含义是当鼠标点击了此按钮后，as元件将跳转到第4帧开始播放，设置name属性为cc的元件为不可见。
这样就完成了对“弹出”元件的as编辑，接下来在library中双击“综合”元件，开始对其进行编辑，在前面的制作中我们在“综合”元件内放置了另外三个元件，一个是“框"元件，并设置了其name属性为aa，另一个是“按钮1”元件，还有一个as元件。在上一节中，我们并没有编辑“as”元件中的as命令，现在我们开始编辑它。在library面板上双击“as”元件，鼠标双击第一帧，在弹出的frame action面板上输入如下的as ：
aaax = 125;
aaay = 120;
stop ();
//这段as的含义是设置一个初始的横、纵坐标，其值分别储存在变量aaax,aaay 中。并且在这一帧停止运动。
在第二帧新建关键帧，输入如下as：
if (_root.zh1.aa.cc.jj==1) {
aaax = _root.zh1.aa.cc.xx;
aaay = _root.zh1.aa.cc.yy;
} else {
aaax = 125;
aaay = 120;
}
//这段代码的含义是：如果元件.cc下的jj这个变量为1，那么就将元件cc下的xx变量值传递给变量aaax, 将元件cc下的yy变量值传递给变量aaay。否则的话aaax和aaay保持初始值不变。（xx,yy变量中储存的是上一次拖拽后的坐标位置）
这段代码非常关键，我们来详细讲解一下。先注意一下语法：
_root.zh1.aa.cc.jj==1
表示的是在根下（即场景中）的name属性为zh1的元件内包含了一个name属性为aa的元件，而此name属性为aa的元件内有个name属性为常常的元件，最后在name属性为cc的元件内有变量jj。“==”用来判断是否相等。
我们知道，我们要做的效果是，当鼠标点击按钮后，按钮的边框将飞出至某一位置静止后，在框内出现一面板显示内容。而此我们是可以使用鼠标自由的拖拽此面板的。并且，当我们点击面板上的back按钮后，面板将消失，框将缩小并回到按钮上。再一次点击按钮，框将自动移动到上一次被拖动的位置，并出现面板。现在的问题是要如何使框自动回到上一次的被拖拽的位置，很显然我们需要将最后一次拖拽停止时的坐标值记录下来。当框再次移动时，就使用记录的坐标值来替换初始的坐标值。而回头看一下前面在“弹出”元件（也就是name属性为cc的元件）内的as，只有当我们使用鼠标拖拽了元件之后，变量jj才会等于1。设置jj变量的原因是，我们要确定浏览者是否进行拖拽，当jj=1时，毫无疑问，已经进行过拖拽，我们可以使用记录的坐标值替换初始组表值了。
这是整个as的一个重点，大家请多看看，再多作一下，一定会有所收获。
在“as”元件的第三帧建立关键帧，并在frame面板上将其frame lable设置为start。
在“as”元件的第四帧建立关键帧，并输入如下as:
aax = _root.zh1.aa:_x;
//将name属性为aa的元件的横坐标值赋予变量aax
zz = aaax-aax;
//aaax是移动终点的name属性为aa的元件的横坐标，在这里将目前的横坐标与终点的横坐标的 差值赋予变量zz
if (zz>5) {
_root.zh1.aa:_x = _root.zh1.aa:_x+(aaax-_root.zh1.aa:_x)/3;
} else {
aax = aaax;
}
//很重要的语句，当zz>5的时候，也就是说，当当前的横坐标与终点的横坐标之差大于5的时候，当前的横坐标将加上三分之zz的数值。而当zz<5的时候，直接用终点坐标来替换当前坐标。
这样做的目的是，可以使框的运动有一个减速的过程，因为很显然zz的数值将越来越接近终点的坐标，因此当前的坐标变化会一次次的变小，就出现减速的效果。而当当前坐标与终点坐标的差小于5之后（也可以是任意的一个小的数字），我们直接用终点坐标替换当前坐标，终止动画。由于5是个很小的坐标变化，观看时很难察觉到这种细微的变化，不会影响动画的流畅。
aay = _root.zh1.aa:_y;
//将name属性为aa的元件的纵坐标值赋予变量aay
ss = aaay-aay;
// aaay是移动终点的name属性为aa的元件的 纵坐标，在这里将目前的纵坐标与终点的纵坐标的 差值赋予变量ss
if (ss>5) {
_root.zh1.aa:_y = _root.zh1.aa:_y+(aaay-_root.zh1.aa:_y)/3;
} else {
aay = aaay;
}
//很重要的语句，当ss>5的时候，也就是说，当当前的纵坐标与终点的纵坐标之差大于5的时候，当前的纵坐标将加上三分之ss的数值。而当ss<5的时候，直接用终点坐标来替换当前坐标。
if (xcs<190) {
xcs = xcs+(200-_root.zh1.aa:_width)/3;
setProperty ("/zh1/aa", _width, xcs);
} else {
setProperty ("/zh1/aa", _width, 200);
xcs = 200;
}
if (ycs<240) {
ycs = ycs+(250-_root.zh1.aa:_height)/3;
setProperty ("/zh1/aa", _height, ycs);
} else {
setProperty ("/zh1/aa", _height, 250);
ycs = 250;
}
//设置“筐”元件的长，宽变形，使之有不断放大的效果，最后的宽为200，高为250原理和前一致，相信大家不难看懂。
if (xcs == 200 and ycs == 250 and aay == aaay and aax ==
aaax) {
setProperty ("_root.zh1.aa.cc", _visible, 1);
tellTarget ("_root.zh1.aa.cc") {
gotoAndPlay (2);
}
stop ();
} else {
gotoAndPlay ("start");
}
//这是一个很重要的循环设置，当当前的元件的长、高、横坐标、纵坐标都与设置的值相等的时候结束循环，否则就跳转到帧标签为start的帧开始播放。即又一次新的赋值。
最后，提醒大家的是，我们是通过使用as每间隔1帧改变一次元件的坐标来实现动画效果的，与我们平时使用的motion动画是完全不同的。
在“as”元件的第五帧建立关键帧，并在frame面板上设置其frame lable为end，双击这一帧，输入如下as
:
aaax = -42.1;
aaay = -11.9;
//这是设置了框在没有飞出去前的位置坐标
最后在“as”元件的第七帧建立关键帧，输入as如下：如图4）
aax = _root.zh1.aa:_x;
zz = Math.abs(aaax-aax);
if (zz>5) {
_root.zh1.aa:_x = _root.zh1.aa:_x+(aaax-_root.zh1.aa:_x)/3;
} else {
aax = aaax;
_root.zh1.aa:_x = aaax;
}
aay = _root.zh1.aa:_y;
ss = Math.abs(aaay-aay);
if (ss>5) {
_root.zh1.aa:_y = _root.zh1.aa:_y+(aaay-_root.zh1.aa:_y)/4;
} else {
aay = aaay;
_root.zh1.aa:_y = aaay;
}
if (xcs>90) {
xcs = xcs-(Math.abs(84.3-_root.zh1.aa:_width)/3);
setProperty ("/zh1/aa", _width, xcs);
} else {
setProperty ("/zh1/aa", _width, 84.3);
xcs = 84.3;
}
if (ycs>28) {
ycs = ycs-(Math.abs(23.8-_root.zh1.aa:_height)/2);
setProperty ("/zh1/aa", _height, ycs);
} else {
setProperty ("/zh1/aa", _height, 23.8);
ycs = 23.8;
}
if (xcs == 84.3 and ycs == 23.8 and aay == aaay and aax ==
aaax) {
stop ();
} else {
gotoAndPlay ("end");
}
//原理与点击按纽开始放大运动完全相同，请大家参看前文。
完成的as时间轴如图所示。（如图）
回到“综合”元件里，先用鼠标右键单击“按钮1”元件，在弹出的菜单上选择actions，在弹出的action面板上输入如下as：
on (release) {
tellTarget ("/zh1/as") {
gotoAndPlay (2);
}
}
//这段as的含义是当鼠标点击按钮1元件的时候，as元件开始从第2帧播放。
到此为止，我们完成了一个按钮的制作，你可以以相同的方法制作其他的按钮，这个效果非常的实用，尤其是当你制作全flash的网站的时候，绝对可以震撼一把，所以，希望大家一定要自己动作做一下试试。
|