网页制作电子讲稿

Size: px

Start display at page:

Download "网页制作电子讲稿"

培罐奚
7 years ago
Views:

1 Flash 动画制作清华大学计算机系基础教学部 2007 年 4 月

2 内容提要基本概念矢量图点阵图, 元件库实例, 帧和关键帧, 时间轴, 层, 组合与分离 Flash 基本绘图制作动作补间动画和形状补间动画制作引导层动画和遮罩动画声音的导入和制作影片剪辑 2

3 Flash 简介 Flash 是 Micromedia 公司推出的网页设计和网页动画制作软件 Flash 支持动画声音和交互, 具有强大的多媒体编辑功能, 使用 Flash 可以设计出引导时尚潮流的网站动画多媒体及互动影像 Flash 采用矢量技术, 生成的文件容量小, 适合网络传输 Flash 的播放插件很小, 很容易下载和安装通用性好, 在各浏览器中都是统一的样式在 Flash 中可以整合图形音乐视频等多媒体元素, 并可以实现用户与动画的交互和互联网紧密结合, 适合制作 Web 页和站点简单易学 3

4 Flash 工作界面工具箱时间轴舞台面板元件库 4

5 Flash 基本操作创建 Flash 文档执行文件 / 新建命令, 在新建文档对话框中选择 Flash 文档选项设置文档属性执行修改 / 文档命令, 在文档属性对话框中设置文档的大小背景色动画帧频率和标尺的单位 5

6 Flash 基本操作在 Flash 中导入对象执行文件 / 导入 / 导入到舞台命令, 可以导入外部的图像声音视频等文件保存文档执行文件 / 保存命令, 在另存为对话框中设置要保存文件的名称路径 Flash 源文件的后缀是.fla 6

7 Flash 基本操作输出动画执行文件 / 导出 / 导出影片命令, 可以把作品输出成.swf 格式的动画文件 7

8 计算机图形图像处理技术数字化图像数据在计算机中一般有两种存储方式 : 位图模式和矢量图模式这两种方式的最大区别在于记录的形式位图模式采用点阵方式来记录, 从图像左上角第一个点开始, 到右下角最后一个点结束, 记录所有像素的颜色值该存储模式比较适合于内容复杂的图像和真实的照片, 但图像在放大和缩小的过程中会失真, 占用磁盘空间也较大矢量图模式是存储图像内容的轮廓部分例如, 一个圆形图案只要存储圆心的坐标位置和半径长度, 以及圆形边线和内部的颜色优点是图像的缩放不会引起图像失真, 图像的存储空间比位图方式要少得多, 而且便于修改 8

9 位图图像位图图像由像素组成, 每个像素都被分配一个特定位置和颜色值数码相机拍摄的照片扫描仪扫描的稿件以及绝大多数的图片都属于点阵图位图图像与分辨率有关, 即在一定面积的图像上包含有固定数量的像素因此, 如果在屏幕上以较大的倍数放大显示图像, 或以过低的分辨率打印, 位图图像会出现锯齿边缘 9

10 矢量图像矢量图形由称为矢量的数学对象定义的线条和曲线组成, 矢量根据图像的几何特性描绘图像矢量图形与分辨率无关矢量图形是表现标志图形的最佳选择 10

11 Flash 基本绘图绘制线条线条工具绘制各种类型线段 11

12 Flash 基本绘图绘制线条钢笔工具绘制精确的路径直线或曲线, 可调节直线的角度和长度, 修改曲线的弧度铅笔工具可随意绘制各种线条和形状, 有三种模式可供选择 12

13 Flash 基本绘图绘制图形椭圆工具绘制椭圆或圆笔触颜色填充颜色透明矩形工具绘制矩形或正方型多角星型工具绘制多边型或星型 13

14 Flash 基本绘图设置图形颜色墨水瓶工具填充或改变图形的轮廓线颜色颜料桶工具可以为图形填充颜色 14

15 Flash 基本绘图编辑图形任意变形工具用于移动旋转缩放和变形对象填充变形工具用于变换具有渐变填充的效果 15

16 Flash 基本绘图编辑图形选择工具用于选中对象和改变对象的边线部分选择工具用于修改图形大小形状和路径 16

17 对象的组合与分离对象的组合执行修改 / 组合命令, 可以将多个对象组合为一个整体, 对这个整体进行单独的编辑对象的分离执行修改 / 分离命令, 可以将整体的图形对象打散, 将打散的图作为一个可编辑的元素进行编辑 17

18 Flash 基本绘图新建文档绘制图形对象为图形对象填充渐变颜色复制图形对象图形对象的变形操作多个图形对象的组合操作保存文件 18

19 输入文字与编辑文字形状文本工具文本变形可使用任意变形工具使文本变形文本分离为普通图形修改 / 分离 (ctrl+b), 文本分离为独立文字, 再次分离, 成为普通图形 19

20 文字 - 例制作空心字制作阴影文字 A 文本添加轮廓线空心字符图形修改 / 形状 / 柔化填充边缘 20

21 元件元件是指在 Flash 中创建的, 可以在动画中反复使用的元素使用元件使得动画制作更为简单, 动画文件尺寸明显减小, 播放速度显著提高图形元件是可以反复取出使用的图片, 用于构建动画主时间轴上的内容, 一般是只含一帧的静止图片按钮元件是用于创建动画交互控制的按钮, 以响应鼠标事件影片剪辑元件是可以反复取出使用的一段小动画, 可独立于主动画播放 21

22 元件库实例一个 Flash 动画中创建的元件都存放在元件库中, 我们只要把元件库中的元件拖放到场景中, 就可以创建一个相应的实例元件库中的对象可在动画中多次重复使用 22

23 时间轴 Flash 采用时间轴的方式设计和安排每一个对象 ( 演员 ) 的出场顺序和表现方式它相当于电影导演使用的摄影表, 即在什么时间, 哪位演员上场说什么台词做什么动作动作演员场景 t 23

24 时间轴面板顶区 : 切换和场景名称用来在动画文件间切换编辑场景和编辑元件间切换图层区 : 每个图层都包含一些舞台中的动画元素, 上面层中的元素遮盖下面图层中的元素时间帧区 :Flash 影片将播放时间分解为帧, 用来设置动画运动的方式播放的顺序和时间等状态栏 : 指示所选帧编号当前帧频以及到当前帧为止的运动时间 24

25 帧与关键帧时间轴以帧 (Frame) 为单位, 生成的动画以每秒 n 帧 (fps) 的速度进行播放关键帧 (KeyFrame) 是指在动画表演过程中, 此关键帧的表演内容与先前的一些普通帧内容大不相同, 而呈现出关键性的动作或内容的变化 ( 只有关键帧中的内容才能够被选取和编辑 ) 25

26 图层图层 (Layer) 就是在画面上规划出的虚拟层级在这些不同的层级上放进各自的对象, 这些对象除非经由特殊设置, 否则不会互相产生影响上面图层的对象将挡住所有在它下面图层的对象 26

27 声音的导入导入声音执行文件 / 导入 / 导入到库命令, 把声音文件导入到库新建一个图层选中要添加声音的层, 选择声音开始的帧, 将声音直接从库窗口拖动到舞台上 ( 用户可以为声音创建任意多的层, 每个层所起的作用就好像声音通道, 在播放时, 所有层中的声音组合在一起 ) 数据流类型可控制声音与动画同步, 将声音分配到每个帧中, 与动画同时停止开始在其开始的关键帧显示时播放 27

28 声音的获取 Flash 编辑声音的功能较弱, 不能录音, 在实际应用中, 通常使用其他的软件获得和编辑声音, 然后再导入到 Flash 中为动画配音 Windows 附带的录音机 : 可实现用电脑的声卡录音和对声音进行简单编辑共享软件 GoldWave: 可实现用电脑的声卡录音截取 VCD CD 光碟中的声音声音剪辑制作各种特效音等 28

29 使用 Flash 制作动画动画是由一幅幅静止的图像, 按照一定的速度连续播放形成的画面 Flash 中可以制作三种动画 : 逐帧动画创建每帧动画的内容, 然后逐帧播放动作补间动画指同一个对象不同状态的变化, 其变化效果是由 Flash 控制的, 常用于制作对象的位移尺寸缩放旋转颜色渐变等效果形状补间动画指两个图形对象的变换, 其变化效果是由 Flash 控制的, 其动画效果是从一个图形转换为另一个图形 29

30 创建动作补间动画动作补间动画是在两个关键帧中创建出来的, 两个关键必须是同一个对象的两个不同状态, 通过动作补间将两个关键帧中不同状态的对象补间出来动作补间可以使实例组合或文本产生位移变形旋转颜色渐变, 是 Flash 中应用最广泛的动画 30

31 动作补间 - 文字动画 1 位置移动 Hay 层中的文字从舞台上方移动到舞台中间 ( 从第 1 帧到第 10 帧, 整个长度延长到第 15 帧 ) Look 层中的文字从舞台左边移动到舞台右边 ( 从第 5 帧开始至第 10 帧 - 第一次位移 ), 然后从舞台右边移到舞台中间 ( 从第 10 帧开始至第 15 帧 - 第二次位移 ) 31

32 动作补间 - 文字动画 1 1. 新建文件 : 尺寸 400*200, 背景色桔黄色 2. 在图层 1 上输入文字 Hay, 大小 54, 黑色 3. 把文字转换为元件, 调整文字位置至舞台左上方 4. 修改图层名称为 hay 5. 在 Hay 层中的第 10 帧插入关键帧, 将文字的位置移动到舞台中间 6. 选择 Hay 层中的第 1 帧, 创建动作补间动画, 把动画延长到 15 帧 7. 新建一个图层, 输入文字 LOOK!, 大小 54, 黑色采用上述方法创建 look 图层的动画 Look 层中的文字从舞台左边移动到舞台右边 ( 从第 5 帧开始至第 10 帧 - 第一次位移 ), 然后从舞台右边移到舞台中间 ( 从第 10 帧开始至第 15 帧 - 第二次位移 ) 32

33 透明和缩放效果动作补间 - 文字动画 2 第一层创建文字, 转换为库文件, 延长到 20 帧第二层在第 10 帧插入关键帧, 将库文件拖入, 第 20 帧插入关键帧, 把实例放大, 透明, 在第 10 帧创建补间动画 33

34 动作补间 - 文字动画 2 1. 新建文件 : 尺寸 300*100, 背景色白色 2. 在图层 1 上输入文字 Macromedia, 文字的风格是 Arial Black, 大小 30, 红色 3. 选取文字, 把文字转换为元件, 元件名称为 title 4. 新建图层, 在该层的第 10 帧上插入关键帧按 F11 键打开元件库面板, 从中选择 title 元件并将它拖到舞台上 4. 在该层的第 20 帧上插入关键帧, 将实例用自由变形工具拉大, 通过属性面板的颜色列表改变成透明色 ( 即 alpha=0) 5. 在该层的第 10 帧创建补间动画 6. 把图层 1 延长到 20 帧, 在第 10 帧上对齐两个层上实例的中心点 34

35 转和颜色变化动作补间 - 旋转风车旋制作风车外型, 转换为库文件第 30 帧 60 帧各插入一个关键帧第 30 帧改变颜色和缩小风车外观第 1 帧和 30 帧创建补间动画 35

36 动作补间 - 旋转风车 1. 制作风车外形 : 绘制一个无描边的黄色矩形利用空心鼠标工具把矩形的左下角删除, 左上角往下移用实心鼠标工具选取矩形进行组合操作选取组合后的矩形, 利用任意变形工具调整中心点到底端选择窗口 / 设计面板 / 变形命令, 弹出变形对话框, 在旋转文本框中输入 45 度, 单击该对话框右下角的拷贝并应用变形按钮就可完成风车外形的绘制 2. 将风车转化为库文件 3. 在第 30 帧和 60 帧各插入一个关键帧 4. 在第 30 帧改变风车的颜色为红色,60%, 缩小风车的大小 5. 在第 1 帧和第 30 帧创建补间动画, 旋转是顺时针 1 次 36

37 字分散到图层字变形,文图像文动作补间 - 文字变形 1. 新建 400*300 文档 2. 将图层 1 命名为背景 (1). 执行文件 / 导入 / 导入到舞台命令, 导入国画.jpg 37

38 动作补间 - 文字变形 (2). 在信息面板上调整导入图像的大小和舞台相同, 位置重合 3. 插入新图层, 默认为图层 2 (1) 使用文本工具输入花好月圆, 设置 64 号, 隶书, 红色 (2) 将文字放在右侧, 执行修改 / 分离命令, 将这四个字分离成单独的文字 (3) 将分离的文字全部选中, 执行修改 / 时间轴 / 分散到图层命令, 将四个字分散到四个图层 (4) 删除图层 2 38

39 动作补间 - 文字变形 4. 选择花文字, 转换为图形元件, 名称为花, 注册点在中心 5. 和 4 同样的方法, 把好月圆分别转换为图形元件 6. 选中花图层的第 15 帧, 按住 shift 键选圆图层的第 15 帧, 这样选中了四个文字图层的 15 帧, 插入关键帧 7. 在背景图层的第 15 帧处插入帧, 使背景延长到 15 帧 39

40 动作补间 - 文字变形 8. 将播放指针拖到第 1 帧, 选花图形元件实例, 水平翻转, 在变形面板上设置缩小为 20% 9. 用 8 同样的方法设置其它三个文字图层 10. 为四个文字图层创建补间动画 11. 选中好图层的所有帧, 拖动鼠标把起始帧拖到第 10 帧, 同样方法把月圆图层的起始帧拖到第 30 帧 12. 选择所有图层的第 60 帧, 插入帧. 13. 保存文件 40

41 动作补间 - 图像切换使用 alpha 通道制作图像淡入淡出的效果 41

42 动作补间 - 图像切换 1. 新建 400*300, 帧频 24 文档 2. 执行文件 / 导入 / 导入到舞台命令, 导入 image1.jpg 图像 (1) 把图层 1 命名为花朵 (2) 在信息面板上设置该图像的大小与位置与舞台完全重合 (3) 把图像转换为名为花朵的图形元件, 注册点在中心 3. 在花朵层上创建一个新图层, 命名为波纹 (1) 导入 image2.jpg 图像 42

43 动作补间 - 图像切换 (2) 在信息面板上设置该图像的大小与位置与舞台完全重合 (3) 把图像转换为名为波纹的图形元件, 注册点在中心 4. 分别在花朵和波纹图层的第 20 帧 81 帧 100 帧处插入关键帧 5. 选时间轴面板上第 1 帧, 锁定隐藏波纹图层 6. 选花朵元件实例 (1) 在属性面板上设置 alpha 为 0 (2) 选第 100 帧, 设置 alpha 为 0 (3) 分别选第 1 帧和第 81 帧, 创建补间动画 43

44 动作补间 - 图像切换 7. 在时间轴面板上解除波纹图层的锁定和隐藏, 将播放指针拖到第 1 帧 (1) 选波纹元件实例, 在属性面板上颜色下拉列表中选高级, 设置效果如图 (2) 将播放指针拖拽到第 100 帧, 选择波纹元件实例, 在属性面板上设置与第 1 帧相同 (3) 分别选择波纹图层的第 1 帧第 81 帧, 创建补间动画 (4) 选择波纹图层的第 1 帧与 100 帧之间的所有帧, 将其拖拽到第帧处 8. 保存文件 44

45 创建形状补间动画形状补间动画也是在两个关键帧中创建出来的, 但两个关键必须是两个不同图形对象, 通过形状补间可以将两个图形间的转换过程补间出来形状补间的对象只能是分离的可编辑图形, 形状补间使图形形状发生变化, 一个图形变成另一个图形要对组实例或位图图像应用形状补间, 必须首先将这些元素分离要对文本应用形状补间, 必须将文本分离 ( 文本串须分离两次 ) 45

46 形状补间动画 - 例 1. 在开始帧输入文本 1 2. 在结束帧输入文本 2 3. 把文本 1 和 2 打散 4. 在帧属性面板上创建补间形状动画 5. 设置形状补间动画分布式中间祯平滑, 但变形较大角形适合边角和直线较多的图形 46

47 添加变形参考点添加变形参考点可控制图形间对应部位的变形, 使得图形间的变换是有规律的选择补间形状序列中的第一个关键帧, 执行修改 / 形状 / 添加变形参考点命令 a b 起始形状提示会在该形状的某处显示一个带有字母 a 的红色圆圈, 将形状提示移动到要标记的点选择补间序列中的最后一个关键帧结束形状提示会在该形状的某处显示一个同样带有字母 a 的红色圆圈, 将形状提示移动到结束形状中与标记的第一点对应的点重复上面步骤, 可添加多个变形参考点 a b 47

48 制作运动引导线动画利用运动引导层绘制路径, 将某个图层链接到该运动引导层, 使得图层中包含的对象沿着所绘制的路径运动, 实现自由路径动画效果可以将多个图层链接到一个运动引导层, 使多个对象沿同一条路径运动起始帧定义路径起点结束帧定义路径终点 48

49 制作运动引导线动画单击要作引导线动画的图层, 单击添加引导层按钮在运动引导层上使用铅笔工具等绘制路径注意绘制时选中平滑图标, 将对象吸附在自由路径上在帧属性面板上创建补间动作动画 49

50 制作遮罩动画利用遮罩层, 可以做出聚光灯效果和流动效果遮罩层下面的内容就像透过一个窗口一样显示出来, 这个窗口的形状就是遮罩层上内容的形状遮罩层中的对象可以是填充的形状文字对象图形元件的实例或影片剪辑的实例可以将多个图层组织在一个遮罩层之下来创建复杂的效果 50

51 制作遮罩动画 1. 新建文档,400*200, 背景黑色 2. 第 1 层改名为文字, 使用文本工具, 输入文字, 颜色黄色 3. 创建第 2 个图层, 用椭圆工具画无边圆, 绿色,( 制作探照灯效果 ) (1). 把圆转换为图形库文件 (2). 第 10 帧和第 20 帧分别插入关键帧, 第 10 帧把圆移到右面, 第 20 帧把圆移回左面 (3) 在第 1 帧和第 10 帧分别创建补间动画 4. 把文字层延长到 20 帧 5. 在圆所在层设置为遮罩层 6. 添加背景层, 附属于遮罩层, 红色矩形, 并锁定该图层, 放到文字层下面 51

52 用按钮控制动画电影剪辑原件和图形原件只有一种显示状态, 而按钮原件有三种显示状态这 3 种状态并非缺一不可, 可以只绘制其中一种状态, 而它同样具有按钮的功能使用按钮控制火箭 : 1. 创建图形原件 : 火箭 2. 创建按钮原件 : 按钮 3. 将背景设为蓝色, 制作火箭从下到上的动作动画 4. 建立新图层 : 按扭层, 选择第 1 帧将按钮拖入 5. 使用文字工具在按钮上书写文字 6. 选择火箭动画层的第 1 帧, 打开动作控制面板, 输入 stop();, 意为在该帧火箭停止 7. 选择按钮层, 选中按钮, 打开动作控制面板, 输入 8. on (release){ gotoandplay(2) ;} 意为当鼠标单击该按钮并释放后, 从第 2 帧开始播放 52

53 用按钮控制动画 53

54 制作影片剪辑 1. 创建星星的图形元件 (1) 执行插入 / 新建元件命令, 创建名为星星的图形元件 (2) 在编辑元件窗口中制作星星图形, 回到场景中 2. 创建闪星影片剪辑 (1) 在编辑元件窗口中把星星图形元件拖到舞台上, (2) 插入两个关键帧, 在第 1 帧和最后 1 帧设置实例的 alpha=20%, 缩小, 作补间动画, 旋转 54

55 形状补间动画 - 例 1. 新建 400*320, 白色背景的文档 2. 命名图层 1 为背景 (1) 使用矩形工具画黄色 (#F9E457) 矩形, 大小和位置与舞台相同窗口 / 设计面板 / 信息 55

56 形状补间动画 - 例 (2) 在第 40 帧处插入帧, 延长动画到 40 帧 2. 在图层面板上选背景层, 插入一个新的图层, 命名为波浪 1 (1) 使用矩形工具和选择工具在舞台上方画土黄色 (#FFB546) 的图形 (2) 在 20 帧和 40 帧各添加一个关键帧 (4) 在 20 帧处使用选择工具修改图形形状 (5) 在第 1 帧和 20 帧分别创建形状补间动画第 1 帧第 20 帧 56

57 形状补间动画 - 例 3. 选中波浪 1 图层, 插入一个新图层, 命名为波浪 2 (1) 使用矩形工具和铅笔工具在舞台上方画一个橘黄色 (#FF7E28) 图形 (2) 在 20 帧和 40 帧各添加一个关键帧 (3) 在 20 帧处使用选择工具修改图形形状 (4) 在第 1 帧和 20 帧分别创建形状补间动画 4. 选中波浪 2 图层, 插入一个新图层, 命名为海星 (1) 执行文件 / 导入 / 导入到舞台命令, 导入 pic.wmf 文件 (2) 选中导入的图片, 在变形面板上设置其缩放比例为 36% 57

58 形状补间动画 - 例 (3) 选择调整后的图形, 转换为影片剪辑元件, 把注册点调整到中心 (4) 选择海星实例, 在属性面板上设置 alpha 值 40% (5) 延长动画到 40 帧 5. 选中海星图层, 插入一个新图层, 命名为卵石 (1) 使用椭圆工具和选择工具画淡紫色 (#996666) 和白色的两个椭圆, 调整形态 (2) 使用 (1) 的方法, 制作其他不同颜色和形态的卵石 (3) 延长动画到 40 帧 58

59 遮罩动画 - 水波 1. 新建文档,450* 导入凉亭.jpg 图像 (1) 在信息面板上设置图像的大小和位置与舞台完全重合 (2) 把图层 1 命名为背景 (3) 选择图像, 复制 (4) 将该图层锁定隐藏 59

60 遮罩动画 - 水波 3. 新建图层 2, 命名为剪裁的背景 (1) 执行编辑 / 粘贴到当前位置命令, 将复制的图像粘贴到剪裁的背景图层中, 并保持原来的位置 (2) 分离粘贴的图像 (3) 使用铅笔工具在舞台画一条线, 将水面与亭子分开 (4) 选择上半部分图像, 按 Delete 键删除 (5) 选择绘制的线条, 删除 (6) 选择下半部分图像, 按键盘上向下方向键两次, 使其向下位移 2 个像素 (7) 选择剪裁的背景层, 将其锁定 60

61 遮罩动画 - 水波 4. 新建图层 3, 命名为矩形遮罩 (1) 使用矩形工具在舞台上绘制细条间隔矩形 (2) 选择绘制好的矩形, 转换为图形元件, 名称为矩形, 注册点在中心 5. 把背景层和剪裁的背景层延长到 60 帧 6. 在矩形遮罩层的 30 帧和 60 帧创建关键帧, 30 帧处将矩形实例向上移动一段距离 7. 分别在矩形遮罩的第 1 帧和 31 帧创建补间动画 8. 把矩形遮罩图层转换为遮罩层 9. 保存文件 61

第6章

第6章第 6 章创建动画学习目标熟悉补间动画与逐帧动画掌握创建补间动作动画掌握创建补间形状动画掌握创建逐帧动画掌握编辑动画第 6 章创建动画 2 6.1 补间动画与逐帧动画 6.2 创建补间动作动画 6.3 创建补间形状动画 6.4 创建逐帧动画 6.5 编辑动画第 6 章创建动画 3 6.1 补间动画与逐帧动画动画是一个创建动作或其随时间变化的幻觉的过程在 Flash 中可以创建两种类型的动画,