Your Ad Here
首页 | 编程语言 | 网站建设 | 游戏天堂 | 冲浪宝典 | 网络安全 | 操作系统 | 软件时空 | 硬件指南 | 病毒相关 | IT 认证
软讯网络 > 软件时空 > 工具软件 > 旗帜动画
【标  题】:旗帜动画
【关键字】:动画
【来  源】:网络

旗帜动画

Your Ad Here

最近经常有朋友问:你们的旗帜动画(在宇风站点的左上角,如下图所示)是如何做出来的?为什么这样复杂的动画访问速度却很快?

其实这就是目前网上非常流行的Flash动画,在此动画中有旋转的地球,运动的星空,闪烁的星光等眼花缭乱动态效果,文件却只有20K,所示网上速度较快。现在我们就将全部的制作过程写出来。

步骤一、旋转的地球
1.选菜单栏中的插入>添加组件(Insert>New Symbol.),在出现的对话框中选图像(Graphic), 命名为“圆形“,用点选椭圆(Oval[o]),将线段颜色(Line color)选为空line.gif (140 bytes),在工作区域画一个填充了颜色的圆,如图1所示。

9.2.2.gif (1983 bytes)
图1

2.点选菜单栏中插入>添加组件(Insert>New Symbol..)在出现的对话框中选图像(Graphic)命名为“前景”,用点选椭圆(Oval[o]),点选工具栏中的填充颜色工具(Fill color)弹出调色板,选调色板正上方的小方形按钮,出现颜色(Color)调节器对话框,选渐层(Gradint)将外层调成深蓝,中心的Alpha值调为10左右,如图2所示。

9.2.5.gif (12995 bytes)
图2

3.关闭对话框,这样我们就可以在工作区域画一个和“圆形”(见图1)一样大的圆,圆中填充了蓝色并向圆心逐渐透明,如图3所示。

9.2.6.gif (3216 bytes)
图3

4.点选菜单栏中插入>添加组件(Insert>New Symbol)在出现的对话框中选图像(Graphic)命名为“地图”,用铅笔工具(Pencil)选自由绘画模式(Ink)在工作区域勾画一个世界地图,为了能精确绘制,可将图形放大,如图4所示。

9.2.7.gif (15173 bytes)
图4

描完边以后用油漆桶工具(Paint Bucket Tool)将其填充为橙色,并把地图边缘删除。
5.点选菜单栏中选择插入>添加组件(Insert>New Symbol),在出现的对话框中选电影片段(Movie Clip) 命名为“地球”如图5所示。

9.2.8.gif (7788 bytes)
图5

6.点击菜单中的窗口>图标库(Window>Library),把“圆形”拖到工作区中央,双击Layer1将其改名为“圆形1”,如图6所示。

9.2.9.gif (11662 bytes)
图6

7.在第40帧插入关键帧。点时间轴左下的增加图层(Add Layer),将此层命名为“橙色地球”,从图标库中把“地图”分两次拖至工作区域,调整好位置,将两地图选中,按Ctrl+G将其成组,如图7所示。

9.2.10.gif (11053 bytes)
图7

8.在第40帧处插入关键帧(Insert Keyframe),在工作区将“地图”拖到如图8所示的位置。

9.2.11.gif (10908 bytes)
图8


9.用鼠标双击“橙色地球”层第1到40帧之间的任意位置,在出现的对话框中选择渐变(Tweening)标签,在Tweening下拉框中选移动(Motion)如图9所示,最后点确定。

9.2.12.gif (5331 bytes)
图9

10.点增加图层(Add Layer)将此层命名为“圆形2”,从图标库(Library)中把“圆形”拖至工作区域,如图10所示。

9.2.13.gif (10767 bytes)
图10

11.用方向键移动“圆形2”中的“圆形”使之与“圆形1”中的“圆形”重叠,如图11所示。

9.2.14.gif (10690 bytes)
图11

12.点增加图层(Add Layer)将此层命名为“背光面地球”, 然后把“橙色地球”层的第1帧挎贝至“背光面地球”层,并在工作区将“地图”图向左边拖,如图12所示。

9.2.15.gif (11607 bytes)
图12

13.从菜单中选择修改>变形>水平翻转(Modify>Transform>Flip Vertical),将地图转个方向,这样两图相对运动时就能产生正确的视觉效果,如图13所示。

9.2.16.gif (11381 bytes)
图13

14.在工作区双击“地图”在出现的属性对话框中选颜色效果(Color Effect),然后选Tint将调暗作为背光面的地球,如图14所示。

9.2.17.gif (10258 bytes)
图14

15.在第40帧点右键,在弹出的菜单中选插入关键帧(Insert Keyframe),按Shift键在第40帧用鼠标将“地图”拖到如图15所示的位置。

9.2.19.gif (11797 bytes)
图15

16.双击“背光面地球”层第1到40帧之间,在出现的对话框中选择渐变(Tweening)标签,从Tweening的下拉框中选移动(Motion),最后点确定。
17.在“圆形1”层状态栏上点右键,在弹出的菜单中选遮罩(Mask),这样后面橙色地球只能显示在“圆形”范围内,将这层锁定。同样在“圆形2”层状态栏上点右键,在弹出的菜单中选遮罩(Mask),这样后面“背光面地球”也只能显示在“圆形2”范围内,将这层锁定。最后出现如图16所示的效果。

9.2.20.gif (8393 bytes)
图16

18.点增加图层(Add Layer)在最上建一层命名为“前景”,从图标库(Library)中把“前景”拖至工作区域,调整其位置将显示出的地球盖住,如图17所示。

9.2.21.gif (9530 bytes)
图17

步骤二、制作放射状的星空背景:
1.点选菜单栏中插入>添加组件(Insert>New Symbol)在出现的对话框中选图像(Graphic)命名为"宇宙",用笔刷工具(paintbrush)在工作区域点画出白色的星星,如图18所示。

9.2.22.gif (752 bytes)
图18

2.点选菜单栏中插入>添加组件(Insert>New Symbol),在出现的对话框中选电影片段(Movie Clip), 命名为"星空",从图标库(Library)中把“宇宙”拖至工作区,用缩放工具将图形缩小10倍以上,在第30帧插入关键帧,将“宇宙”图形拖大填满整个工作区,双击第1帧,弹出帧属性(Frame Properties)对话框,选择渐变(Tweening)中的移动(Motion),产生星空由小变大的电影片段,打开描图纸外框(Onion Skin Outlines),可以看出变化轨迹,如图19所示。

9.2.23.gif (15225 bytes)
图19

3.点选菜单栏中选择插入>添加组件(Insert>New Symbol),在出现的对话框中选电影片段(Movie Clip) 命名为"宇风",从图标库(Library)中把电影片段“星空”拖至工作区域,在第1帧点右键选复制帧(Copy Frame),增加一层layer2,在第6帧点右键,在弹出的菜单中选粘贴帧(Paste Frame),如图20所示。

9.2.24.gif (4653 bytes)
图20

4.同样的建立layer3、layer4、layer5层,然后分别在第12帧、18帧、24帧将“星空”复制过来。为了产生更好的效果,可将“星空”旋转一定角度。用鼠标点layer5层的第24帧,再按Ctrl键,将第24帧拖至第30帧(也即是复制),用同样的方法分别将layer4的第18帧,layer3的第12帧、layer2第6帧、layer1第1帧复制第30帧,这样就产生了星空不断的呈放射状运动,如图21所示。

9.2.25.gif (6716 bytes)
图21

5.双击Layer5层的第30帧,在弹出的对话框中选动作标签(Actions),点add.gif (131 bytes)从菜单中选跳至(Go To),在右边的frame选项中加入18,即动画首先从第1帧播放至第30帧,然后在第18与第30帧之间循环,星空背景制作完毕,如图22所示。

9.2.26.gif (8275 bytes)
图22

 

步骤三、制作光晕
1.点选菜单栏中插入>添加组件(Insert>New Symbol..),在出现的对话框中选图像(Graphic),命名为“星光线”,用点选矩形工具(Rectangle [R]),点选工具栏中的填充颜色工具(Fill color),弹出调色板,选调色板正上方的小方形按钮,出现颜色(Color)调节器对话框,选渐层(Gradint),在彩色指示器中设置五种关键色,将左1指示器的颜色调节为白色,透明度(Alpha)0%,左2指示器的颜色调节为淡蓝色R 180 G 230 B 250,中间指示器的颜色为白色,透明度(Alpha)50%,右2指示器的颜色为与左2相同,右1指示器的颜色为与左1相同,如图23所示。

25.gif (11366 bytes)
图23

2.在工作区域将线段颜色(Line Color)的填充边框调整为空,用矩形工具画一个有渐变效果的细长条,如图24所示。

26.gif (5864 bytes)
图24星光线

3.点选菜单栏中插入>添加组件(Insert>New Symbol..),在出现的对话框中选图像(Graphic),命名为“星光”,从图标库(Library)中把"星光线" 拖到工作区域,作为水平线,再拖一"星光线",从菜单中选择修改>变形>缩放并旋转(Modify>Transform>Scale and Rotate),在出现的对话框中将Scale的数值填为110,Rotate填入90,"星光线"将会延长并旋转了90度,如图25所示。


27.gif (5710 bytes)
图25 缩短并旋转星光线

4.分别从从图标中拖两根"星光线",用同样的方法将Scale填为60,Rotate分别填入45、135,调整好各线的位置,最后形成由四根线组成的放射状星光,如图26所示。

28.gif (2813 bytes)
图26

5.点选菜单栏中插入>添加组件(Insert>New Symbol..),在出现的对话框中选图像(Graphic),命名为“复合光晕”,从图标库(Library)中把"星光" 拖到工作区域,将此层命名为“星光”。
6.新增一层取名为“园环”,用点选椭圆(Oval[o]),点选工具栏中的填充颜色工具(Fill color),弹出调色板,选调色板正上方的小方形按钮,出现颜色(Color)调节器对话框,选固定(solid),在彩色指示器中将颜色调节为咖啡色R 255 G 100 B 100,透明度(Alpha)30%,如图27所示。

29.gif (8901 bytes)
图27

7.关闭颜色对话框,将填充颜色工具(Fill color)选为空,线段粗细(Line Thickness)选2.0,在工作区域以“星光”为中心画一圆环,如图28所示。

30.gif (10379 bytes)
图28

8.新增一层取名为“闪亮”,现在制作耀眼的光效,点选椭圆(Oval[o]),点选工具栏中的填充颜色工具(Fill color)弹出调色板,选调色板正上方的小方形按钮,出现颜色(Color)调节器对话框,选渐层(Gradint),在彩色指示器中设置两种关键色,将左指示器的颜色调节为白色,右指示器的颜色为黄色:R 250 G 200 B 60,透明度(Alpha)0%,按图29的位置拖放好指示器的位置,关闭对话框。

31.gif (10822 bytes)
图29

9.将线段颜色(Line Color)选为空,填充颜色工具(Fill color)选为填充色,用椭圆工具在工作区以“星光”为园心画一有闪亮效果的光晕,完成“复合光晕”的制作,如图30所示。

32.gif (12766 bytes)
图30

 

步骤四、制作所需显示的网站标题
我们从菜单栏中选择插入>添加组件(Insert>New Symbol..),在出现的对话框中选选图像(Graphic),然后分别建立图像:“宇”,“风”,“多媒体”,“工作室”,如图31所示。

33.gif (7942 bytes)
图31

步骤五、合成动画:
1.从菜单中选择修改>影片(Modify>Movie),弹出对话框,因为我们做的是站标,在网页中占的面积不能太大,所以在这修小电影尺寸,如图32所示。

35.gif (7143 bytes)
图32

2.从图标库(Library)中把电影片段"星空" 拖到工作区域,调整大小,并将这层命令为“星星”,如图33所示。

36.gif (3100 bytes)
图33

 

3.在“星星”层上面新建一层,改名为“地球”:
从图标库(Library)中把电影片段“地球” 拖到工作区域,调整位置和大小,如图34所示。

37.gif (13870 bytes)
图34

4.在“地球”层第10帧插入关键帧,再选中第1帧,在工作区双击“地球”,在弹出的对话框中选Color Fffect标签,在下拉框中选,透明(Alpha),改小数值,给“地球”做个淡入效果,如图35所示。

38.gif (2288 bytes)
图35

5.在第1至10帧之间双击,在弹出的对话框中选渐变(Tweening)标签,在下拉框中选移动(Motion),将会产生“地球”逐渐由暗变明的动画效果。
6.接着在第25帧插入关键帧,选中这一帧,在工作区将“地球”缩小并向左调整位置,如图36所示。

39.gif (3982 bytes)
图36

7.在第10至25帧之间双击,在弹出的对话框中选渐变(Tweening)标签,在下拉框中选移动(Motion),将会产生“地球”向左移动并缩小的动画。
8.先在第40帧插入关键帧,然后在第55帧插入关键帧,选中第55帧,在工作区将“地球”缩小并移向左上角。在第40至55帧之间双击,在弹出的对话框中选渐变(Tweening)标签,在下拉框中选移动(Motion),将会产生“地球”向左上角运动并变小的动画,如图37所示。

40a.gif (6534 bytes)
图37

9.在“地球”层上增加一层,取名为“星光”:
在第10帧插入空帧,从图标库(Library)中把图形“复合光晕” 拖到工作区右上角,调整位置和大小,如图38所示。

40.gif (12396 bytes)
图38

10.接着在第25帧插入关键帧,选中这一帧,在工作区将“复合光晕”放大并向左移动至“地球”同一位置,如图39所示。

41.gif (4552 bytes)
图39

11.在第10至25帧之间双击,在弹出的对话框中选渐变(Tweening)标签,在下拉框中选移动(Motion),在Rotate下拉框中选Clockwise,Times输入1,将会产生星光向左移的同时旋转并放大的效果,如图40所示。

42.gif (2551 bytes)
图40

12.在第35帧插入关键帧,选中这一帧,在工作区将“复合光晕”放大三到五倍,在第25至35帧之间双击,按图41设置。

44.gif (14885 bytes)
图41

13.在第38帧插入关键帧,在工作区将这帧“复合光晕”缩小(和第25帧大小相同)并适当右移,在第35至38帧之间双击,按图40设置关键帧动画,结果见图42。

45.gif (9395 bytes)
图42

14.最后在第60帧插入关键帧,在工作区将这帧“复合光晕”拖到右边舞台外,将它缩小,然后在第38至60帧之间双击,按图41设置关键帧动画,星光动画就做完了,如图43所示。飞华统计专家

46.gif (10172 bytes)
图43

 

15.在“星光”层上增加一“宇”层:
在第25帧插入空帧,从图标库(Library)中把“宇”字 拖到工作区,中心与“地球”重合,将它放大,如图44所示。

47.gif (5194 bytes)
图44

16.在第30帧插入关键帧,将“宇”缩小,再把第25帧“宇”的Alpha改为0,在第25至30帧之间双击,在弹出的对话框中选渐变(Tweening)标签,在下拉框中选移动(Motion),将会产生“宇”由大到小的闪现效果,如图45如示。

48.gif (10615 bytes)
图45

17.在第35帧插入关键帧,在工作区将“宇”向左移动(为“风”让位),并将Alpha改为30,双击第30至35帧之间,在弹出的对话框中选渐变(Tweening)标签,在下拉框中选移动(Motion),如图46所示。

49.gif (13925 bytes)
图46

18.先在第40帧插入关键帧。然后在第45帧插入关键帧,在工作区将“宇”纵向拉长,在第40至45帧之间双击,在弹出的对话框中选渐变(Tweening)标签,在下拉框中选移动(Motion),如图47所示。

50.gif (9600 bytes)
图47

19.在第60帧插入关键帧,在工作区将“宇”纵向拉短,双击第45至60帧之间,在弹出的对话框中选渐变(Tweening)标签,在下拉框中选移动(Motion),如图48所示。

51.gif (7547 bytes)
图48

20.按Shift键选中第45帧至60帧,点右键,从弹出的菜单中选Copy Frames,再新增三层,分别在第48,50,52帧Paste Frames,结果会产生重影效果,如图49所示。

52.gif (13510 bytes)
图49

21.本动画总长为60帧,因此我们需要清除多余的部分,可先按Ctrl键,再用鼠标点在多余的关键帧上往左拖,如图50所示。

53.gif (10019 bytes)
图50

 

 

现在按F12就可打开浏览器预览动画。这里说明一下,如果你对已做好电影的尺寸不满意,可在网页编辑器(Dreamweaver及FrontPage都行)中将预览的生成的HTML文件(与flash电影同名,保存在同样的目录中,以htm为后缀)打开,再将电影拖大或拖小。

Flash MV音乐和字幕的制作:【上一篇】
用flash4制作迷人的水中倒影:【下一篇】
【相关文章】
  • 影随鼠动的Flash文字动画
  • Flash互动动画剖析:惯性模拟
  • 用Flash制作有趣的彩色泡泡动画
  • Flash动画的“遮丑”研究
  • 己动手制作手机Flash主题动画
  • 日本动画制作幕后完全流程揭秘(1)
  • 日本动画制作幕后完全流程揭秘(3)
  • 日本动画制作幕后完全流程揭秘(4)
  • 日本动画制作幕后完全流程揭秘(5)
  • 日本动画制作幕后完全流程揭秘(6)
  • 【随机文章】
  • CRM参考文档
  • 谈谈服务器基础架构工具的选择(二)
  • 系统还原的另类运行全攻略
  • 把一张图片变形扭曲成各种不同的长宽
  • 二进制格雷码与自然二进制码的互换
  • C# 反射入门知识
  • 漫谈嵌入式实时操作系统与测试
  • 使用autofs遇到的奇怪的问题
  • Steptty v2.0 使用说明书
  • 创建数据库表
  • 【相关评论】
    没有相关评论
    【发表评论】
    姓名:
    邮件:
    随机码*
    评论*
          
    |  首 页  |  版权声明  |  联系我们   |  网站地图  |
    CopyRight © 2004-2007 软讯网络 All Rigths Reserved.