1、数字媒体数字媒体技术技术应用应用设计设计第第1010章章 矢量动画与互动媒体应用矢量动画与互动媒体应用 第10章 矢量动画与互动媒体应用 1第第1010章章 大纲大纲u10.1 Flash的基本概念 u 基于时间的编著工具 u Flash的功能与特征 u Flash编著环境 u10.2 Flash动画编辑 u 帧动画 u 运动动画 u 形变动画 u10.3 音、视频的集成 u 音频的控制 u 视频控制 u10.4 互动的实现 u 动作的概念 u 按钮的制作 u 为影片添加动作 u 脚本语言应用 u u练习10 Flash动画制作与创意第10章 矢量动画与互动媒体应用 210.1 Flash的基
2、本概念1 基于时间的编著工具 编程与编著 编著软件的分类 （1）基于页面（Script-based） 如: Dreamweare，FrontPage （2）基于图标（Icon-based） 如: Authorware （3）基于时间（Timeline-based） 如: Director, Flash第10章 矢量动画与互动媒体应用 310.1 Flash的基本概念2Flash的功能与特点 矢量动画与流式播放 适合网络播放和应用 多种媒体的集成 * 图形图像： bmp、jpg、gif，矢量图al等； * 动画：swf、gif等； * 音视频：mp3、wav、avi、mpg、mov等。 强大的互
3、动功能 ActionScript: 一种面向对象的编程语言 第10章 矢量动画与互动媒体应用 410.1 Flash的基本概念3 Flash编著环境 时间轴上的帧 空间上层的关系 动画舞台 属性面板 库面板 第10章 矢量动画与互动媒体应用 510.1 Flash的基本概念在舞台上编辑生成一个元件 在舞台上编辑一个场景 4 Flash动画的构成元素 对象: 可编辑素材的最小单位, 与图像编辑中的概念类似. 场景: 类似影视中的镜头,一个动画文件中可包含多个场景. 元件: 可是重复使用的对象,记录在元件库中. 元件类型: 图形（Graphic） 影片剪辑（Movie Clip） 按钮（Butto
4、n） 实例: 元件在动画中的一次应用. Flash中编辑状态的控制:在多个场景中选其中一个进行编辑选一个元件作为场景中的实例 第10章 矢量动画与互动媒体应用 610.1 Flash的基本概念4 Flash动画的构成元素 对象: 可编辑素材的最小单位, 与图像编辑中的概念类似. 场景: 类似影视中的镜头,一个动画文件中可包含多个场景. 元件: 可是重复使用的对象,记录在元件库中. 元件类型: 图形（Graphic） 影片剪辑（Movie Clip） 按钮（Button） 实例: 元件在动画中的一次应用. 动作:用户的互动操作,由ActionScript语言来实现编辑对象的属性: * 选中舞台中
5、某一对象， * 通过属性面板调整该对象的参数 第10章 矢量动画与互动媒体应用 710.1 Flash的基本概念 5 动画的艺术特征与表现 案例观摩与分析: Europe & Italy 造型的夸张与抽象性 如: 意大利和欧盟人的造型 幻想与运动节奏 如: 左顾右盼焦急的等车人第10章 矢量动画与互动媒体应用 810.1 Flash的基本概念5 动画的艺术特征与表现通过案例分析动画构成元素 基本元件： 动画角色造型 复杂的元件： 逐帧动画制作的运动镜头 情节段落与场景: 动画故事与段落 : (a) 片名及动画角色交待 (b) 若干小故事段落 (c) 结论及片尾字幕 第10章 矢量动画与互动媒体
6、应用 910.2 Flash动画编辑 1 帧动画 传统动画方式 时间线上帧的表示:u 案例10-1 “数字媒体”笔画 (打开Flash,按教材步骤操作)第10章 矢量动画与互动媒体应用 1010.2 Flash动画编辑2 运动动画 基本步骤： * 建立一个元件，其包含运动对象。 * 创建首帧，把运动对象从库中拖动到舞台 * 插入尾帧，并调整其运动对象，可以使色彩、尺寸、位置等发生变化。 * 选中首尾帧之间任一帧，点鼠标右键选“创建补间动画”产生中间帧。 * 选中任一中间帧，打开属性面板，可调整运动的各种属性，如旋转，运动速度等. 案例10-2 色彩变幻 案例10-3 闪烁动画 (打开Flash
7、原文件, 按教材步骤操作)第10章 矢量动画与互动媒体应用 1110.2 Flash动画编辑2 运动动画 案例10-4 对象的移动 (打开原文件, 按步骤操作)选1个实例,自动设为第1帧一共4个实例,各占一层插入各层的最后关键帧各层(实例)的运动起始位置及运动设置4个实例在屏幕上的起始位置第10章 矢量动画与互动媒体应用 1210.2 Flash动画编辑2 运动动画 案例10-6 运动轨迹设置 (打开Flash, 按步骤操作)拖动1个元件成为实例 bubble点击创建bubble的引导层同理创建结束关键帧,并将实例拖动到运动轨迹的结束端.将实例拖动到运动轨迹的一端在第一帧上绘制运动轨迹第10章
8、 矢量动画与互动媒体应用 1310.2 Flash动画编辑3 形变动画 Europe & Italy 中的变形动画与帧动画的比较帧动画：预先绘制每一帧帧动画：预先绘制每一帧变形动画：中间帧由电脑自动生成变形动画：中间帧由电脑自动生成第10章 矢量动画与互动媒体应用 1410.2 Flash动画编辑3 形变动画 案例: 将圣诞帽变成一张笑脸(打开并运行”圣诞帽.fla”,观察效果)将库元件“圣诞帽”拖动到舞台，成为第一帧 第30帧处创建关键帧,绘制一张笑脸 选帧对象,执行菜单“修改/分离”命令2次，将图形分离打散 第10章 矢量动画与互动媒体应用 1510.2 Flash动画编辑4 形变动画 案
9、例: 变形(将圣诞帽变成一张笑脸 )起始关键帧上的一点”j” 编辑变形的对应点:变形后对应生成结束帧上的一点”j”, 其他点也一 一对应第10章 矢量动画与互动媒体应用 163 音、视频的集成 案例: 动画帽影音合成 播放并观摩 ”圣诞帽.swf” “圣诞帽”位于”运动” 层,从第一帧开始运动音效层,音效从第一帧开始已创建的库元件当前编辑对象的属性当前对象(音效)的属性参数调整场景舞台上第一帧的实例”圣诞帽”圣诞帽运动一段时间后,开始变形成”笑脸”第10章 矢量动画与互动媒体应用 1710.4 互动的实现互动的实现1 动作的概念 flash动画播放过程中需要执行的一个交互动作 动作必须附属于舞
10、台上某个按钮、影片剪辑或者时间线上的某一帧才能起作用 动作面板: 用来选择、拖拽、整理和删除动作动作工具动作代码动作参数第10章 矢量动画与互动媒体应用 1810.4 互动的实现互动的实现案例10-10: 按钮的制作 (打开原文件,按步骤操作) 按钮是一种具有特殊时间线的元件按钮动作对应的固定关键帧第一帧按钮图形第二帧鼠标移动”Play”变色第3帧鼠标点击出音效案例10-11: 按钮的动作 (打开原文件,按步骤操作) 用按钮控制播放第10章 矢量动画与互动媒体应用 1910.4 互动的实现互动的实现5 脚本语言应用 案例10-14 校园互动导游 互动结构示意:场景1场景2场景3场景2场景8场景
11、9场景10地图放大/缩小/还原第10章 矢量动画与互动媒体应用 2010.4 互动的实现互动的实现5 脚本语言应用 案例10-14 校园互动导游 * 互动结构示意:* 以场景2为主界面 (打开原文件)实景按钮触动下级场景的播放地图放大/缩小按钮第10章 矢量动画与互动媒体应用 21练习10 Flash动画制作与创意 内容内容1 Flash的绘图工具练习的绘图工具练习.2 简单运动动画的制作。简单运动动画的制作。3. 为动画增加交互功能，制作按钮控制影片的播放为动画增加交互功能，制作按钮控制影片的播放. 4Flash动画创意动画创意 自定主题，制作一个自定主题，制作一个Flash节目，鼓励运用多种媒体节目，鼓励运用多种媒体. 动画创意要求动画创意要求(1) 最终的最终的swf文件，有与内容相匹配的字幕、配音（乐）和文件，有与内容相匹配的字幕、配音（乐）和声音效果声音效果(2) 工程文件工程文件fla，列举主要素材文件，并且说明其来源，列举主要素材文件，并且说明其来源.(3) 前述创意相符的内容主题和脚本大纲前述创意相符的内容主题和脚本大纲(4) 总结自己在练习过程中所遇到的困难和解决的途径。总结自己在练习过程中所遇到的困难和解决的途径。第10章 矢量动画与互动媒体应用 22谢谢参与谢谢参与
