Flash 2级导航教程的详解

Flash  2级导航教程的详解

注意：虽然我是分析，但是我希望想要学一下的同志们能跟着我说的步骤来做一下。

开始正题。
我们首先来分析一下，这个导航要实现一个什么功能，会涉及到一些什么需求在里边。

这个导航肯定要有一个鼠标经过(rollover)的效果；

这个导航当我们的鼠标移上去的时候，肯定要展开2级（有点废话）；

点了以后要实现跳转网页或者loadMovie等功能（…………）

嗯嗯，暂时先这么多。

来分析一下导航结构：

导航正常状态

1级button鼠标over状态

2级button鼠标over状态

上图应该可以说明问题了。

那么，1级导航在over的时候有一个动作（背景色出现
，当然可以做成其他效果了，炫点的酷点的，随意随意），同时还要把2级展开，这是我们所要实现的。

因为1级导航的over动作有一个平缓的过渡过程，所以不能直接做成button，我的习惯是做成一个MC，然后在MC里边建立button。当鼠标移动到这个button上边的时候，我们给一个变量出来，假设这个变量是i，那么，当over的时候，这个i为1，当out的时候，这个i为0。

程序这么写：

on (rollOver) {
    this.i = 1;
}
on (rollOut) {
    this.i=0;
}

然后在MC里边的帧上写判断：

onEnterFrame = function () {
    if (this.i == 1) {
        this.nextFrame();
    } else {
        this.prevFrame();
    }
};

onenterframe:帧监听事件；
if(this.i==1):如果i值为1；
this.nextframe():那么就向后播放一帧；
else:否则；
this.prevframe():就向前播放一帧；

然后我们在MC里边做一个背景出现的motion，ok，到现在为止，主导航（一级导航）的动作已经完成。

解释一下：可能有的朋友会问，为什么nextFrame()只是向后播放一帧，那为什么当鼠标移动上去的时候，这个MC会一直播放到最后呢？

因为这个判断是写在了enterframe这个事件里边，具体这个事件的意义，大家可以在flash里边按F1搜索一下看看，我记不清，嘿嘿。不过提示一下，遇到看不明白的，先用着，用来用去就明白了。

因为2级的按钮也是有一个平滑过渡的动作，所以我也处理成了MC（当然如果你的按钮很简单，不需要什么平滑过渡，只要简单的跳一下字的颜色，那么就可以直接做成button）。这个MC的方法跟1级的方法不太一样：

on (rollOver) {
    onEnterFrame = function () {
        if (this._currentframe<this._totalframes) {
            this.nextFrame();
        } else {
            delete onEnterFrame;
        }
    };
}
on (rollOut) {
    onEnterFrame = function () {
        if (this._currentframe>1) {
            this.prevFrame();
        } else {
            delete onEnterFrame;
        }
    };
}

这个程序直接写在了2级的MC里边的button上边，在2级的帧上只有一个stop();

解释一下：

当鼠标over时：
    帧事件：
        如果当前帧<MC总的帧数
            MC向后播放一帧；
        否则（当前帧为MC的最后一帧）
            删除此 帧事件；

当鼠标out时：
    帧事件：
        如果当前帧>1
            MC向前播放一帧；
        否则（当前帧为1）
            删除此 帧事件；

希望大家能看明白。还是那句，实在看不明白就先用着。

为什么跟1级导航的处理方式不一样？因为oneterframe在某些电脑上还是比较耗资源的，所以，我们设置了当鼠标事件的时候才触发这个帧事件，当满足条件的时候就删除这个帧事件，把电脑的资源给解放出来。解放出来干啥？那就不管俺的事了，桀桀。

那1级导航为什么不把这个帧事件解放出来呢？因为考虑到1级导航还有第3个状态：点击以后的状态，这个时候可能2级需要收回去，但是1级导航的背景色要继续保留，所以就留了一条后路。

呵呵，好了，拿出你做的东西来，我们试试效果。如果没有偷懒或者没出错的话，那么现在已经可以实现一个效果了，鼠标移上来，1级出现了背景色，同时也出现了2级，哇塞，太神奇了（我刚学的时候这个感觉），哈哈。但是但是，不要高兴的太早，让我们把鼠标移动到2级上点一下…………

点不了，鼠标一移开1级，这个MC就倒播回去了。

为啥？

因为鼠标移开1级的时候，触发了事件：

on (rollOut) {
    this.i=0;
}

i变成了0，又触发了事件：

else {
        this.prevFrame();
    }

那么我们就解决这个问题，当鼠标移动出（out）1级的时候，i不要为0，好方便我们去点2级。
但是问题又来了，如果i不为0的话，那这个MC岂不是不能倒播回去了？换个说法，这个2级是不是就收不回去了？
当然是no了，我们来个偷懒的方法：

在1级导航的MC上，新建立一个按钮（我们称为反热区，哈哈）；

这个按钮是镂空的，把当前按钮的1级和2级的位置都删掉，然后四周留下一部分。

然后在这个按钮的上边写：

on (rollOver) {
    this.i =0;
}

为啥这么写？

这个这个，实在是手抽筋了，原因大家自己思考，简单简单……

嗯嗯，本来到这是应该完了，可是还有一点点的小问题，真的很小。如果我们就这样放上去的话，就会发现，鼠标移开的时候，碰到那个隐形的反热区，会变成手的形状，处理一下吧，因为这个容易让人误会。

给这个按钮起一个名字，叫啥随意，怎么变态怎么来，我起的名字就是btbtbt，嘿嘿。然后把这个button拖到第二帧（如果在第一帧的话可能会挡住别的1级，使之不能触发事件），然后在第2帧的帧上写：

btbtbt.useHandCursor=false;

ok，搞定。

最后再注一下：也许在高手眼里这个的确比较简单，但是对新手是非常适用的，修改也方便。

还有需要说一下的：这个教程用的As语句不多，精华所在就是nextFrame()和prevFrame()了。其实程序都是这样的，好的程序不一定是写法和语句有多NB，更关键的是一个思路。

希望大家看完以后能明白俺的思路。