文章搜索:
打开支付宝首页搜索“510617664”,即可领红包
  首页--> 计算机--> FLASH教程
 
仿央视网Flash动态导航菜单
http://www.xxqqss.com 学习轻松网 点击量:5498
 

  分析:该效果主要是利用在按钮的 OVER(经过)帧中放入 Movie Clip(影片剪辑 MC)来实现的,主要效果的实现都是在 MC 中实现的,利用了遮罩、淡入,移动等动画效果叠加的方式。由于几个按钮的实现方式是相同的,所以用到了 MC 的嵌套配合一些简单 AS 的技巧,这是值得大家重点学习的。在制作之前我们首先要准备好在效果中看到几幅图片,一幅用作背景,另外七幅在按钮中使用(尺寸相同),当然你可以选择任何自己喜欢的图片。

  一、舞台的修饰

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

  将准备好的图片导入,菜单:File(文件)-->Import...(导入) 打开Import(导入)对话框,选择已经准备好的几幅图片(可以多选),按打开按钮导入。注意:如果出现下面的对话框说明导入的图片是按一定规律命名的,单击是将导入所有按规律命名的图片,单击否导入选中的图片,单击取消不导入任何图片。

按此在新窗口浏览图片 

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

按此在新窗口浏览图片 

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

按此在新窗口浏览图片


  返回舞台(Ctrl+E),按新建层按钮按此在新窗口浏览图片 新建两层,将最上层命名为Lines,最下层命名为Back(背景层,已放置好了背景图片),中间层命名为Buttons,锁定 Back 层以免在编辑其他层时误修改了背景图片。

按此在新窗口浏览图片

 

  二、主要动画效果的实现

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

按此在新窗口浏览图片

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

按此在新窗口浏览图片 

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

按此在新窗口浏览图片

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

按此在新窗口浏览图片

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

按此在新窗口浏览图片

 

下一页     下一页
打印】 【关闭
免责声明 :本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请发送fiyeadwyv@163.com
最热门点击排行
 
版权所有 2006-2021:学习轻松网 Copyright http://www.xxqqss.com All rights reserved 浙ICP备14013707号-1
广告联系电话: 13958357030 联系QQ:9792414 工具条下载