论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Flash AS教程
Tag:2.0,3.0菜鸟,游戏,,cs,技巧,源码,,文本,文字,函数,音乐,随机,拖拽,asp,access,xml,mc,视频教程

带2级的Flash导航教程源码

文章类别:Flash AS | 发表日期:2010-4-25 9:32:02

Flash AS_带2级的Flash导航教程源码 

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

这个导航肯定要有一个鼠标经过(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级的动作。

2级的按钮应该怎么做?

因为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,更关键的是一个思路。

视频教程列表
文章教程搜索
 
Flash AS推荐教程
Flash AS热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058