快速业务通道

Flash AS实例:奇妙的滑动菜单

作者 佚名技术 来源 服务器技术 浏览 发布时间 2012-07-15

?   我们今天要做的是一个很漂亮的菜单效果,在制作纯Flash的网站时可以用上,绝对比平时常见的菜单有新意,很有视觉冲击力,大部分的动画效果都由as来完成。我会力求详细而全面的介绍整个实例的制作方法与原理,帮助大家更加深入的了解flash内部的坐标系统以及如何使用as来制作动画效果,并谈一谈关于学习as的小技巧。

  实例效果描述:

  在实例中左边是3个按钮,任意点击一个按钮,此按钮的边框就会滑动变大为一个色块并显示详细的内容。点击这个色块,你会发现你可以拖动它到任意位置,再次点击就取消了拖动。在这个色块的左上角有一个back按钮,点击back按钮,色块将变为边框并回到按钮1上,最妙的是当你再次点击按钮1时,再次出现的色块将停留在上次被拖动到的位置。如此奇妙的效果是怎样实现的呢?(文章末尾提供源文件下载学习)

  实现原理:

  本例充分的利用了as的坐标替换,我们首先要预设一个坐标值决定当用鼠标点击按钮时,色块第一次滑动出来时停止的位置,当用鼠标拖动色块时,使用变量来保存移动后的色块元件的横坐标与纵坐标,当点击了“back”按钮使色块滑动回去之后,再次点击按钮就使用保存的移动后的色块元件的横坐标与纵坐标来代替预设值,因此,色块将回到上一次运动的位置。那么怎样用as来控制元件的移动呢?其实很简单,当按钮被点下的时候,我们有运动物体(即色块)的初始横、纵坐标与终点位置的横、纵坐标(第一次为初始值),那么我们可以设定一个循环的每隔一帧执行一次的as,而这个as的内容是从改变元件的横纵坐标,使之接近终点,由于时间间隔很短,连续起来看上去就是元件在做motion运动了。当判断到元件现在的位置与终点的位置相差不大时就可以终止循环,并将最终的终点横、纵坐标赋予元件,完成运动。看上去比较复杂,但是由于有前面的基础,我相信一切都不是问题,现在我们马上开始神奇的菜单之旅。   制作步骤:

  打开flash,新建一个影片,modify-movie设置此影片的宽为550,高为400,背景色为深蓝色,并且frame rats设置为120。(如图4)


  Frame rate的含义是每秒钟影片播放帧数,默认值为12,即每秒影片播放12帧,但是为了达到更好的效果我们可以把这个数值提高,这样影片播放更加流畅自然。insert-symbol,新建元件命名为:“框”,在工具栏上选择rectangle tool,设置strock color为白色,fill color为none。画一个框,你可以自己决定这个框的大小,在本例中我做的是:宽为84.3,高为23.8,(如图5)windows-panels-align在align面板上将这个框居中对齐。

  新建元件命名为:“色块”在工具栏上选择rectangle tool设置其stroke color为无,fill color为浅蓝色。绘制一个矩形,windows-panels-info在info面板上设置它的宽为199,高为248。(如图6)

  新建元件属性为按钮,命名为“隐藏按钮”,在hit帧建立关键帧,从library中拖拽“色块”元件layer1,在align面板上设置居中对齐。
  新建元件命名为:“as”,现在先不用急着编辑as代码,我们在下面将有详细的讲解,。   新建元件属性为按钮,命名为“菜单按钮1”,在工具栏上选择rectangle tool设置其stroke color为无,fill color为蓝色,绘制一个矩形在info面板上设置其宽为84.3,高为23.8,再设置其居中对齐。使用text tool输入文字“按钮1”,文字颜色为白色。(如图7)

  新建元件属性为按钮,命名为“back”,使用text tool输入文字"back",文字颜色为浅黄色。设置其居中对齐。   新建元件命名为“弹出”,在layer1的第15帧建立关键帧,从library中拖拽“色块”元件到这一帧。新建一层layer2,在第15帧新建关键帧,从lib

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号