flash导航按钮制作.doc

炫丽导航按钮制作教程 先看下最终效果图： 步骤： 1、打开flash，点击菜单栏中的“插入”——“新建元件”（快捷键Ctrl + F8），将元件命名为btn1，文件类型为“影片剪辑”； 2、选择“矩形工具”，将笔触颜色设为#CCCCCC，将填充颜色设为#000000，将笔触大小设为2，然后绘制图形，如图1所示： 图1 3、选中圆角矩形的轮廓，再在菜单栏中选择“修改”——“形状”——“将线条转换成填充”； 4、用选择工具将圆角矩形的下面一部分选中如图2，并将其删除如图3，最后将该层锁定； 图2 图3 5、选中图形中的黑色部分并复制，然后新建一个图层，命名为“遮罩1”，按下快捷键Ctrl + Shift + V进行粘贴，并将图层1锁定； 6、新建一个图层，命名为“发光1”，选择“椭圆形工具”，将填充色调为#AF00AF，将轮廓色调为无，绘制一个椭圆，然后将其转换成影片剪辑，命名为light1，选中该影片剪辑，给该影片剪辑添加一个发光滤镜，将模糊X、模糊Y的值设为61，将强度设为131%，品质为低，颜色值为#AF00AF，如图4，效果如图5； 图4 图5 7、将上面的元件再复制粘贴在“发光1”图层，然后放在适合的位置，如图6所示： 图6 8、将“发光1”图层拖曳到“遮罩1”图层下，并将“遮罩1”图层转换成遮罩层，设置与效果如图7、8； 图7 图8 9、新建一个图层，命名为“发光2”，选择“椭圆工具”，将填充色调为#DB1299，将轮廓色调为无，绘制一个椭圆，并将其转换为影片剪辑，添加发光效果（发光颜色为#DB1299），设置参数如图9所示，效果如图10所示； 图9 图10 10、再新建一个图层，命名为“发光3”，将上面的影片剪辑再复制到该层，然后按照图11放置； 图11 11、将图层“发光2”、“发光3”拖入到遮罩层“遮罩1”内，如图11； 图11 12、将所有图层的眼睛关闭，再将图层1的眼睛打开，将黑色部分复制，然后新建一个图层，命名为“up”，按住Ctrl + Shift + V，用选择工具选中该该图形的下半部分，如图12所示；然后按住Ctrl + X将下半部分剪切掉 图12 13、新建一个图层，命名为“down”，然后按下快捷键Ctrl + Shift + V，将步骤12剪切的部分粘贴到该层。 14、将图层up里面的图形颜色改为#40076B，将图层down里面的图形的颜色改为#5C1DB8，分别将它们转换成影片剪辑； 15、将图层1里的图形转换为影片剪辑，并命名为“btnMc”，再讲实例名命名为“btnMc”。最后将所有图层按图13所示的顺序摆放； 图13 16、将图层“发光2”、“发光3”、“up”、“down”的第一帧拖曳到第六帧，分别在图层“发光2”、“down”的第20帧处按下F6，在图层“发光3”、“up”的第24帧处按下F6，然后将该四个图层的第六帧里面的影片剪辑的alpha值设置为0，将图层“up”的第24帧上的影片剪辑的透明度设为90，将图层“down”的第20帧上的影片剪辑的透明度设为50，再给它们添加补间动画，最后将所有图层的帧延长到40帧处，如图14所示； 图14 17、新建一个图层，并命名为“label”，在第一帧添加一个标签，命名为“out”，在第六帧添加一个空白关键帧，并添加一个标签，命名为“over”，如图15所示； 图15 18、最后新建一个图层，命名为“actions”，在第一帧输入以下代码： stop(); btnMc.onRollOver = function(){ /*当鼠标经过按钮时，就从标签over开始播放*/ gotoAndPlay(over); } btnMc.onRollOut = function(){ /*当鼠标离开按钮时，就从标签out开始播放*/ gotoAndPlay(out); } 该按钮制作差不多完成，按下Ctrl + Shift + Enter组合键测试效果。下面给按钮下方添加一个发光的效果，是按钮更加炫丽。 19、新建一个图层，命名为“bottom-glow”，将“发光3”图层里面的元件复制到该层，然后将所有图层隐藏，只将“bottom-glow”和“图层1”打开，把bottom-glow图层的元件调为如图16所示的位置； 图16 20、新建一个图层，命名为“遮罩2”，在该图层绘制一个矩形，并将该层设置为遮罩层（“bottom-glow”图层在遮罩层内），如图17所示； 图17 21、将图层“遮罩2”和“bottom-glow”的第一帧拖到第7帧，然后在图层