当前页面位置: » 丰搜网 » 文档中心 » 详细内容
旗帜动画
最近经常有朋友问：你们的旗帜动画(在宇风站点的左上角，如下图所示）是如何做出来的？为什么这样复杂的动画访问速度却很快？
其实这就是目前网上非常流行的flash动画，在此动画中有旋转的地球，运动的星空，闪烁的星光等眼花缭乱动态效果，文件却只有20k,所示网上速度较快。现在我们就将全部的制作过程写出来。
步骤一、旋转的地球
1.选菜单栏中的插入>添加组件（insert>new symbol.），在出现的对话框中选图像（graphic）， 命名为“圆形“，用点选椭圆(oval[o])，将线段颜色（line color）选为空，在工作区域画一个填充了颜色的圆，如图1所示。
图1
2.点选菜单栏中插入>添加组件（insert>new symbol..）在出现的对话框中选图像（graphic）命名为“前景”，用点选椭圆(oval[o])，点选工具栏中的填充颜色工具（fill color）弹出调色板，选调色板正上方的小方形按钮，出现颜色（color）调节器对话框，选渐层(gradint)将外层调成深蓝，中心的alpha值调为10左右，如图2所示。
图2
3.关闭对话框，这样我们就可以在工作区域画一个和“圆形”（见图1）一样大的圆，圆中填充了蓝色并向圆心逐渐透明，如图3所示。
图3
4.点选菜单栏中插入>添加组件（insert>new symbol）在出现的对话框中选图像（graphic）命名为“地图”，用铅笔工具（pencil）选自由绘画模式（ink)在工作区域勾画一个世界地图,为了能精确绘制，可将图形放大，如图4所示。
图4
描完边以后用油漆桶工具（paint bucket tool)将其填充为橙色，并把地图边缘删除。
5.点选菜单栏中选择插入>添加组件（insert>new symbol），在出现的对话框中选电影片段（movie clip) 命名为“地球”如图5所示。
图5
6.点击菜单中的窗口>图标库(window>library),把“圆形”拖到工作区中央，双击layer1将其改名为“圆形1”，如图6所示。
图6
7.在第40帧插入关键帧。点时间轴左下的增加图层（add layer），将此层命名为“橙色地球”,从图标库中把“地图”分两次拖至工作区域，调整好位置，将两地图选中，按ctrl+g将其成组，如图7所示。
图7
8.在第40帧处插入关键帧（insert keyframe)，在工作区将“地图”拖到如图8所示的位置。
图8
9.用鼠标双击“橙色地球”层第1到40帧之间的任意位置，在出现的对话框中选择渐变（tweening）标签，在tweening下拉框中选移动(motion)如图9所示，最后点确定。
图9
10.点增加图层（add layer）将此层命名为“圆形2”，从图标库（library）中把“圆形”拖至工作区域，如图10所示。
图10
11.用方向键移动“圆形2”中的“圆形”使之与“圆形1”中的“圆形”重叠，如图11所示。
图11
12.点增加图层（add layer）将此层命名为“背光面地球”, 然后把“橙色地球”层的第1帧挎贝至“背光面地球”层，并在工作区将“地图”图向左边拖，如图12所示。
图12
13.从菜单中选择修改>变形>水平翻转(modify>transform>flip vertical)，将地图转个方向，这样两图相对运动时就能产生正确的视觉效果，如图13所示。
图13
14.在工作区双击“地图”在出现的属性对话框中选颜色效果（color effect）,然后选tint将调暗作为背光面的地球，如图14所示。
图14
15.在第40帧点右键，在弹出的菜单中选插入关键帧（insert keyframe)，按shift键在第40帧用鼠标将“地图”拖到如图15所示的位置。
图15
16.双击“背光面地球”层第1到40帧之间，在出现的对话框中选择渐变（tweening）标签，从tweening的下拉框中选移动(motion)，最后点确定。
17.在“圆形1”层状态栏上点右键，在弹出的菜单中选遮罩（mask)，这样后面橙色地球只能显示在“圆形”范围内，将这层锁定。同样在“圆形2”层状态栏上点右键，在弹出的菜单中选遮罩（mask)，这样后面“背光面地球”也只能显示在“圆形2”范围内，将这层锁定。最后出现如图16所示的效果。
图16
18.点增加图层（add layer）在最上建一层命名为“前景”，从图标库（library）中把“前景”拖至工作区域，调整其位置将显示出的地球盖住，如图17所示。
图17
步骤二、制作放射状的星空背景：
1.点选菜单栏中插入>添加组件（insert>new symbol）在出现的对话框中选图像（graphic）命名为"宇宙",用笔刷工具（paintbrush）在工作区域点画出白色的星星，如图18所示。
图18
2.点选菜单栏中插入>添加组件（insert>new symbol），在出现的对话框中选电影片段（movie clip)， 命名为"星空"，从图标库（library）中把“宇宙”拖至工作区，用缩放工具将图形缩小10倍以上，在第30帧插入关键帧，将“宇宙”图形拖大填满整个工作区，双击第1帧，弹出帧属性（frame properties）对话框，选择渐变（tweening）中的移动(motion),产生星空由小变大的电影片段，打开描图纸外框（onion skin outlines)，可以看出变化轨迹，如图19所示。
图19
3.点选菜单栏中选择插入>添加组件（insert>new symbol），在出现的对话框中选电影片段（movie clip) 命名为"宇风"，从图标库（library）中把电影片段“星空”拖至工作区域，在第1帧点右键选复制帧（copy frame)，增加一层layer2，在第6帧点右键，在弹出的菜单中选粘贴帧（paste frame)，如图20所示。
图20
4.同样的建立layer3、layer4、layer5层，然后分别在第12帧、18帧、24帧将“星空”复制过来。为了产生更好的效果，可将“星空”旋转一定角度。用鼠标点layer5层的第24帧，再按ctrl键，将第24帧拖至第30帧（也即是复制），用同样的方法分别将layer4的第18帧，layer3的第12帧、layer2第6帧、layer1第1帧复制第30帧，这样就产生了星空不断的呈放射状运动，如图21所示。
图21
5.双击layer5层的第30帧，在弹出的对话框中选动作标签(actions),点从菜单中选跳至（go to),在右边的frame选项中加入18，即动画首先从第1帧播放至第30帧，然后在第18与第30帧之间循环，星空背景制作完毕，如图22所示。
图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所示。
图23
2.在工作区域将线段颜色（line color)的填充边框调整为空，用矩形工具画一个有渐变效果的细长条，如图24所示。
图24星光线
3.点选菜单栏中插入>添加组件（insert>new symbol..），在出现的对话框中选图像（graphic），命名为“星光”，从图标库（library）中把"星光线" 拖到工作区域，作为水平线，再拖一"星光线"，从菜单中选择修改>变形>缩放并旋转(modify>transform>scale and rotate),在出现的对话框中将scale的数值填为110，rotate填入90，"星光线"将会延长并旋转了90度，如图25所示。
图25 缩短并旋转星光线
4.分别从从图标中拖两根"星光线"，用同样的方法将scale填为60，rotate分别填入45、135，调整好各线的位置，最后形成由四根线组成的放射状星光，如图26所示。
图26
5.点选菜单栏中插入>添加组件（insert>new symbol..），在出现的对话框中选图像（graphic），命名为“复合光晕”，从图标库（library）中把"星光" 拖到工作区域，将此层命名为“星光”。
6.新增一层取名为“园环”，用点选椭圆(oval[o])，点选工具栏中的填充颜色工具（fill color），弹出调色板，选调色板正上方的小方形按钮，出现颜色（color）调节器对话框，选固定(solid),在彩色指示器中将颜色调节为咖啡色r 255 g 100 b 100，透明度（alpha)30%,如图27所示。
图27
7.关闭颜色对话框，将填充颜色工具（fill color）选为空，线段粗细（line thickness)选2.0,在工作区域以“星光”为中心画一圆环,如图28所示。
图28
8.新增一层取名为“闪亮”，现在制作耀眼的光效，点选椭圆(oval[o])，点选工具栏中的填充颜色工具（fill color）弹出调色板，选调色板正上方的小方形按钮，出现颜色（color）调节器对话框，选渐层(gradint),在彩色指示器中设置两种关键色，将左指示器的颜色调节为白色，右指示器的颜色为黄色：r 250 g 200 b 60，透明度（alpha)0%,按图29的位置拖放好指示器的位置，关闭对话框。
图29
9.将线段颜色（line color)选为空，填充颜色工具（fill color）选为填充色，用椭圆工具在工作区以“星光”为园心画一有闪亮效果的光晕，完成“复合光晕”的制作，如图30所示。
图30
步骤四、制作所需显示的网站标题
我们从菜单栏中选择插入>添加组件（insert>new symbol..），在出现的对话框中选选图像（graphic），然后分别建立图像：“宇”，“风”，“多媒体”，“工作室”，如图31所示。
图31
步骤五、合成动画：
1.从菜单中选择修改>影片(modify>movie)，弹出对话框，因为我们做的是站标,在网页中占的面积不能太大,所以在这修小电影尺寸,如图32所示。
图32
2.从图标库（library）中把电影片段"星空" 拖到工作区域，调整大小,并将这层命令为“星星”，如图33所示。
图33
3.在“星星”层上面新建一层，改名为“地球”：
从图标库（library）中把电影片段“地球” 拖到工作区域，调整位置和大小，如图34所示。
图34
4.在“地球”层第10帧插入关键帧，再选中第1帧，在工作区双击“地球”，在弹出的对话框中选color fffect标签，在下拉框中选，透明(alpha)，改小数值，给“地球”做个淡入效果，如图35所示。
图35
5.在第1至10帧之间双击，在弹出的对话框中选渐变（tweening)标签，在下拉框中选移动（motion),将会产生“地球”逐渐由暗变明的动画效果。
6.接着在第25帧插入关键帧，选中这一帧，在工作区将“地球”缩小并向左调整位置，如图36所示。
图36
7.在第10至25帧之间双击，在弹出的对话框中选渐变（tweening)标签，在下拉框中选移动（motion),将会产生“地球”向左移动并缩小的动画。
8.先在第40帧插入关键帧，然后在第55帧插入关键帧，选中第55帧，在工作区将“地球”缩小并移向左上角。在第40至55帧之间双击，在弹出的对话框中选渐变（tweening)标签，在下拉框中选移动（motion),将会产生“地球”向左上角运动并变小的动画，如图37所示。
图37
9.在“地球”层上增加一层，取名为“星光”：
在第10帧插入空帧，从图标库（library）中把图形“复合光晕” 拖到工作区右上角，调整位置和大小，如图38所示。
图38
10.接着在第25帧插入关键帧，选中这一帧，在工作区将“复合光晕”放大并向左移动至“地球”同一位置，如图39所示。
图39
11.在第10至25帧之间双击，在弹出的对话框中选渐变（tweening)标签，在下拉框中选移动（motion),在rotate下拉框中选clockwise，times输入1，将会产生星光向左移的同时旋转并放大的效果，如图40所示。
图40
12.在第35帧插入关键帧，选中这一帧，在工作区将“复合光晕”放大三到五倍，在第25至35帧之间双击，按图41设置。
图41
13.在第38帧插入关键帧，在工作区将这帧“复合光晕”缩小（和第25帧大小相同）并适当右移，在第35至38帧之间双击，按图40设置关键帧动画，结果见图42。
图42
14.最后在第60帧插入关键帧，在工作区将这帧“复合光晕”拖到右边舞台外，将它缩小，然后在第38至60帧之间双击，按图41设置关键帧动画，星光动画就做完了，如图43所示。
图43
15.在“星光”层上增加一“宇”层：
在第25帧插入空帧，从图标库（library）中把“宇”字 拖到工作区，中心与“地球”重合，将它放大，如图44所示。
图44
16.在第30帧插入关键帧，将“宇”缩小，再把第25帧“宇”的alpha改为0，在第25至30帧之间双击，在弹出的对话框中选渐变（tweening)标签，在下拉框中选移动（motion),将会产生“宇”由大到小的闪现效果，如图45如示。
图45
17.在第35帧插入关键帧，在工作区将“宇”向左移动（为“风”让位），并将alpha改为30，双击第30至35帧之间，在弹出的对话框中选渐变（tweening)标签，在下拉框中选移动（motion),如图46所示。
图46
18.先在第40帧插入关键帧。然后在第45帧插入关键帧，在工作区将“宇”纵向拉长，在第40至45帧之间双击，在弹出的对话框中选渐变（tweening)标签，在下拉框中选移动（motion),如图47所示。
图47
19.在第60帧插入关键帧，在工作区将“宇”纵向拉短，双击第45至60帧之间，在弹出的对话框中选渐变（tweening)标签，在下拉框中选移动（motion),如图48所示。
图48
20.按shift键选中第45帧至60帧，点右键，从弹出的菜单中选copy frames，再新增三层，分别在第48，50，52帧paste frames，结果会产生重影效果，如图49所示。
图49
21.本动画总长为60帧，因此我们需要清除多余的部分，可先按ctrl键，再用鼠标点在多余的关键帧上往左拖，如图50所示。
图50
现在按f12就可打开浏览器预览动画。这里说明一下，如果你对已做好电影的尺寸不满意，可在网页编辑器（dreamweaver及frontpage都行）中将预览的生成的html文件（与flash电影同名，保存在同样的目录中，以htm为后缀）打开，再将电影拖大或拖小。
