当前位置:中国星空学习网首页>图形图象>Flash>正文  
关于Flash变速滑动菜单剖析

  经过本例的学习,你将掌握基本的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来预览一下了。 

 

上一篇: 制作Flash交互打字特殊效果
下一篇: 边听MTV边玩游戏Flash也能画中画
站内公告
栏目导航
 Windows系统
 Linux/DOS
 办公应用
 工具软件
 图形图象
 网络应用
 安全防御
 网络编程
 软件教程
 实用技术
最新文章
中国星空图片网
·人体艺术
·性感美眉
·生活自拍
·幽默搞笑
·超级帅哥
·精彩万花筒
·梦幻景色
中国星空探索网
·神秘追踪 灵异接触
·鬼故事 灵异空间 图片
·未解之谜 探索宇宙
中国星空两性网
·两性图文 我的性事 情人 成人幽默
·性爱技巧 两性测试 性爱误区
·性事花边 生育避孕 性保健 性疾病
·两性生理 文化 讨论 心理 知识
·爱人同志 非常男女 一夜情
中国星空算网命
·手机吉凶 QQ号码吉凶 周公解梦
·塔罗牌测试 狗年运程
·关公灵签 紫薇斗数 八字排盘
·测试:你的成功指数有多少
·测验你的家庭是否美满?
·面相: 面型 眼睛 耳朵 口唇
·手相:拉你一把奶油桂花手
·测试:你能成为大富翁吗?
联系方式 设为首页
中国星空旗下---中国星空学习网    Copyright 2005-2050 Year   xx.happy369.com  Networks.All rights reserved
中国星空网所有内容均来源于网络,版权属于原作者,如侵犯到您的权益,请与我们联系,我们将尽快予以删除或处理。
中国星空不承担由于内容的合法性及健康性所引起的一切争议和法律责任。
陕ICP备05011765号 联系我们 
《女人如烟》--演唱:魏佳艺