Flash制作个性漂亮的蜻蜓菜单

菜单

  画面与程序完全原创哦。

  效果如下:

  菜单介绍:

  芳草青青,上面落着一只小蜻蜓。当你的鼠标移向某个按钮时,蜻蜓就会快速向你飞了过来,并缓缓地停在那里。当你的鼠标移开菜单,蜻蜓就会飞回家去。

  首先画一只蜻蜓,共两帧,第一帧翅膀与第二帧翅膀略有不同,形成翅膀抖动的效果,并把它转化为元件

  再画上代表首页,作品,日记的图标,并将其链接名命名为home,photo,diary,work,music,并在第一帧导出

  用遮罩制作光线划过效果。

  图层1为作遮罩的广块,图层3为被遮罩的光线。

  作好后将此效果转为元件,其链接名命名flash,并在第一帧导出

  制作按钮在图层1画一白色透明方块,这样方便用户点击按钮,而不至于点空

  在图层2建一动态文本框,命名为txt

  现在是制作整个菜单的过程了,如下图所示

  bug层上拖入刚才所画的蜻蜓元件,将其实例名命为bug btn层上拖入五个做好的按钮,一字排开,将其实例名依次命名为home,photo,diary,work,music

  interval层上画一些间隔来分隔这些按钮

  把刚做好的菜单转化为元件,如下图所示

  链接名为menu,AS 2.0类为Menu,注意大小写。

  这是在FLA文件上的最后一步动作了。回到主场景。如下图:

  在bg层上画一些花花草草做背景在line层上画一半透明的白色长条,这只是给菜单起装饰作用。在menu层上拖入刚才做好的Menu元件。一切OK,保存吧。后面是代码了。

  建一文本文件,保存为Menu.as,找到上面贴子中有“链接名为menu,AS 2.0类为Menu,注意大小写”这么一句话。对了,必须命名为Menu,这样保持与AS 2.0类为Menu相一致。
 
  下面是文件中的代码

 /* * author 西西 * date 2006.04 */ class Menu { 
//按钮的实例名 private var home:MovieClip; private var photo:MovieClip; private var diary:MovieClip; private var work:MovieClip; private var music:MovieClip; 
private var bug:MovieClip;//晴蜓的实例名 
private var ballTween:Object;//用来使用Tween类的对像 private var DEPTH_1:Number; private var TEXTINITCOLOR:Number; private var TEXTOVERCOLOR:Number; 
//构造函数 function Menu() { TEXTINITCOLOR = 0x707D37;//文字初始颜色 TEXTOVERCOLOR = 0xFFFFFF;//鼠标经过文字的颜色 DEPTH_1 = 1;//深度 showMenuText();//设定按钮边上的文字内容 initBtn();//菜单中所有的功能都在此函数中 }; 
private function showMenuText():Void { home.txt.text = "首页"; photo.txt.text = "西西照片"; diary.txt.text = "西西日记"; work.txt.text = "西西作品"; music.txt.text = "我的音乐"; } 
private function initBtn():Void { var ins = this;//为了能在onRollOver等函数中使用全局变量而设 bug._x = home._x;//设定晴蜓的初始位置,让它停在首页的上面 bug.gotoAndStop(1);//设定晴蜓翅膀的初始状态为静止 
//将几个按钮的实例放至一数组中,目的为节约代码 var BtnArr:Array = new Array(home,photo,diary,work,music); for(var i=0;i;//按顺序取出每一个按钮 
//当鼠标经过按钮时,蜻蜓开始向着按钮的方向飞,飞到了就停下来。 mc.onRollOver =function() { //当每一按钮在鼠标经过时,设至其文字颜色 ins.setTextColor(this,ins.TEXTOVERCOLOR); //当鼠标经过时加载光线划过效果 this.attachMovie("flash","flash"+2,2); 
//将沿未完成的蜻蜓飞行的动作停止 ins.ballTween.stop(); 
//计算蜻蜓和当前鼠标所指按钮间的距离,目的为下面的实现蜻蜓转向所指按钮方向 var instance:Number = this._x - ins.bug._x; 
//如果蜻蜓是面向左,而所指按钮在晴蜓的右面,则使蜻蜓面向右转。 if(instance>0 && ins.bug._xscale>0) { ins.bug._xscale = - ins.bug._xscale; } //同上,在按钮在蜻蜓左边时,使它面向左 if(instance<0 && ins.bug._xscale<0) { ins.bug._xscale = - ins.bug._xscale; } 
//实现蜻蜓翅膀扇动效果 ins.bug.play(); 
//使用Tween类实现蜻蜓的飞行 //Strong+easeOut为从开始到结束作减速运动 //Strong+easeIn为从开始到结束作加速运动 var easeType = mx.transitions.easing.Strong.easeOut; 
//蜻蜓开始飞时的位置 var begin = ins.bug._x; 
//蜻蜓飞结束时的位置 var end = this._x; 
//飞行共用时间 var time = 2; 
//指明飞行的物体是蜻蜓 var mc = ins.bug; 
//飞吧,飞吧 ins.ballTween = new mx.transitions.Tween(mc, "_x", easeType, begin, end, time, true); 
//当飞完后,蜻蜓翅膀停止扇动 ins.ballTween.onMotionFinished = function() { ins.bug.gotoAndStop(1); }; }; 
//当鼠标离开所指按钮时,蜻蜓就飞回家 mc.onRollOut = function() { //设定字的颜色 ins.setTextColor(this,ins.TEXTINITCOLOR); 
//移除光线划过效果 var mcflash:MovieClip = this.getInstanceAtDepth(2); mcflash.removeMovieClip(); //让蜻蜓的头转向首页的方向 if(ins.bug._xscale<0) { ins.bug._xscale = - ins.bug._xscale; } 
//停止尚未完成的飞行动作 ins.ballTween.stop(); 
//实现蜻蜓翅膀扇动效果 ins.bug.play(); 
//开始飞行啦,这里None采用匀速飞行 var easeType = mx.transitions.easing.None.easeOut; var begin = ins.bug._x; 
//向着首页的方向飞 var end = ins.home._x; var time = 4; var mc = ins.bug; ins.ballTween = new mx.transitions.Tween(mc, "_x", easeType, begin, end, time, true); ins.ballTween.onMotionFinished = function() { ins.bug.gotoAndStop(1); }; }; } 
//将各个小图标加载到文字的左边 var pichome:MovieClip = home.attachMovie("home","home"+DEPTH_1,DEPTH_1); var picphoto:MovieClip = photo.attachMovie("photo","photo"+DEPTH_1,DEPTH_1); var picdiary:MovieClip = diary.attachMovie("diary","diary"+DEPTH_1,DEPTH_1); var picwork:MovieClip = work.attachMovie("work","work"+DEPTH_1,DEPTH_1); var picmusic:MovieClip = music.attachMovie("music","music"+DEPTH_1,DEPTH_1); //点击各个按钮后,所执行的代码,想要做什么,自己随便写吧 home.onRelease = function() { } 
photo.onRelease = function() { } 
diary.onRelease = function() { } 
work.onRelease = function() { } 
music.onRelease = function() { } 
} //设置字的颜色 private function setTextColor(mc:MovieClip,usecolor:Number):Void { var my_fmt = new TextFormat(); my_fmt.color = usecolor; mc.txt.setTextFormat(my_fmt); } }

  可以按CTRL+ENTER测试了

  最后,其实这个菜单还是有许多需要修改的地方。比如增加菜单中按钮的个数之类就不怎么方便。应该和外部提供一个很好的接口。另外关于按钮的排列,之间的间隔大小也应由程序控制,并且应更加灵活。我会在以后将其改进,并再发教程。

时间: 2024-08-31 11:46:29

Flash制作个性漂亮的蜻蜓菜单的相关文章

Flash制作实用别致的导航菜单

菜单|导航 演示效果: 点击这里下载源文件 当我们点击一个按钮时,希望保持它的激活样式,让用户知道现在是处于哪个模块,并且在点击其他按钮后返回未激活的样式.有兴趣的跟我通过简单的AS代码来实现这样的效果. 1.首先在时间轴上新建一层,命名为:action;在第一帧上书写如下代码: lastMC = index;//记录当前激活按钮.function hideButton(ID) {lastMC._visible = true;onEnterFrame = function () {if (las

Flash制作流行效果的韩国菜单

菜单 做这个东西有点复杂 但没有用到什么的AS 并且可以从中体会到韩国人有些动脑筋的地方. 动画效果:点击这里在新窗口中浏览动画效果 点击这里下载源文件 1. 设置画布 780*105 针速 六十 2 新建一个元件 命名为 "tiao" 在画布中央 用"线"工具画一个1像素 高为27 的灰色细线 3 新建MC命名an1t 在画布中央写入文本"日志首页 "用黑体13号 静态文本 按ctrl+b一次 然后分散到图 层 并分别转化为元件 在第十针插入关

Flash制作精彩点线形弹性菜单

菜单 今天没什么事仿照闪吧看到的一个教程,自己制作了一下(自己懒的截图了,图片还是用的原作者的): 点击这里下载源文件 1.新增一个元件40×40做按钮相应的元件(可以命名成"bg",主要是为了方便以后调整大小),接下来是制作正式制作按钮 将制作好的图形元件放入按钮的"弹起"."指针经过"和"按下"祯,在"点击"祯放入元件"bg".按此原理制作其他按钮. 2.鼠标悬停后"提示&

flash 制作个性鼠标

思路:1.隐藏原有鼠标指针:       2.鼠标的位置=mc的位置 步骤1:     绘制一个鼠标指针,保存为影片剪辑,实例名为"mymouse":     该指针也可为动画形式,且指针的中心点位于影片剪辑中心点的右下方:     做好后,放到舞台中. 步骤2: 加入AS代码层: Mouse.hide(); //隐藏默认指针 _root.onMouseMove = function() { mymouse._x = _xmouse; mymouse._y = _ymouse; upd

Flash制作一款漂亮别致的QQ菜单

菜单 大家看 这款QQ菜单的制作是不是十分精美而别致??而且原文件总共才100K 所以让我们来学习它的制作 做出文件量小而且漂亮的导航菜单 点击这里全屏观看效果 点击这里下载源文件 这个菜单分两个部分组成 后面的动画效果,和前面的菜单 我们先做后面的动画. 首先设定画布 在场景上新建一个元件 然后拉出一个渐变效果 矩形设为画布大小 渐变颜色分别是#01ACFF,#E1F7FF,#DAF1FF 新建一个叫"背景"的影片剪辑 把刚才做的元件拖进去,把"背景"MC拖到舞台

Flash AS3制作个性的旋转圆形网页导航

核心提示:Flash AS3制作个性的旋转圆形网页导航教程. Flash AS3制作个性的旋转圆形网页导航. 1.用矩形工具绘制一个黑色的矩形,转换为MC影片剪辑,打开属性窗口 2.双击这个影片剪辑编辑它,使用文本工具,设置为动态文本,绘制一个区域,设置颜色是白色,命名实例名为abelBtn. 3.回到场景1,删除掉刚刚建立的影片剪辑. 4.我们选择第一帧,然后打开动作面板,输入下面代码,主要是为了导入Tweenlite engine. import com.greensock.*; impor

20个Flash制作漂亮动画的经典问题问答

问题 1.问题:我做好的FLASH放在PAGE上面以后,它老是循环,请问怎么能够让它不进行循环? 回答:最后一个Frame(帧)的Action设置成Stop. 2.看一些Flash教程时,经常会看到MC.FC等符号,请问代表什么意思?回答:MC=Movie Clip,即动画片段.FS=FSCOMMAND,是Flash的一个命令集合. 3.为何用IE看FLASH动画时只有图像没有声音?回答:FLASH的插件版本太低,重装一个FLASH 4以上的插件吧! 4.怎么控制旋转球体的速度?回答:选择菜单M

Flash制作简单的缓冲菜单

 [步骤] 第一步:制作几个按钮,放在主场景中,实例名分别为_btn0._btn1._btn2._btn3._btn4._btn5._btn6 第二步:创建影片剪辑,在里面画一个小三角形,在三角形旁边拉一个动态文本,实例名为my_txt:把该影片剪辑放在主场景中,实例名为zhisi_mc 第三步:把按钮做些动画效果 第四步:在最后一帧上写如下代码:   stop(); zhisi_mc._x=_btn0._x; varmy_array:Array=newArray("首页","

Win7美化:自己动手,制作个性的右键菜单图标

        前段时间,Win7之家提供了<Win7美化 攻略:替换imageres.dll,图标全变样>一文.今天再给大家献上<Win7美化:自己动手,制作个性的右键菜单图标>;主要以右键菜单为例,详 细讲解系统图标个别美化过程,当然,大家可以参照此文举一反三 .在此,特别感谢软媒论坛美化达人 Q8267609 分享. 右键菜单的三个系统默认图标,即屏幕分辨率+小工具+个性化三个图标.这三个图标美化工作极易被大家忽略! 看图:(示例为美化后的效果) 美化之前,首先要弄清这三个图