分享
 
 
 

仿央视网Flash动态导航菜单

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

今天给大家介绍一下央视网站的一个 Flash 导航菜单的制作方法,实现起来非常简单,只用到最基本的动画效果和简单的 Action Script(动作脚本 AS) ,但是效果非常不错。

点击这里下载源文件

分析:该效果主要是利用在按钮的 OVER(经过)帧中放入 Movie Clip(影片剪辑 MC)来实现的,主要效果的实现都是在 MC 中实现的,利用了遮罩、淡入,移动等动画效果叠加的方式。由于几个按钮的实现方式是相同的,所以用到了 MC 的嵌套配合一些简单 AS 的技巧,这是值得大家重点学习的。

在制作之前我们首先要准备好在效果中看到几幅图片,一幅用作背景,另外七幅在按钮中使用(尺寸相同),当然你可以选择任何自己喜欢的图片。

一、舞台的修饰

运行Flash(这里用的是 Flash MX 英文版,文中会尽量给出详细的中英文对照),打开Document Properties(文档属性)对话框(快捷键 Ctrl+J),设置宽高为 419px 和 246px、帧速为默认值12fps、背景色为 #FFC318,与背景图片的背景色相同,确定后返回场景编辑界面。

将准备好的图片导入,菜单:File(文件)-->Import...(导入) 打开Import(导入)对话框,选择已经准备好的几幅图片(可以多选),按打开按钮导入。

注意:如果出现下面的对话框说明导入的图片是按一定规律命名的,单击是将导入所有按规律命名的图片,单击否导入选中的图片,单击取消不导入任何图片。

(图1)

所有图片导入完成后都将被放置在场景中,将其他图片从场景中删除,只留下用作背景的图片。不用担心,删除的图片还保留在库(Library)中,以后会用到他们。选中背景图片后打开Aligh(排列)面板(如下图)(快捷键 Ctrl+K),按下 To Stage 按钮

以适应舞台,分别单击按钮
使图片在舞台中居中。

(图2)

新建一个图形(Graphic)符号(快捷键 Ctrl+F8),命名为Line_g,确定后进入编辑状态;选择 Line Tool (画线工具 N),画一竖线,在属性面板中修改属性,设置高为246px(与 Flash 同高)、坐标为(0,0),颜色比背景色略深、样式设置为点线(如图所示);再画一线,高度为25(与将要制作的按钮高度相同),颜色为白色,坐标(0,110)(与前一条线重合,底部对齐),其他属性保持默认。

(图3)

返回舞台(Ctrl+E),按新建层按钮

新建两层,将最上层命名为Lines,最下层命名为Back(背景层,已放置好了背景图片),中间层命名为Buttons,锁定 Back 层以免在编辑其他层时误修改了背景图片。

(图4)

选择Lines层,打开 Library (库 Ctrl+L),将符号 line_g 拖入场景中,设置横坐标为54(按钮宽度),纵坐标按舞台居中;在舞台中再复制出6个 line_g (共7个),选择一条,设置横坐标为378(54*7),Ctrl+A 选中舞台中所有的符号(因背景层被锁定,所以背景图片不会被选中),单击排列面板中的 To Stage 按钮

取消其按下状态,单击按钮
使符号具有相同的间距,将 lines 层锁定。

这样舞台就修饰好了。

二、主要动画效果的实现

新建一个 MC 命名为 pics_m,用来存放所有按钮中的图片以便制作 MC 的嵌套。

按 F6 插入6个关键帧(共7帧),每帧放入一幅图片,并设置图片坐标为(0,0);再新建一个 MC 命名为 Move_m ,将 pics_m 拖入备用,同时在属性面板中将其 Inatance Name 命名为 pic 以便以后用AS进行控制(图5),并将该层命名为 pic。

(图5)

新建一层命名为 Mask,利用 Rectangle Tool (矩形工具 R)在该层画一矩形,在属性面板中设置其宽为54(与按钮相同),高221(与图片的高相同),坐标(0,0);用鼠标拖拽图片 MC 的右上角至矩形的右上角附近,出现 图6 所示的符号(自动捕获)松开鼠标即可,选中 Timeline (时间线) 中 pic 层的第37帧,按 F6 插入关键帧,按 F9 弹出 Action 面板,按 Ctrl+Shift+E 转换到可以自由输入脚本的专家模式,输入 stop() 动作;然后按上面类似的方法,拖动图片 MC 的左上角至矩形的左上角进行自动捕获。

(图6)

右键单击pic层前面的帧,在弹出菜单中选择第一项 Create Motion Tween (创建动画 图7)。

(图7)

选中 pic 层第10帧,按 F6 创建关键帧;回到第一帧,选中编辑区中的 MC ,在属性面板中设置 Color Styles (样式)为 Alpha(透明),数值为1%(图8),这样一个淡入并移动的动画就制作完成了。

(图8)

再选择 Mask 层的第37帧,按 F5 创建内容帧,右键单击 Mask 层,选择弹出菜单中的 Mask 将该层设置为遮罩层,完成后如图9。

(图9)

三、按钮的制作

首先制作按钮 OVER 帧中要用到的 MC:新建 MC 命名为 btn_mc_1;将 move_m 拖入,设置坐标(0,0);在 Action 面板中输入下面的 AS:

onClipEvent (load) {

pic.gotoAndStop(1);

//使 pics_m 停在第一帧,以显示第一幅图片

}

选择矩形工具,画一矩形,删除边线,设置属性为:宽54,高25,颜色#FFA600;选择矩形,按 F8 转换为图形符号,命名为 btn_back备用;保持 btn_mc_1 的编辑状态,利用自动捕获的方法,将刚刚创建的矩形符号的左上角与 move_m 的坐下角对齐;设置矩形符号的 Color Styles 属性为 tint 选择一种颜色 (图10),完成后入如 图11 所示。

(图10)
(图11)

然后在 Library (库)中右键单击 btn_mc_1 选择弹出菜单中的 Duplicate (复制)弹出 Duplicate Symbol (复制符号)对话框,将名称改为 btn_mc_2,进入 btn_mc_2 的编辑状态,将 move_m 的 Action 的 pic.gotoAndStop(1); 改为 pic.gotoAndStop(2);,btn_back 改为另一种颜色;以此类推再制做出 btn_mc_3 -- btn_mc_7。这样所有按钮的动画就制作完成了。

下面来制作按钮:新建 Button (按钮)符号,命名为btn_1;将 btn_back 拖入编辑窗口中,将其左下角与窗口中的小十字对齐;选中 Hit (按钮响应区域)帧按 F7 创建空白帧,用矩形工具画一矩形,宽54,高246(动画的高),也将其左下角与窗口中的小十字对齐,将该层命名为 back;新建一层命名为 movie 选中 Over 帧按 F6 创建关键帧,将 btn_mc_1 拖入,左下角与窗口中的小十字对齐,选中该层的 down 和 hit 帧,按 Shift+F5 将其删除;新建一层命名为 text ,选择 Text Tool (文字工具 T)在窗口中单击,输入导航文字,在属性面板中设置字号为12,勾选 Use Device Fonts 选项(图12)使字体更清晰(发布后会看到效果)。

(图12)

这样第一个按钮就制作完成,按照刚才制作 btn_mc_2 ~btn_mc_7 的方法同样复制出 btn_2 ~ btn_7,需要修改的是导航文字和 over 帧 MC。

修改文字不必说了,需要说明的是更换 over 帧 MC 的方法,以 btn_2 为例:双击 Library (库)中的 btn_2 进入编辑状态,选择窗口中的 movie层的 MC 符号,单击属性面板中的 Swap... (交换)按钮,弹出 Swap Symbol (交换符号)对话框,将其更换为相应的 MC 即可( btn_1 对应 btn_mc_1,以此类推)。

四、动画的完成

回到舞台,选中 buttons 层,将制作好的 btn_1~btn_7 拖入,并按效果中的样子摆放好,可以利用前面提到过的排列面板。

现在这个漂亮的导航菜单就制作完成了,从这个例子中我们可以看到,只要创意好,即使最简单的动画也能实现很漂亮的效果。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
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- 王朝網路 版權所有