4.2 小雨沙沙ppt课件.pptx

《4.2 小雨沙沙ppt课件.pptx》由会员分享，可在线阅读，更多相关《4.2 小雨沙沙ppt课件.pptx（36页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、4.2 小雨沙沙Flash CC 基础与案例教程Flash CC 基础与案例教程第 3 页Flash CC 基础与案例教程海上灯塔一小雨沙沙二竹林听风三Flash CC 基础与案例教程第 4 页第二部分Flash CC 基础与案例教程Flash CC 基础与案例教程第 5 页1.基础知识 （4.2.1 知技准备(1).补间动画与传统补间动画有哪些区别？ 补间动画和传统补间的区别是在Flash CS4才出现的，传统补间动画的顺序是，先在时间轴上的不同时间点定好关键帧，之后在关键帧之间选择传统补间，这个动画是最简单的点对点平移，如果要制作曲线运动轨迹需要通过路径引导层实现。Flash CC 基础与

2、案例教程第 6 页 传统补间动画是定头、定尾做动画，至少要有两个关键帧，而补间动画则是制作好元件后，不需要在时间轴的其他地方创建关键帧。直接在图层上选择补间动画，图层变成蓝色之后，在时间轴上选择你需要加关键帧的地方，直接拖动元件就自动形成一个补间动画了。补间动画的路径是可以直接显示在舞台上，并且是有调动手柄可以调整的。在Flash CS5中创建补间动画则是定头、做动画(开始帧选中对应帧改变对象位置)。相比较而言，使用传统补间动画较多，它更容易控制和加载。4.2.1 知技准备Flash CC 基础与案例教程第 7 页4.2.1 知技准备2.如何在Flash中实现位图的矢量化？ 矢量图容量小，放大

3、无失真，具有无可比拟的优点，很多软件都可以把位图转换为矢量图，在Flash 中位图转换为矢量图主要有三种方法。（1）打散：打散后的位图不再是真正意义上的位图，而变成了矢量图，只不过这个矢量图由成千上万的小色块组成，在显示上与一般的矢量图有所区别。（2）位图填充：在绘制图形时，除了填充颜色，还可以使用位图进行填充，虽然未进行打散，但填入某图形中的位图已经自动“矢量化”了。（3）位图矢量化：位图矢量化是将位图通过一定的方法和规则转换成矢量图形，尽管矢量图形在色彩层次的描述上比位图失真，看起来单调一些，但是却有许多位图所不能拥有的优点，例如放大后不失真，边缘光滑清晰等。 Flash CC 基础与案例

4、教程第 8 页4.2.1 知技准备 执行“修改”菜单下“位图”级联菜单中的“位图转化为矢量图”命令，在弹出的对话框中可以设置转化参数，其中“颜色阈值”和“最小区域”设置得越低，“角阈值”和“曲线拟合”设置得越加紧密（像素选项）、越多转角（平滑选项），得到的图形文件会越大，转换出的画面也越精细。 在制作动画过程中，除非必要不建议进行位图矢量化，原因是如果按照最精细设置进行矢量化，假设有十万个像素，将有十万条矢量描述语句，将会大大增加计算机运行负担，而且位图矢量化后那些极细小的矢量路径根本无法编辑。对于节点复杂的矢量图，按下快捷键“Ctrl+Alt+Shift+C”进行优化，可以大幅降低图片容量。

5、Flash CC 基础与案例教程第 9 页2.、基本操作4.2.1 知技准备 1.矩形工具矩形工具组包括矩形工具、基本矩形工具，快捷键为英文字母R，要在二者之间进行切换，按下Shift键。椭圆工具组包括椭圆工具、基本椭圆工具，快捷键为英文字母O，要在二者之间进行切换，快捷键为Ctrl+O。此外，还有多角星形工具用来绘制形状。 矩形工具用于绘制矩形，按住Shift键可以绘制正方形，按住Alt键绘制可以以鼠标所在位置为中心点进行绘制。选择形状，在属性面板中可以各项参数。如图1-1-3所示。Flash CC 基础与案例教程第 10 页4.2.1 知技准备（1）位置和大小 X和Y坐标值用于精确设置图形

6、所在的位置，宽度和高度值用于精确设置形状大小，点击链接图标，可以锁定或者解锁图形的长宽比例。（2）填充和笔触 铅笔图标用于设置形状的轮廓颜色，颜料桶图标用于设置形状的填充颜色。“笔触”一栏用于设置线条轮廓的粗细，可以拖动滑块设置，也可以直接输入数值。“样式”一栏用于设置线条轮廓的形状，包括“实线”、“虚线”、“点状线”、“锯齿线”、“点刻线”、“斑马线”等。如图4-2-1所示。图4-2-1矩形工具属性面板Flash CC 基础与案例教程第 11 页4.2.1 知技准备2.基本矩形工具 用于绘制矩形或者圆角矩形，在属性面板中“矩形选项”可以设置四个角的倒角数量，也可以通过拖拽四个角节点的方式修改

7、倒角大小。如图4-2-2所示。图4-2-2倒角设置Flash CC 基础与案例教程第 12 页4.2.1 知技准备图4-2-3倒角设置3.椭圆工具 用于绘制椭圆，按住Shift键可以绘制正圆，按住Alt键绘制可以以鼠标所在位置为中心点进行绘制。属性面板参数设置与矩形工具类似。 单击属性面板中“矩形选项”参数设置下方的链接图标，可以锁定或者解锁四个角的参数。如图4-2-3所示。Flash CC 基础与案例教程第 13 页4.2.1 知技准备4.基本椭圆工具 用于绘制椭圆形或者不规则的圆形。在属性面板中可以设置“开始角度”、“结束角度”、“内径”等参数，也可以通过拖拽节点的方式来修改形状，如图4-

8、2-4所示。图4-2-4基本椭圆工具Flash CC 基础与案例教程第 14 页4.2.1 知技准备图4-2-5多角星形工具设置（1）样式：用于设置绘制多边形还是星形。（2）边数：用于设置多边形的边数或者星形的角数。（3）星形顶点大小：用于设置星形顶点的大小，数值越大，顶点角度越大。5.多角星形工具 用于绘制多边形和星形，通过设置属性面板中工具设置栏的选项参数来绘制图形，如图4-2-5所示。Flash CC 基础与案例教程第 15 页4.2.1 知技准备图4-2-6任意变形工具6.任意变形工具任意变形工具用来缩放或旋转图形，快捷键为英文字母Q，使用任意变形工具选中某个对象后，对象四周会出现黑色

9、框和调节手柄。如图4-2-6所示。Flash CC 基础与案例教程第 16 页4.2.1 知技准备（1）任意调整图形大小将鼠标放到图形边上拖拽即可以进行调整图形的大小。（2）等比例缩放图形在调整图形的时候，将鼠标的指针放到四个顶点的手柄上，拖动鼠标的同时按住Shift即可实现等比缩放图形，也可以按住Alt+Shift实现不同的缩放方式。（3）对称缩放图形所谓的对称缩放图形就是以水平或是竖直方向进行缩放的对称缩放，如果想要在水平方向进行缩放那么就将鼠标放到图形的左侧或是右侧，同时按住Alt键进行缩放即可。Flash CC 基础与案例教程第 17 页4.2.1 知技准备（4）旋转图形将鼠标放到图形

10、的角上就会出现旋转图形的提示，这时就可以进行旋转了。更改图形的中心点还可以进行其他形式的旋转，所有的旋转都是以中心点为中心的，所以更改中心点的位置就可以更改旋转的方式竖直方向对称缩放的方法一样。（5）自由变形选择控制点后按住Ctrl键进行拖动即可对图形进行自由变形，可以随意更改图形的形状和大小。全选图形，选择一个控制点进行拖动，同时按下Ctrl+Shift键，可以制作透视效果。如图4-2-7所示。图4-2-7自由变形Flash CC 基础与案例教程第 18 页案例分析 使用Flash软件，运用补间动画技能，设计并制作动画“那时烟雨”，动画效果为：天色将晚雨漫天，游人渔者皆不见，如图4-2-8所

11、示。图4-2-8 小雨沙沙Flash CC 基础与案例教程第 19 页案例分析 在具体技术层面，运用补间动画技巧，制作单个雨丝运动的动画，然后制作小雨点落入水中荡起圈圈涟漪的动画，同时制作水花溅起的动画。在舞台上复制出多个单个下雨动画，将所有实例分为前层和后层，前层雨丝大而且密，后层雨丝小而且稀，通过设置各实例不同的起始帧数和透明度，营造逼真的下雨效果。Flash CC 基础与案例教程第 20 页案例分析【知识技能点】补间动画；动画补间动画；元件。【训练目标】1.理解补间动画与传统补间动画的区别。2.能够熟练创建和编辑动画补间动画。3.通过画面设计和动画制作，审美能力得到进一步提升，沟通能力、

12、制定方案和解决问题的能力进一步加强。Flash CC 基础与案例教程第 21 页制作过程一、制作背景1.根据动画设计思想，使用Photoshop软件制作素材图片。2.新建Flash文档，大小为550PX*400PX，背景颜色为深蓝色。3.图层1重命名为“背景”，按下快捷键Ctrl+R打开导入命令对话框，选择村落背景图片，调整位置使之完全覆盖舞台，如图4-2-9所示。图4-2-9设置背景图片 Flash CC 基础与案例教程第 22 页制作过程二、制作雨滴动画1.按下快捷键Ctrl+F8建立新元件，命名为“下雨”，元件类型选择“影片剪辑”。2.图层1命名为“雨丝”，绘制一根白色斜线为雨丝，为线条

13、填充白色渐渐透明的效果，在第20帧按下F6，创建第1帧到第20帧的补间动画，选中第20帧，将雨丝移动到左边斜下方。 Flash CC 基础与案例教程第 23 页制作过程3.建按下快捷键Ctrl+F8建立新元件，命名为“水圈”，绘制一个白色的圆环作为水圈，填充渐变色使之具有半透明效果，将水圈调整为合适的大小，如图4-2-10所示。图4-2-10绘制水圈 Flash CC 基础与案例教程第 24 页制作过程4.制作水圈由小到大，再由大到无的补间动画，第1帧设置如图4-2-11所示，第10帧设置如图4-2-12所示，第20帧设置如图4-2-13所示。图4-2-11水圈动画第1帧图4-2-12水圈动画

14、第10帧图4-2-13水圈动画第20帧Flash CC 基础与案例教程第 25 页5.打开库面板，双击“下雨”打开该元件，新建图层命名为“水圈”在第20帧按下F6，从库中拖动“水圈”元件至场景中，参照落下的雨丝调整至合适的位置，并在第40帧按下F5，如图4-2-14所示。图4-2-14布置水圈元件制作过程Flash CC 基础与案例教程第 26 页6.新建图层命名“水花”，绘制水花，填充渐变色使之具有半透明效果，按下快捷键F8转换为元件，命名为“水花”，元件类型选择“影片剪辑”，如图4-2-15所示。图4-2-15绘制水花制作过程Flash CC 基础与案例教程第 27 页图4-2-16水花动

15、画第1帧图4-2-17水花动画第10帧制作过程7.分别在第10帧按下F6，第20帧按下F6，移动并变形水花，创建补间动画，第1帧、10帧、20帧画面效果如图4-2-16、4-2-17、4-2-18所示。图4-2-18水花动画第20帧Flash CC 基础与案例教程第 28 页8.打开库面板，双击“下雨”打开该元件，新建图层命名为“水花”在第20帧按下F6，从库中拖动“水花”元件至场景中，参照落下的雨丝和漾起的水花调整至合适的位置，右侧的水花通过变形面板沿竖直方向镜像即可，如图4-2-19所示。图4-2-19布置花水制作过程Flash CC 基础与案例教程第 29 页制作过程三、制作小雨动画1.

16、返回场景，新建图层命名为“后层雨”，打开库，拖动“下雨”元件至场景中，复制多个，调整好大小和位置，按下Ctrl+Enter键观察动画效果，可以看到一批雨丝同时落下，同时溅起水花，然后又一批雨丝整齐划一落下，整个动画呆板并且不能够连续下雨，如图4-2-20、4-2-21所示。图4-2-20雨丝动画效果图4-2-21水圈水花动画效果Flash CC 基础与案例教程第 30 页制作过程2.打开属性面板，分别调整下雨图形元件各个实例“第一帧”起始数值，并调整Alpha值设置透明度，以获取小雨错落有致、随机落下的效果，如图4-2-22所示。图4-2-22设置属性Flash CC 基础与案例教程第 31

17、页制作过程图4-2-23时间轴设置4.按下快捷键Ctrl+Alt+Enter预览并微调动画。3.新建图层命名为“前层雨”，同理，复制多个下雨元件实例，调整属性值，前层雨靠近视线，因而整体偏大并且紧密，后层雨远离视线，因而整体偏小并且稀疏，如图4-2-23所示。Flash CC 基础与案例教程第 32 页能力拓展Flash软件的属性面板是随着当前选定内容而变化的，巧用补间动画帧属性面板，可以制作各种动画效果，方便快捷。通过属性面板的“旋转”选项，可以制作时钟、风车转动等各种效果，如图4-2-24所示。图4-2-24光阴似箭Flash CC 基础与案例教程第 33 页能力拓展图4-2-25绘制时钟

18、图形元件1.新建Flash文档，按下快捷键Ctrl+F8新建图形元件命名为“时钟”，绘制除时针和分针之外的时钟画面，如图4-2-25所示。Flash CC 基础与案例教程第 34 页能力拓展2.回到场景，图层1命名为“时钟”，从库中将“时钟”图形元件拖到场景中，在第120帧按下快捷键F5创建普通帧，延长画面停留时间。3.新建图层命名为“时针”，绘制时针，转化为图形元件，调整好位置使之与时钟对应，使用任意变形工具修改元件的注册点使之位于针柄中心，如图4-2-26所示。图4-2-26修改注册点Flash CC 基础与案例教程第 35 页能力拓展4.在第120帧按下快捷键F6创建关键帧，创建第1帧到120帧传统补间动画，选中补间动画任意一帧，属性面板设置顺时针旋转1次。5.同理，制作分针动画，设置分针顺时针旋转12圈。Flash CC 基础与案例教程