分享
 
 
 

关于Flash变速滑动菜单剖析

王朝other·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

经过本例的学习,你将掌握基本的FLASH菜单的操作步骤。以及用AS来编写变速运动的基本方法。一个例子的学习是次要的,希望大家学习完以后可以掌握这种方法,举一反三,应用到更多的实例中去。

实例思路:

正如前面所说的,一个例子的学习是次要的,关键是掌握这种方法。在进行我们实例之前,先说一下理论与方法。

在这个导航中,有四个Button(按钮,简称:BTN),一个MovieClip(影片,简介:MC)。上面跟随移动的MC实例名为:follow。下面的四个BTN实例名分别为:btn_home,btn_about,btn_news,btn_links。实例的运动方法:当鼠标移动到其中的一个按钮上时,上面的MC(follow)会以逐渐减速的运动慢慢靠近鼠标所指的按钮上。这其中是以它们的X坐标来判断follow的位置的。

follow总共需要移动的距离为我们鼠标所指的按钮的X坐标减去它自己的X坐标。follow每次移动一定的距离(如果大家仔细观察的话,应该发现它并不是以匀速进行的,而是以减速进行的)

下面我们假设follow的X坐标为40,而我们将鼠标移动到了btn_links的按钮上了(即标有links的那个按钮)。而btn_links的X坐标为280,那么,它们之间的距离为btn_links._x-follow._x(这其中的._x代表这个实例的X坐标)。现在我们需要让follow以减速运动从当前的X坐标移动到btn_links的X坐标上。

注意:下面是本例的重点,也就是需要大家掌握的“方法”。

我们让follow每次移动它们之间的距离的1/2。因为follow的X坐标是随时改变的,所以它们之间的距离也会随时改变。当follow第一次移动的时候,它的X坐标为40+(280-40)/2=160注:(40(follow的X坐标)+(280(btn_links的X坐标)-40(follow的X坐标))/2=160(移动后follow的X坐标))。当它第二次移动的时候,它的X坐标为160+(280-160)/2=220。它第一次移动的距离为120像素,而第二次移动的距离为60,实现了我们所要的减速运动。如果觉得这样的减速运动太快的话,你可以适应的改变每次移动的比例。如让follow每次移动1/3……

实例实践:

上面我们已经掌握了本例的基本实现思路。下面,我们就按着我们的思路,来一步一步地去实现这个菜单。

step1:首先,我们需要制作我们所需要的元素。4个bTN,以及一个MC,把你所需要的栏目,做成BTN,然后制作一个跟随移动的MC。

方法:点击菜单

插入(insert)>>新建元件(new symbol)

在名称(name)上填写名称btn_home。(起名字最好要有个规则,不然如果元件多了,看起来会很乱)

(快捷键Ctrl+F8)确认行为选择为按钮。

点击确认以后,便会进到这个元件的编辑界面。我们会看到这里面的编辑方式不一和主场景不一样,只有四个帧,这是因为这个元件的行为是按钮的原因。这四个帧分别为:up(弹起)、over(指针经过)、down(按下)、activ(点击)。分别代表鼠标不在按钮上,鼠标经过按钮(或者在按钮上停留时),鼠标点击时,最后一个是响应鼠标的区域。如果最后一层没有的话,就会以最上面一层的up(弹起)为活动区域。

我们在图层1的up帧用文本工具写入HOME,这里颜色为#146270。然后在down(按下)帧,点鼠标右键,选择插入帧(insert frame)。这是为了保证在任何时候都显示home这几个文字。在属性面板中设置X和Y都为0;然后在新建一图层,将图层2拉到图层1下面,用矩形工具在图层2上画一个长方形。在属性面板设置宽为80,高为20,X和Y都为0;设置填充色为#56CCE0,无边框。然后在鼠标经过(OVER)上点鼠标右键选择插入关键帧(insert key frame)。将填充色改为#8ADCEA,然后在最后一帧上,即点击(activ)帧点鼠标右键,选择插入帧(这样是为了让我们的鼠标活动范围增大)。按照此方法,继续制作其它栏目的BTN,只有文字不同,其它地方方法一样。你也可以在库面板(窗口>>库,快捷键Ctrl+L、F11),选择建立的元件名,这里是btn_home,然后右击,选择复制,起一个新的好记的名称,然后再双击进入复制好的元件里,对文字进行编辑。把文字改为各个栏目的名称。

将四个按钮制作完以后,再新建一个元件,名字为follow,行为为影片剪辑,同样用矩形工具画一个长方形,然后对它用渐变进行填充。高:6,宽:80,X:0,Y:0。

step2:回到主场景,打开库面板,将我们的组件拉到主场景来,对它们的位置进行排列。

把主场景的大小设为400X40,帧数为25帧,背景色为#006699。把四个按钮拉进主场景,将它们的Y坐标都设为20,X坐标分别为:40,122,204,286(这里可以自由设定)。为了直观,将该层改名为btns。

新建一层,将follow影片也拉到主场景,X:40;Y:7,将该层改名为follow。

给每个按钮、影片起实例名:先看一下下面的图片

为home、about、news、links分别起实例名为btn_home,btn_about,btn_news、btn_links。给上面的跟随移动的MC,起名为follow。

注意:这里的实例名和在库中的元件名是两回事。库中的元件名是为了我们能够在编辑的时候,可以很好的区分它们。不在同目录下的元件是可以重名的。而场景中的实例名,则是为了让我们在使用编写as程序的时候,利用实例名来分辨他们。

再新建一层,起名为as,在下面键入如下代码。(附注释)

//这个符号是FLASH中的注释符

//设置两个变量,startX,endX,用来保存follow的运动起始点和结束点。即当前的followX坐标与我们所移动到的BTN的X坐标。这里仅起到初始化的作用。

startX = follow._x;

endX = 40;

//当鼠标移动到不同的按钮上时,follow的结束点X坐标是不同的。以下的语句是用来判断鼠标移动到哪一个按钮上了。

btn_home.onRollOver = function() {

//设置当鼠标移动到不同的按钮上时,结束点的X坐标为当前鼠标所移动到的按钮的X坐标

endX = this._x;

};

btn_about.onRollOver = function() {

endX = this._x;

};

btn_news.onRollOver = function() {

endX = this._x;

};

btn_links.onRollOver = function() {

endX = this._x;

};

//这里的onEnterFrame是为了保证实时运行,即当播放到这一帧时,便持续播放。

follow.onEnterFrame = function() {

//因为follow的X坐标是实时在变化的,因此,我们需要每次都取得它的X坐标。

startX=follow._x;

//moveX用来计算每回移动的距离。endX是所要移动到的按钮的X坐标。startX便是follow的当前X坐标了

moveX=(endX-startX)/2;

//重新设置follow的X坐标

this._x=moveX+this._x;

};

现在再确认一下你所键入的代码,并且确认实例名称已经设定,并且正确。就可以按Ctrl+Enter来预览一下了。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有