网页设计实用教程使用Flash制作网页动画.pptx

《网页设计实用教程使用Flash制作网页动画.pptx》由会员分享，可在线阅读，更多相关《网页设计实用教程使用Flash制作网页动画.pptx（12页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、会计学1网页设计实用教程使用网页设计实用教程使用Flash制作网页动制作网页动画画13.1Flash CS4 基础13.1.113.1.1、FlashFlash概述概述1 1StageStage（舞台）（舞台）2 2TimelineTimeline（时间轴）（时间轴）3 3FrameFrame（帧）（帧）4 4Key FrameKey Frame（关键帧）（关键帧）5 5SceneScene（场景）（场景）6 6LayerLayer（图层）（图层）7 7SymbolSymbol（符号）（符号）在学习使用在学习使用FlashFlash制作动画之前，有必要先了解其相关基本概念制作动画之前，有必要先

2、了解其相关基本概念:第1页/共12页13.1.213.1.2、Flash CS4Flash CS4概述概述 Flash CS4 Flash CS4是是AdobeAdobe公司于公司于20082008年年8 8月推出的网页动画设计软月推出的网页动画设计软件，件，Flash CS4Flash CS4作为最新的作为最新的FlashFlash版本，在其早期版本的基础上版本，在其早期版本的基础上新增了许多功能，运用新增了许多功能，运用Flash CS4Flash CS4能制作出更加绚丽、交互性能制作出更加绚丽、交互性更强的动画效果。下面简单介绍一下更强的动画效果。下面简单介绍一下Flash CS4Fla

3、sh CS4新增的一些特新增的一些特点及功能。点及功能。1 1新颖独特及友好的界面风格新颖独特及友好的界面风格 2 2Flash CS4Flash CS4的新功能的新功能 3 3其他扩展组件其他扩展组件图图:开始菜单中与开始菜单中与Flash CS4Flash CS4配套的配套的8 8个组件个组件第2页/共12页13.1.313.1.3、使用、使用FlashFlash制作动画的过程制作动画的过程 Flash Flash动画的制作需要经过很多环节的处理，每个环节都相动画的制作需要经过很多环节的处理，每个环节都相当重要。如果处理或制作不好，会直接影响到动画的效果。当重要。如果处理或制作不好，会直接

4、影响到动画的效果。下面介绍制作动画的步骤，只有对创作动画的流程有一个清下面介绍制作动画的步骤，只有对创作动画的流程有一个清楚的了解，用户才能灵活熟练地制作动画。楚的了解，用户才能灵活熟练地制作动画。一般来说，一般来说，FlashFlash动画制作的过程可分为六步：动画制作的过程可分为六步：（1 1）首先应确定动画剧本及分镜头脚本）首先应确定动画剧本及分镜头脚本;（2 2）设计不同的动画人物形象，一般由具有一定美术功底的动）设计不同的动画人物形象，一般由具有一定美术功底的动画设计人员设计画设计人员设计;（3 3）绘制、编排出分镜头画面脚本）绘制、编排出分镜头画面脚本;（4 4）动画绘制人员进行具

5、体的动画绘制）动画绘制人员进行具体的动画绘制;（5 5）将相关动画导入到）将相关动画导入到flashflash中，进行后期制作中，进行后期制作;（6 6）剪辑配音。）剪辑配音。第3页/共12页13.2.113.2.1、绘制基本图形、绘制基本图形13.213.2案例剖析：制作一张圣诞贺卡案例剖析：制作一张圣诞贺卡 内容再丰富生动的动画也是由若干个基本图形组合而成的。内容再丰富生动的动画也是由若干个基本图形组合而成的。设计动画时，首先要规划一下本贺卡的大致模型，确定动设计动画时，首先要规划一下本贺卡的大致模型，确定动画剧本内容，并分析涉及到哪些基本的图形。本贺卡主要画剧本内容，并分析涉及到哪些基本

6、的图形。本贺卡主要有跳动的红心图案和一棵圣诞树组成，涉及到的基本图形有跳动的红心图案和一棵圣诞树组成，涉及到的基本图形有圆、三角形、矩形等。有圆、三角形、矩形等。13.2.213.2.2、编辑图形对象、编辑图形对象（1 1）在）在“工具栏工具栏”中单击中单击“选择选择”工具按钮，然后移动鼠标，工具按钮，然后移动鼠标，框选两个圆，按住组合键框选两个圆，按住组合键“Ctrl+B”Ctrl+B”将圆做打散操作，接将圆做打散操作，接下来选择中间相交的两段圆弧，按下来选择中间相交的两段圆弧，按“Delete”Delete”键将其删除键将其删除得到红心圆的大致轮廓得到红心圆的大致轮廓 。（2 2）在）在“

7、工具箱工具箱”中单击中单击“部分选取部分选取”工具按钮，然后用鼠工具按钮，然后用鼠标单击图像，则图形将显示多个锚点标单击图像，则图形将显示多个锚点 ，选择下侧中心的锚，选择下侧中心的锚点，并向下拖动，然后选择其相邻的左锚点并按点，并向下拖动，然后选择其相邻的左锚点并按“delete”delete”键，按同样的方法删除其相邻的右锚点，得到键，按同样的方法删除其相邻的右锚点，得到了一个红心的雏形了一个红心的雏形 第4页/共12页（3 3）在）在“工具箱工具箱”中选择中选择“颜料桶颜料桶”工具，按工具，按“Shift+F9”Shift+F9”组合组合键打开键打开“颜色颜色”面板，将面板，将“类型类型

8、”设置为设置为“RadialRadial（放射状）（放射状）”，在颜色条中设置两个颜色块，在颜色条中设置两个颜色块 （4 4）用鼠标单击颜色面板上的）用鼠标单击颜色面板上的“颜料桶颜料桶”按钮，在弹出颜料面板按钮，在弹出颜料面板中选择面板底部处的红色渐进颜色，然后用鼠标左键单击中选择面板底部处的红色渐进颜色，然后用鼠标左键单击“心心”图中央，即可看到红色的图中央，即可看到红色的“心心”图了图了 13.2.313.2.3、输入文字、输入文字 在在Flash CS4Flash CS4中创建文本，在中创建文本，在“工具箱工具箱”中选择中选择“文本文本”工具，按工具，按“Ctrl+F3”Ctrl+F3

9、”组合键打开组合键打开“属性属性”面板，在属性面面板，在属性面板中可对文本样式进行个性化设置，如设置文本类型、字板中可对文本样式进行个性化设置，如设置文本类型、字体、字号、字体颜色等。体、字号、字体颜色等。13.2.413.2.4、逐帧动画、逐帧动画 逐帧动画是一种常见的动画形式，其原理是在连续的关键帧中逐帧动画是一种常见的动画形式，其原理是在连续的关键帧中绘制不同的动画动作，然后连续播放形成动画，该方法主要用绘制不同的动画动作，然后连续播放形成动画，该方法主要用于创建不规则的运动动画，它的每一帧都是关键帧，可通过逐于创建不规则的运动动画，它的每一帧都是关键帧，可通过逐帧动画的形式让圣诞贺卡上

10、的帧动画的形式让圣诞贺卡上的“红心红心”跳动起来。跳动起来。第5页/共12页13.2.513.2.5、形状补间动画、形状补间动画 所谓形状补间动画，就是由一个对象变成另一个对象，而所谓形状补间动画，就是由一个对象变成另一个对象，而该过程只需要用户提供两个分别包含有变形前和变形后对象该过程只需要用户提供两个分别包含有变形前和变形后对象的关键帧，中间过程由的关键帧，中间过程由FlashFlash自动完成。在本典型案例中，自动完成。在本典型案例中，可通过形状补间的动画方式，在圣诞贺卡中添加夜空中的可通过形状补间的动画方式，在圣诞贺卡中添加夜空中的“繁星繁星”闪烁的效果。闪烁的效果。13.2.613.

11、2.6、动作补间动画、动作补间动画 动作补间动画与形状补间动画类似，二者主要不同的是：前动作补间动画与形状补间动画类似，二者主要不同的是：前者构成的动画元素是元件，而后者则是图形，至于什么是元件，者构成的动画元素是元件，而后者则是图形，至于什么是元件，将在下一节中介绍。在本实例中将利用动作补间动画的原理，将在下一节中介绍。在本实例中将利用动作补间动画的原理，在圣诞卡中添加一张不断变化的笑脸。在圣诞卡中添加一张不断变化的笑脸。第6页/共12页在在Flash CS4Flash CS4中遮罩就是通过遮罩图层中的图形或者文字等对象，中遮罩就是通过遮罩图层中的图形或者文字等对象，透出下面图层中的内容。打

12、个比方，遮罩层就像一张纸，在透出下面图层中的内容。打个比方，遮罩层就像一张纸，在这张纸上挖一个洞，当洞下面的物体经过洞口时，就产生了这张纸上挖一个洞，当洞下面的物体经过洞口时，就产生了一个小动画。一个小动画。13.2.713.2.7、引导动画、引导动画将一个或多个层连接到一个运动引导层，使一个或多个对象沿将一个或多个层连接到一个运动引导层，使一个或多个对象沿同一条路径运动的动画形式称为同一条路径运动的动画形式称为“引导动画引导动画”，这种动画可，这种动画可以使一个或多个元件完成曲线或不规则运动。这里的引导层以使一个或多个元件完成曲线或不规则运动。这里的引导层是用来指示路径的，所以是用来指示路径

13、的，所以“引导层引导层”中的内容可以是钢笔、中的内容可以是钢笔、铅笔、线条、椭圆、矩形或画笔工具等绘制出的线段，而被铅笔、线条、椭圆、矩形或画笔工具等绘制出的线段，而被引导层中的对象是跟着引导线走的，可以使用影片剪辑、图引导层中的对象是跟着引导线走的，可以使用影片剪辑、图形元件、按钮和文字等，但不能使用形状。形元件、按钮和文字等，但不能使用形状。第7页/共12页13.313.3FlashFlash中多媒体元素的使用中多媒体元素的使用 在上一节所举的实例中反复用到了元件，可见元件在在上一节所举的实例中反复用到了元件，可见元件在Flash Flash CS4CS4的应用中非常广泛，也是非常重要的，

14、通过元件的制的应用中非常广泛，也是非常重要的，通过元件的制作并存入到作并存入到“库库”面板中，从而起到重复使用的作用，以面板中，从而起到重复使用的作用，以提高动画制作的效率。根据元件的作用不同，可将其分为提高动画制作的效率。根据元件的作用不同，可将其分为图形元件、影片剪辑元件和按钮元件。图形元件、影片剪辑元件和按钮元件。Flash CS4Flash CS4除了制作除了制作动画外，对声音和视频的支持也相当出色，动画外，对声音和视频的支持也相当出色，Flash CS4Flash CS4能提能提供多种使用声音的方法，还支持多种视频格式，能制作出供多种使用声音的方法，还支持多种视频格式，能制作出令人满

15、意的作品。令人满意的作品。13.3.113.3.1、创建库元件、创建库元件1 1新建库元件新建库元件2 2导入库元件导入库元件13.3.213.3.2、创建库元件、创建库元件“按钮按钮”是是FlashFlash的基本元件之一，它具有多种形态，并且会响应的基本元件之一，它具有多种形态，并且会响应鼠标事件，执行指定的动作，是实现动画交互效果的关键对鼠标事件，执行指定的动作，是实现动画交互效果的关键对象。象。1 1按钮元件的组成按钮元件的组成2 2制作按钮元件的过程制作按钮元件的过程第8页/共12页13.3.313.3.3、在动画中使用声音、在动画中使用声音 在在Flash CS4Flash CS4

16、中可以导入多种格式的声音文件，其导入的中可以导入多种格式的声音文件，其导入的方法与导入图形图像类似，所导入的声音文件与位图、元方法与导入图形图像类似，所导入的声音文件与位图、元件等一同保存在件等一同保存在“库库”面板中。面板中。13.3.413.3.4、使用视频、使用视频在在Flash CS4Flash CS4中，用户可导入视频剪辑到动画中，此时所选视中，用户可导入视频剪辑到动画中，此时所选视频文件将成为动画文档的元件，而插入到文档中的内容则频文件将成为动画文档的元件，而插入到文档中的内容则成为了该元件的实例，与成为了该元件的实例，与Flash CS3Flash CS3相比，相比，CS4CS4

17、导入视频文导入视频文件的步骤更为简单，操作非常方便。件的步骤更为简单，操作非常方便。第9页/共12页13.413.4习题习题一、选择题一、选择题1 1、Flash CS4Flash CS4是哪家公司最新开发的动画设计软件（是哪家公司最新开发的动画设计软件（）。）。A A）微软公司）微软公司B B）AdobeAdobe公司公司 C C）MacromediaMacromedia公司公司 2 2、在工具箱中，下面的哪一工具不属于线条工具（、在工具箱中，下面的哪一工具不属于线条工具（）？）？A A）“钢笔钢笔”工具工具 B B）“铅笔铅笔”工具工具 C C）“刷子刷子”工具工具 3 3、要对图形进行从

18、中心向四周的填充，应选择哪种类型的填、要对图形进行从中心向四周的填充，应选择哪种类型的填充（充（）？）？A A）线性）线性 B B）放射状）放射状 C C）位）位图图 4 4、在、在FlashFlash的时间轴面板中，创建关键帧的快捷键是（的时间轴面板中，创建关键帧的快捷键是（）？）？A A）F1 F1 B B）F5 F5 C C）F3 F3 D D）F6F65 5、一般默认的动画速度是（、一般默认的动画速度是（）？）？A A）12fps 12fps B B）24fps 24fps C C）30fps 30fps 第10页/共12页二、简答二、简答1 1、在、在Flash CS4Flash C

19、S4中有哪几种元件类型？中有哪几种元件类型？2 2、在、在FlashFlash文档中，元件库的作用是什么？文档中，元件库的作用是什么？3 3、在、在Flash CS4Flash CS4中，图层可以分为哪几种？它们各自的作用是什么中，图层可以分为哪几种？它们各自的作用是什么？4 4、将图形转换为元件的目的是什么？这样做有哪些优点？、将图形转换为元件的目的是什么？这样做有哪些优点？5 5、按钮元件有哪四种状态？、按钮元件有哪四种状态？三、上机实践三、上机实践1 1、制作一个由字母、制作一个由字母“S”S”变为字母变为字母“A”A”的形状补间动画。的形状补间动画。2 2、制作一个在舞台中间向上向下拉开的遮罩动画。、制作一个在舞台中间向上向下拉开的遮罩动画。3 3、制作一文字闪烁效果，要求文字的边缘颜色不断变化，以形成、制作一文字闪烁效果，要求文字的边缘颜色不断变化，以形成闪光效果。提示在对文字进行处理前要将其打散，然后才能对闪光效果。提示在对文字进行处理前要将其打散，然后才能对文字颜色进行处理。文字颜色进行处理。第11页/共12页