FF7AC北美官网Flash菜单教程（AS2.0 OOP）
2006-12-02 17:29 | Army
在领略了FF7AC日本官网的Flash菜单后，你是否还想进一步去感受一下北美官网的呢？如果回答是肯定的话，那么请往下看，这篇教程将完完全全地介绍北美官网那构思巧妙的菜单制作过程。
也许你会说：北美官网的菜单效果看起来并没有日本官网的好看啊！那只是表面现象。我制作日本官网的教程只用了几个小时，而北美的却几乎一整天！而且，北美官网的菜单有很多元素我都省略掉了——因为它太大了——如果全部都加上去的话，你会惊叹它的华丽丝毫不在日本官网之下！更重要的是，北美官网是我见过的用类编写的最大最繁杂的AS脚本，面对这么一个优秀的作品，又有谁不动心想去一探究竟呢？
这个教程的源文件地址和效果预览：
http://ff9.ffsky.cn/flash_teach\ff7ac_na/exp.rar
我先来用一张图片介绍一下元件组成：
整个文件只有1帧，舞台大小未480*320，库中border和border_m是那四个黑色渐变的矩形条，btn是中间正8边形，sound是一个按钮声音——它们都来自于官网。所有的这些元件组成了btn_b按钮，它被实例化成5个对象放在舞台上。我们可以清除地看见舞台上方并排排列的5个实例：btn1、btn2、……、btn5。
先来看看时间轴上的少量代码：
var lb1:LoadButton = new LoadButton(btn1, 50, 150, 240, 160);
var lb2:LoadButton = new LoadButton(btn2, 260, 80, 243, 90);
var lb3:LoadButton = new LoadButton(btn3, 350, 20, 310, 162);
var lb4:LoadButton = new LoadButton(btn4, 170, 240, 233, 227);
var lb5:LoadButton = new LoadButton(btn5, 420, 280, 172, 153);
var br1:BtnRoll = new BtnRoll();
这里声明了5个LoadButton对象和一个BtnRoll对象，LoadButton类有5个参数组成的构造器。来了解下它：
class LoadButton {
var btnPosition_x:Number, btnPosition_y:Number, toPosition_x:Number, toPosition_y:Number;
var mc:MovieClip;
var bMoveTo, bFade, bMove;
var num:Number, num1:Number = 0, num2:Number = 0;
function initialize():Void {
//trace("Initialize finished!" );
randomNumGen();
mc._x = btnPosition_x;
mc._y = btnPosition_y;
mc._alpha = mc._xscale = mc._yscale = 40;
}
function randomNumGen():Void {
var num:Number = Math.floor(Math.random() * 3) + 2;
this.num = num;
}
function btnToPosition():Void {
//trace("toPosition..." + num1);
mc._x += (toPosition_x - mc._x) * 0.15;
mc._y += (toPosition_y - mc._y) * 0.15;
num1++;
if(num1 >= 40) {
clearInterval(bMoveTo);
_root.br1.initialize();
btnMove();
}
}
function btnMoveTo():Void {
bMoveTo = setInterval(this, "btnToPosition", 15);
}
function btnFadeTo():Void {
//trace("Enlarging..." + num2);
mc._xscale = mc._yscale += num;
mc._alpha += num - 1;
num2++;
if(num2 >= 20) clearInterval(bFade);
}
function btnFade():Void {
bFade = setInterval(this, "btnFadeTo", 20);
}
function setPosition():Void {
if(_xmouse <= 240) {
mc._x += (toPosition_x - mc._x + 40 * (240 - _xmouse) / 240) * num / 20;
}
else {
mc._x += (toPosition_x - mc._x - 40 * (_xmouse - 240) / 240) * num / 20;
}
if(_ymouse <= 160) {
mc._y += (toPosition_y - mc._y + 30 * (160 - _ymouse) / 160) * num / 20;
}
else {
mc._y += (toPosition_y - mc._y - 30 * (_ymouse - 160) / 160) * num / 20;
}
//trace("Move...");
}
function btnMove():Void {
bMove = setInterval(this, "setPosition", 20);
}
function LoadButton(mc:MovieClip, btnPosition_x:Number, btnPosition_y:Number, toPosition_x:Number, toPosition_y:Number) {
this.mc = mc;
this.btnPosition_x = btnPosition_x;
this.btnPosition_y = btnPosition_y;
this.toPosition_x = toPosition_x;
this.toPosition_y = toPosition_y;
initialize();
btnMoveTo();
btnFade();
}
}
构造器应该很简单，首先接受5个变量赋值给对象本身，然后调用自身的几个方法，这样便实现了创建对象时它的自动运行。
initialize()方法初始化对象所指定的MC的坐标值、透明度和缩放比，randomNumGen()是一个随机数生成器，用它生成一个随机数再加以适当计算便实现了按钮的大小、透明度随机变化的效果。
btnToPosition()方法是让按钮从初始位置移动到指定位置，这里依然用了极限计算思维，并添加一个num1计数器，当它大等于40时停止执行btnMoveTo()中的setInterval函数。
在这里我要纠正一个隐含的错误：你也许会认为，用按钮的坐标值是否等于指定坐标值来判断是否结束setInterval函数不是更好吗？我的回答是——不！因为计算机中的极限计算是“取整”的，它并不会“四舍五入”，因此最后按钮的坐标值始终无法等于指定坐标值——相差1——这样setInterval就永远不会结束！我在FF7AC日本官网教程里就犯了这个错误，所幸由于别的原因，bug被覆盖掉了……
另外，if判断最后的两句暂时还没用到，它俩一个是执行br1对象的initialize()方法（br1是在时间轴上创建的BtnRoll类），一个是执行后面用以使按钮跟随鼠标移动的btnMove()方法。
btnFadeTo()方法同样采用了一个num2计数器，它的作用是让按钮在移向指定位置时不断变大、透明度增加。什么，num是什么？看看上边，那个随机数生成器。这样5个按钮便可能拥有不同的大小和透明度了。
setPosition()方法是个比较难理解的地方，它实现了按钮跟随鼠标的位置在一定范围内“相反地移动”。在这之前我写过一篇关于时钟的教程，里面有类似的思维，不过这个的更巧妙。
以横坐标移动为例。当鼠标在舞台的左半边时（小等于240）：先看看“40 * (240 - _xmouse) / 240”这个计算，毫无疑问它是一个比例数值，自己画张图就能明白，鼠标越靠左值越大，然后“(toPosition_x - mc._x + 40 * (240 - _xmouse) / 240)”再计算，得到按钮与右边界范围之差，最后再“* num / 20”，并实现“+=”自增运算，以实现整体效果。
当鼠标在舞台的右半边（大于240）：这个和上面是相反的，更改下相减的顺序即可。由此得出按钮所移动的限制范围是[toPosition_x - 40, toPosition_x + 40]，纵坐标的原理相同。
最后的btnMove()方法是实现上面的setInterval而已。
如何？可能有点糊涂，数学或逻辑思维欠点火候的话可要加油哦。现在你理解构造器中那些方法调用的含义了吧，接下来我要介绍BtnRoll类。
class BtnRoll {
var mcAlpha1:Number, mcAlpha2:Number, mcAlpha3:Number, mcAlpha4:Number, mcAlpha5:Number;
var mcScale1:Number, mcScale2:Number, mcScale3:Number, mcScale4:Number, mcScale5:Number;
var bRollOver;
var btnNum:Number = 0, startNum:Number = 0;
function initialize():Void {
mcAlpha1 = _root.btn1._alpha;
mcAlpha2 = _root.btn2._alpha;
mcAlpha3 = _root.btn3._alpha;
mcAlpha4 = _root.btn4._alpha;
mcAlpha5 = _root.btn5._alpha;
mcScale1 = _root.btn1._xscale;
mcScale2 = _root.btn2._xscale;
mcScale3 = _root.btn3._xscale;
mcScale4 = _root.btn4._xscale;
mcScale5 = _root.btn5._xscale;
startNum = 1;
}
function btnRollOver():Void {
var i:Number;
if(btnNum > 0) {
for(i = 1; i <= 5; i++) {
if(btnNum == i) {
eval("_root.btn" + i)._xscale = eval("_root.btn" + i)._yscale += (eval("this.mcScale" + i) + 80 - eval("_root.btn" + i)._xscale) * 0.2;
eval("_root.btn" + i)._alpha ++;
if(eval("_root.btn" + i)._alpha >= 100) eval("_root.btn" + i)._alpha = 100;
}
else {
eval("_root.btn" + i)._xscale = eval("_root.btn" + i)._yscale += (eval("this.mcScale" + i) - 40 - eval("_root.btn" + i)._xscale) * 0.2;
eval("_root.btn" + i)._alpha += (eval("this.mcAlpha" + i) - 20 - eval("_root.btn" + i)._alpha) * 0.2;
if(eval("_root.btn" + i)._alpha <= 20) eval("_root.btn" + i)._alpha = 20;
}
}
}
else{
for(i = 1; i <= 5; i++) {
eval("_root.btn" + i)._xscale = eval("_root.btn" + i)._yscale += (eval("this.mcScale" + i) - eval("_root.btn" + i)._xscale) * 0.2;
eval("_root.btn" + i)._alpha += (eval("this.mcAlpha" + i) - eval("_root.btn" + i)._alpha) * 0.2;
}
}
}
function mouseRollOver():Void {
clearInterval(bRollOver);
if(startNum == 1) bRollOver = setInterval(this, "btnRollOver", 20);
}
}
可能你是初次接触到两个以上的类，其实它和一个类是一样的。在Flash菜单中“编辑－首选参数－ActionScript－ActionScript2.0设置”中我们可以看到一个“.”符号，它代表当前文件夹（和Java非常相似），这样在创建对象时Flash便会在当前文件夹中搜寻相应的类。如果你在其它文件夹中创建类，则必须在这个类路径设置才行。
还记得LoadButton类的btnToPosition()方法中调用的_root.br1.initialize()方法吗？它就在这里，把5个按钮的透明度和缩放值赋给相应的变量，并设置startNum为1（稍后介绍这样做的原因）。
btnRollOver()方法是判断btnNum的值然后作出一系列的“措施”，从而让鼠标指向的按钮变大且透明度更高，其它的则变小且透明度降低（在一定范围内，它同样采用了极限运算）。可能你要问如何通过btnNum而实现这一系列的“措施”呢？别着急，还记得舞台上那5个按钮吗，看看它们的代码（btn1为例）：
on(rollOver) {
br1.btnNum = 1;
br1.mouseRollOver();
}
on(rollOut) {
br1.btnNum = 0;
}
当鼠标移上去时设置btnNum为1并调用mouseRollOver()方法，移开时btnNum归零。其它四个按钮都差不多，只不过btn2移上去时设置btnNum为2、btn3移上去设置为3……以此类推。
这下你明白了吧，以鼠标移到btn1上为例：在for循环中，发现btnNum大于0，于是根据相应的值用eval函数加出MC的名字，并让它的高宽百分比值不断增加，直到初始状态+80之时，还有透明度不断自增；而另外的4个MC就高宽百分比值不断减小，直到初始状态-40之时，还有透明度自减。当鼠标移开btnNum等于0时，一切又回归初始值。它是不是很饶人？没办法，我们都是苦命的IT人……
这里我要分享一下个人经验：透明度虽然在帮助里给人的印象是个0～100的整数值，但它和角度一样表里不一！无论你用自增还是自减或者加几减几，都得到的是一个古里古怪的小数。所以以后在使用它们的时候务必小心，同时也希望Adobe能更加完善这个地方。
mouseRollOver()方法很简单了，实现btnRollOver()的setInterval。这里我们看到那个startNum的用途了，它告诉编译器只有它为1时setInterval函数才执行！之所以这样做的原因是可能按钮在移向指定位置时（LoadButton的btnToPosition()方法）你就已经用鼠标指向它了，那么结果就可能造成冲突。我在LoadButton类中设置当移动完成后才通过调用BtnRoll类的initialize()方法设置startNum为1，如此就避免了这个错误。
Orz，我终于把它讲解完了，而你是否感受到北美官网的复杂与绚丽了呢？单只一个菜单就麻烦成了这样，其它的更可想而知！由于这篇教程是面向高级用户的，所以新手可能看不懂。建议你们先打好基础或者从头看下我在本版发布的AS系列教程，那样的话估计会顺畅多了～
也许你会说：北美官网的菜单效果看起来并没有日本官网的好看啊！那只是表面现象。我制作日本官网的教程只用了几个小时，而北美的却几乎一整天！而且，北美官网的菜单有很多元素我都省略掉了——因为它太大了——如果全部都加上去的话，你会惊叹它的华丽丝毫不在日本官网之下！更重要的是，北美官网是我见过的用类编写的最大最繁杂的AS脚本，面对这么一个优秀的作品，又有谁不动心想去一探究竟呢？
这个教程的源文件地址和效果预览：
http://ff9.ffsky.cn/flash_teach\ff7ac_na/exp.rar
我先来用一张图片介绍一下元件组成：
整个文件只有1帧，舞台大小未480*320，库中border和border_m是那四个黑色渐变的矩形条，btn是中间正8边形，sound是一个按钮声音——它们都来自于官网。所有的这些元件组成了btn_b按钮，它被实例化成5个对象放在舞台上。我们可以清除地看见舞台上方并排排列的5个实例：btn1、btn2、……、btn5。
先来看看时间轴上的少量代码：
var lb1:LoadButton = new LoadButton(btn1, 50, 150, 240, 160);
var lb2:LoadButton = new LoadButton(btn2, 260, 80, 243, 90);
var lb3:LoadButton = new LoadButton(btn3, 350, 20, 310, 162);
var lb4:LoadButton = new LoadButton(btn4, 170, 240, 233, 227);
var lb5:LoadButton = new LoadButton(btn5, 420, 280, 172, 153);
var br1:BtnRoll = new BtnRoll();
这里声明了5个LoadButton对象和一个BtnRoll对象，LoadButton类有5个参数组成的构造器。来了解下它：
class LoadButton {
var btnPosition_x:Number, btnPosition_y:Number, toPosition_x:Number, toPosition_y:Number;
var mc:MovieClip;
var bMoveTo, bFade, bMove;
var num:Number, num1:Number = 0, num2:Number = 0;
function initialize():Void {
//trace("Initialize finished!" );
randomNumGen();
mc._x = btnPosition_x;
mc._y = btnPosition_y;
mc._alpha = mc._xscale = mc._yscale = 40;
}
function randomNumGen():Void {
var num:Number = Math.floor(Math.random() * 3) + 2;
this.num = num;
}
function btnToPosition():Void {
//trace("toPosition..." + num1);
mc._x += (toPosition_x - mc._x) * 0.15;
mc._y += (toPosition_y - mc._y) * 0.15;
num1++;
if(num1 >= 40) {
clearInterval(bMoveTo);
_root.br1.initialize();
btnMove();
}
}
function btnMoveTo():Void {
bMoveTo = setInterval(this, "btnToPosition", 15);
}
function btnFadeTo():Void {
//trace("Enlarging..." + num2);
mc._xscale = mc._yscale += num;
mc._alpha += num - 1;
num2++;
if(num2 >= 20) clearInterval(bFade);
}
function btnFade():Void {
bFade = setInterval(this, "btnFadeTo", 20);
}
function setPosition():Void {
if(_xmouse <= 240) {
mc._x += (toPosition_x - mc._x + 40 * (240 - _xmouse) / 240) * num / 20;
}
else {
mc._x += (toPosition_x - mc._x - 40 * (_xmouse - 240) / 240) * num / 20;
}
if(_ymouse <= 160) {
mc._y += (toPosition_y - mc._y + 30 * (160 - _ymouse) / 160) * num / 20;
}
else {
mc._y += (toPosition_y - mc._y - 30 * (_ymouse - 160) / 160) * num / 20;
}
//trace("Move...");
}
function btnMove():Void {
bMove = setInterval(this, "setPosition", 20);
}
function LoadButton(mc:MovieClip, btnPosition_x:Number, btnPosition_y:Number, toPosition_x:Number, toPosition_y:Number) {
this.mc = mc;
this.btnPosition_x = btnPosition_x;
this.btnPosition_y = btnPosition_y;
this.toPosition_x = toPosition_x;
this.toPosition_y = toPosition_y;
initialize();
btnMoveTo();
btnFade();
}
}
构造器应该很简单，首先接受5个变量赋值给对象本身，然后调用自身的几个方法，这样便实现了创建对象时它的自动运行。
initialize()方法初始化对象所指定的MC的坐标值、透明度和缩放比，randomNumGen()是一个随机数生成器，用它生成一个随机数再加以适当计算便实现了按钮的大小、透明度随机变化的效果。
btnToPosition()方法是让按钮从初始位置移动到指定位置，这里依然用了极限计算思维，并添加一个num1计数器，当它大等于40时停止执行btnMoveTo()中的setInterval函数。
在这里我要纠正一个隐含的错误：你也许会认为，用按钮的坐标值是否等于指定坐标值来判断是否结束setInterval函数不是更好吗？我的回答是——不！因为计算机中的极限计算是“取整”的，它并不会“四舍五入”，因此最后按钮的坐标值始终无法等于指定坐标值——相差1——这样setInterval就永远不会结束！我在FF7AC日本官网教程里就犯了这个错误，所幸由于别的原因，bug被覆盖掉了……
另外，if判断最后的两句暂时还没用到，它俩一个是执行br1对象的initialize()方法（br1是在时间轴上创建的BtnRoll类），一个是执行后面用以使按钮跟随鼠标移动的btnMove()方法。
btnFadeTo()方法同样采用了一个num2计数器，它的作用是让按钮在移向指定位置时不断变大、透明度增加。什么，num是什么？看看上边，那个随机数生成器。这样5个按钮便可能拥有不同的大小和透明度了。
setPosition()方法是个比较难理解的地方，它实现了按钮跟随鼠标的位置在一定范围内“相反地移动”。在这之前我写过一篇关于时钟的教程，里面有类似的思维，不过这个的更巧妙。
以横坐标移动为例。当鼠标在舞台的左半边时（小等于240）：先看看“40 * (240 - _xmouse) / 240”这个计算，毫无疑问它是一个比例数值，自己画张图就能明白，鼠标越靠左值越大，然后“(toPosition_x - mc._x + 40 * (240 - _xmouse) / 240)”再计算，得到按钮与右边界范围之差，最后再“* num / 20”，并实现“+=”自增运算，以实现整体效果。
当鼠标在舞台的右半边（大于240）：这个和上面是相反的，更改下相减的顺序即可。由此得出按钮所移动的限制范围是[toPosition_x - 40, toPosition_x + 40]，纵坐标的原理相同。
最后的btnMove()方法是实现上面的setInterval而已。
如何？可能有点糊涂，数学或逻辑思维欠点火候的话可要加油哦。现在你理解构造器中那些方法调用的含义了吧，接下来我要介绍BtnRoll类。
class BtnRoll {
var mcAlpha1:Number, mcAlpha2:Number, mcAlpha3:Number, mcAlpha4:Number, mcAlpha5:Number;
var mcScale1:Number, mcScale2:Number, mcScale3:Number, mcScale4:Number, mcScale5:Number;
var bRollOver;
var btnNum:Number = 0, startNum:Number = 0;
function initialize():Void {
mcAlpha1 = _root.btn1._alpha;
mcAlpha2 = _root.btn2._alpha;
mcAlpha3 = _root.btn3._alpha;
mcAlpha4 = _root.btn4._alpha;
mcAlpha5 = _root.btn5._alpha;
mcScale1 = _root.btn1._xscale;
mcScale2 = _root.btn2._xscale;
mcScale3 = _root.btn3._xscale;
mcScale4 = _root.btn4._xscale;
mcScale5 = _root.btn5._xscale;
startNum = 1;
}
function btnRollOver():Void {
var i:Number;
if(btnNum > 0) {
for(i = 1; i <= 5; i++) {
if(btnNum == i) {
eval("_root.btn" + i)._xscale = eval("_root.btn" + i)._yscale += (eval("this.mcScale" + i) + 80 - eval("_root.btn" + i)._xscale) * 0.2;
eval("_root.btn" + i)._alpha ++;
if(eval("_root.btn" + i)._alpha >= 100) eval("_root.btn" + i)._alpha = 100;
}
else {
eval("_root.btn" + i)._xscale = eval("_root.btn" + i)._yscale += (eval("this.mcScale" + i) - 40 - eval("_root.btn" + i)._xscale) * 0.2;
eval("_root.btn" + i)._alpha += (eval("this.mcAlpha" + i) - 20 - eval("_root.btn" + i)._alpha) * 0.2;
if(eval("_root.btn" + i)._alpha <= 20) eval("_root.btn" + i)._alpha = 20;
}
}
}
else{
for(i = 1; i <= 5; i++) {
eval("_root.btn" + i)._xscale = eval("_root.btn" + i)._yscale += (eval("this.mcScale" + i) - eval("_root.btn" + i)._xscale) * 0.2;
eval("_root.btn" + i)._alpha += (eval("this.mcAlpha" + i) - eval("_root.btn" + i)._alpha) * 0.2;
}
}
}
function mouseRollOver():Void {
clearInterval(bRollOver);
if(startNum == 1) bRollOver = setInterval(this, "btnRollOver", 20);
}
}
可能你是初次接触到两个以上的类，其实它和一个类是一样的。在Flash菜单中“编辑－首选参数－ActionScript－ActionScript2.0设置”中我们可以看到一个“.”符号，它代表当前文件夹（和Java非常相似），这样在创建对象时Flash便会在当前文件夹中搜寻相应的类。如果你在其它文件夹中创建类，则必须在这个类路径设置才行。
还记得LoadButton类的btnToPosition()方法中调用的_root.br1.initialize()方法吗？它就在这里，把5个按钮的透明度和缩放值赋给相应的变量，并设置startNum为1（稍后介绍这样做的原因）。
btnRollOver()方法是判断btnNum的值然后作出一系列的“措施”，从而让鼠标指向的按钮变大且透明度更高，其它的则变小且透明度降低（在一定范围内，它同样采用了极限运算）。可能你要问如何通过btnNum而实现这一系列的“措施”呢？别着急，还记得舞台上那5个按钮吗，看看它们的代码（btn1为例）：
on(rollOver) {
br1.btnNum = 1;
br1.mouseRollOver();
}
on(rollOut) {
br1.btnNum = 0;
}
当鼠标移上去时设置btnNum为1并调用mouseRollOver()方法，移开时btnNum归零。其它四个按钮都差不多，只不过btn2移上去时设置btnNum为2、btn3移上去设置为3……以此类推。
这下你明白了吧，以鼠标移到btn1上为例：在for循环中，发现btnNum大于0，于是根据相应的值用eval函数加出MC的名字，并让它的高宽百分比值不断增加，直到初始状态+80之时，还有透明度不断自增；而另外的4个MC就高宽百分比值不断减小，直到初始状态-40之时，还有透明度自减。当鼠标移开btnNum等于0时，一切又回归初始值。它是不是很饶人？没办法，我们都是苦命的IT人……
这里我要分享一下个人经验：透明度虽然在帮助里给人的印象是个0～100的整数值，但它和角度一样表里不一！无论你用自增还是自减或者加几减几，都得到的是一个古里古怪的小数。所以以后在使用它们的时候务必小心，同时也希望Adobe能更加完善这个地方。
mouseRollOver()方法很简单了，实现btnRollOver()的setInterval。这里我们看到那个startNum的用途了，它告诉编译器只有它为1时setInterval函数才执行！之所以这样做的原因是可能按钮在移向指定位置时（LoadButton的btnToPosition()方法）你就已经用鼠标指向它了，那么结果就可能造成冲突。我在LoadButton类中设置当移动完成后才通过调用BtnRoll类的initialize()方法设置startNum为1，如此就避免了这个错误。
Orz，我终于把它讲解完了，而你是否感受到北美官网的复杂与绚丽了呢？单只一个菜单就麻烦成了这样，其它的更可想而知！由于这篇教程是面向高级用户的，所以新手可能看不懂。建议你们先打好基础或者从头看下我在本版发布的AS系列教程，那样的话估计会顺畅多了～