（参考）《互动媒体设计》教案

1、教 案2013 2014 学年第 1学期课 程 名 称互动媒体设计 系(院、部)艺术学院教研室(实验室)艺术设计授 课 班 级设计111,设计112，艺媒111主 讲 教 师张青荣职 称 副教授使 用 教 材 无淮海工学院教务处制二一三 年九月 教 案（首页）课 程名 称 互动媒体设计总计： 32 学时课 程类 别 基础选修课学分2讲课： 16 学时分析讨论课: 3 学时大作业及设计：16学时任 课教 师张青荣职称：副教授授课对 象专业班级：设计111,设计112 艺媒111 共3个班基要本参教考材资和料主教材：无主要参考书：1、flash mx实例与操作万茂山等（著）北京希望电子出版社。2、

2、朱健强，网络广告语言，厦门大学出版社教和学要目求的教学目的:互动媒体设计是艺术设计专业的一门专业基础选修课程。通过对互动媒体作品的艺术创作方法进行深入讲解,使学生对互动媒体的艺术创作与应用有较全面的了解,掌握互动媒体艺术创作设计的流程,培养学生应用计算机软件进行互动媒体艺术作品基本创作设计的能力，为后续的专业设计服务。教学要求:1、 掌握互动媒体设计创作的基本原理与方法；2、 掌握软件Flash的基本使用方法；3、 独立完成一段互动网站的整理；教及学难重点点教学重点:互动媒体设计分类和特点、互动媒体的设计与创作方法、Flash的动画编辑技巧、互动媒体设计实践。教学难点:互动媒体的设计与创作方法

3、、Flash的动画编辑技巧、互动媒体设计实践。互动媒体设计 课程教案课次1授课方式（请打）理论课 讨论课 实验课 习题课 其他课时安排4授课题目（教学章、节或主题）：第一章、互动媒体设计概论；第二章、互动媒体设计基础软件认识.教学目的、要求：了解互动媒体设计的基本概念；熟悉互动媒体设计的分类与设计方法；掌握互动媒体设计基础软件Flash的基本操作方法。教学重点及难点：互动媒体设计的设计方法、Flash的基本操作方法（教学重点）Flash的基本操作方法（教学难点）教 学 基 本 内 容方法及手段一、互动媒体设计概论：什么叫媒体？所谓媒体，是指传播信息的介质，通俗的说就是宣传平台，能为信息的传播提

4、供平台的就可以称为媒体了，至于媒体的内容，应该根据国家现行的有关政策，结合广告市场的实际需求不断更新，确保其可行性、适宜性和有效性。此前，传统的四大媒体分别为:1、电视；2、广播；3、报纸；4、网站；此外，还应有户外媒体，如路牌灯箱的广告位等。就其目前适宜性来讲，媒体应按其形式划分为平面、电波、网络三大类，即：1、平面媒体：主要包括印刷类、非印刷类、光电类等。2、电波媒体：主要包括广播、电视广告（字幕、标版、影视）等。3、网络媒体：主要包括网络索引、平面、动画、论坛等。举例讲解、多媒体讲解、案例播放讲解；使用板书及投影仪等。什么叫多媒体？多媒体：它集合文字、图形、图像、动画、视频、录像、声音、

5、音乐等 传统表现媒体的优点，结合了计算机的交互功能，开发者针对客户及项目 需求通过精心的策划创意构思，结合各种表现方式，运用计算机对相关素材 进行编程集成，使其成为一有机的整体什么叫互动媒体？互动媒体来自英文Multimedia , multi是指多重的，media即媒体，指我们用来表达信息的载体与形式。多媒体从字面上解释是多种媒体（文字、图像、动画、视频、声音、音乐）集合的意思。互动媒体设计专业软件简介二、Flash 概述：l Flash的诞生与发展l Flash的应用领域 l Flash的特性 l Flash 界面简介 l Flash 整理流程 l 导入外部文件 Flash的基本操作图形基

6、本绘制方法与简单动画的基本操作。作业、讨论题、思考题：1. 讨论思考互动媒体设计的特点是什么? 2. 温习Flash的基本操作；3. 上网查询互动媒体设计的有关资料。课后小结：互动媒体设计 课程教案课次2授课方式（请打）理论课 讨论课 实验课 习题课 其他课时安排4授课题目（教学章、节或主题）：第三章 Flash中帧的运用教学目的、要求：了解帧的基本概念与类型；熟悉逐帧动画的整理方法；掌握形状补间动画的基本操作方法。教学重点及难点：逐帧动画、形状补间动画的基本操作方法（教学重点）逐帧动画、形状补间动画的基本操作方法（教学难点）教 学 基 本 内 容方法及手段一、帧的基本概念与类型：电影就是把很

7、多画面串在一条塑料胶片上，每个画面称为一帧。Flash中帧是创建动画的基础，不同的帧代表着不同的时刻。Flash的帧类型：1关键帧。以实心圆表示，代表这个帧中含有对象。2普通帧。普通帧中的对象永远和离它最近的关键帧中的对象保持一致。3空白关键帧。以空心圆表示，代表这个关键帧中没有任何对象，在空白关键帧中加入对象即可变成关键帧。4一般空白帧。代表空白区域中没有任何对象。5运动渐变帧。以底色为浅蓝色的箭头符号表示，代表这个区域存在运动补间动画。 6形状渐变帧。以底色为浅绿色的箭头符号表示，代表这个区域存在形状补间动画。7错误渐变帧。以虚线表示，代表这个区域存在错误的补间动画。8加入帧标签的帧，标签

8、类型为名称。9加入帧标签的帧，标签类型为注释。10加入帧标签的帧，标签类型为锚记。11加入音乐的帧。12加入脚本语言的帧。举例讲解、多媒体讲解、案例示范等。二、逐帧动画的整理方法三、形状补间动画的整理方法 Flash提供了两种创建动画的方式，分别为逐帧动画与补间动画，其中补间动画又可以分为形状渐变动画与运动渐变动画两种，用户可以轻易的使对象在场景中来回的运动，在运动的过程中还可以伴随有诸如放大、缩小、旋转、变色以及淡入淡出等丰富效果 。l 教师做逐帧动画与形状补间动画的教学示范。作业、讨论题、思考题： 课堂与课后进行逐帧动画与形状补间动画实践练习。课后小结：互动媒体设计 课程教案课次3授课方式

9、（请打）理论课 讨论课 实验课 习题课 其他课时安排4授课题目（教学章、节或主题）：第四章 Flash中影片剪辑的运用第五章 Flash中的引导层与遮罩层动画教学目的、要求：了解元件、实例与库的基本概念与类型；理解元件、实例与库的使用方法；了解Flash中影片剪辑的基本概念与类型；熟悉Flash中影片剪辑动画的整理方法；掌握Flash中的引导层与遮罩层动画动画的基本操作方法。教学重点及难点：Flash中影片剪辑动画的基本操作方法、Flash中的引导层与遮罩层动画动画的基本操作方法（教学重点）Flash中的引导层与遮罩层动画的基本操作方法（教学难点）教 学 基 本 内 容方法及手段第四章 Fla

10、sh中影片剪辑的运用1、元件的基本概念与类型：在Flash中，常常需要重复使用一些元素，用户可以将这些元素装入元件中，需要时再调用，避免无谓操作，并可以大大减少文件大小，提高播放速度。元件也被称作符号或图符，是Flash动画的重要组成部分，元件的主要特性是可以被重复利用，且不会影响影片的大小。 Flash中包括三种元件类型，分别为图形元件、影片剪辑元件与按钮元件，每一种元件都具有独特的属性 。Flash中的所有元件都被归纳在库面板中，可以被随时调用，十分方便。即使在场景中将所有元件全部删除，也不会影响库面板中的元件。2、元件、实例与库的使用方法：l 不同类型元件的创建与属性修改方法。 l 实例

11、的属性设置方法：影片中的实例可以根据需要改变其原有的元件类型，3种元件类型之间可以随意互换。实例类型的改变仅限于所选的实例，不会影响到库面板中元件的类型。l 库的使用当库项目繁多时可以利用库文件夹对其进行分类整理，库面板中可以同时包含多个文件夹，但不允许文件夹使用相同的名字。举例讲解、多媒体讲解、案例示范等。3、Flash中影片剪辑的特点及创建方法4、Flash中影片剪辑的编辑与修改方法5、Flash中影片剪辑所塑造的动画特效案例分析第五章 Flash中的引导层与遮罩层动画1、Flash中引导层的认识及路径动画的整理创建引导层动画：普通引导层可以理解为除标尺、网格等辅助工具以外的另一种辅助制图

12、手段，例如在引导层上绘制图形，然后将普通图层上的对象与引导层中的图形对齐，或者在引导层中绘制一个网页的框架，接着在普通图层中整理网页内容。引导层除了起到引导的作用以外，同时具备普通图层中的任何属性，也就是说，在普通图层上能执行的操作在引导层上同样可以，它们之间唯一的区别是在引导层上绘制的图形与线条为引导线，在播放影片时，不会被显示出来。l 创建普通引导层 l 创建运动引导层 l 同时引导多个图层2、Flash中的遮罩层的认识及遮罩动画的整理创建遮罩层动画：遮罩在flash中有着广泛的应用，可以做出很多意想不到的效果。遮罩层的实现需要通过两个以上的图层，建立遮罩与被遮罩的关系，也就是说，遮罩层不

13、仅可以与一个普通图层之间建立遮罩关系，也可以同时与多个普通图层之间建立遮罩关系 。 l 遮罩层的原理：理解遮罩层的原理关键要记住两条：第一，遮罩层本身是不会被看见的。不管画出什么图形，简单或复杂，只要它被用作遮罩层，在播放时就不会显示出来，也就是说，不用管它是什么颜色，遮罩层只要求图形的形状，在遮罩层中，图形的填充颜色，或是位图里的图形都会被忽略，得到的遮罩范围只是这个图形的剪影。第二，遮罩层中的对象覆盖的部分，就是建立遮罩关系后显示的部分。另外，线条不可以被用来整理遮罩层，要应用线条，必须要将它转换为填充色。将多个图层应用于同一个遮罩层时，只需将这个图层拖拽置遮罩层之下，即可与遮罩层之间建立

14、了遮罩和被遮罩的关系。 教师做引导层与遮罩层动画的教学示范。举例讲解、多媒体讲解、案例示范等。作业、讨论题、思考题： 课堂与课后做影片剪辑、引导层与遮罩层动画实践练习。课后小结：互动媒体设计 课程教案课次4授课方式（请打）理论课 讨论课 实验课 习题课 其他课时安排4授课题目（教学章、节或主题）：按钮元件的整理及动作指令教学目的、要求：进一步理解元件、实例与库的使用方法；熟悉按钮元件的整理及动作指令的使用方法；认识动作指令的基本概念；掌握按钮元件的整理及动作指令的操作方法。教学重点及难点：按钮元件的整理及动作指令的操作方法（教学重点）按钮元件的整理及动作指令的操作方法（教学难点）教 学 基 本

15、 内 容方法及手段一、按钮元件的整理：通过绘制与鼠标事件相对应的对象，按钮元件主要用于创建响应鼠标事件的交互式按钮。鼠标事件包括鼠标触及与单击两种。将绘制的图形转换为按钮元件，在播放影片时，当鼠标靠近图形时，光标就会变成小手状态，为按钮元件添加脚本语言，即可实现影片的控制 。 二、动作指令的操作：交互式动画就是允许观众对影片进行控制，而达到某种目的的动画。交互式动画在动画与观众之间形成一种互动，使观众可以参与到动画中来。例如前面介绍的按钮元件的整理，它可以通过鼠标的移入或移出整理出不同的响应效果。而除了简单的响应效果以外，还可以通过为按钮编写脚本语言，使按钮具有控制影片的播放或者链接到指定的网

16、页中去的功能。 这是传统动画所不具备的，在Flash中却能轻松实现 。所有脚本语言的编写均在动作面板中完成，执行“窗口”“开发面板”“动作”命令或直接按F9快捷键，即可打开动作面板。举例讲解、多媒体讲解、案例示范等。动作面板共有三个窗口组成，左上角为动作工具栏，以树状结构显示Flash支持的所有脚本语言。左下角为信息工具栏，显示当前的选择，也就是要附加脚本语言的对象和已经附加脚本语言的对象的信息。右边为脚本编辑区，编辑与显示脚本语言的窗口。l 交互式动画原理：交互式动画是由触发动作的事件、事件的目标和触发事件的动作3个因素组成的，例如单击按钮后，影片开始播放这一事件。其中，单击是触发动作的事件

17、，按钮是事件的目标，影片开始播放是触发事件的动作。换句话说，事件、目标和动作构成了一个交互式动画。 在Flash中，事件包括鼠标事件、键盘事件和帧事件三种。目标包括时间轴、按钮元件和影片剪辑元件三种。而动作就是指控制影片的一系列脚本语言，所以说脚本语言的编写也就是各种动作的编写 。在编写脚本语言时，既可以通过直接在脚本编辑区中输入字符进行编写，又可以通过在动作工具栏中选择项目进行编写。单击动作工具栏中的项目文件夹，可展开或收缩文件夹。在展开的项目文件夹中包含多个脚本项目，通过双击进行选择。此外，还可以通过添加动作按钮，将新项目添加到脚本中。 时间轴控制中包括了几种最常用的动作，用于控制影片或影

18、片剪辑元件中的时间轴。理解这些语言的意义，掌握它们的编写与操作，可以轻松实现交互式影片中最为常见的效果。实例如控制影片的播放，停止和重新播放等。时间轴控制命令位于全局函数的子文件夹中。三、教师做按钮元件的整理及动作指令的操作的教学示范。举例讲解、多媒体讲解、案例示范等。作业、讨论题、思考题： 做按钮元件的整理及动作指令实践操作练习。课后小结：互动媒体设计 课程教案课次5授课方式（请打）理论课 讨论课 实验课 习题课 其他课时安排4授课题目（教学章、节或主题）：导入声音及其它媒体；多场景动画；影片的测试、优化、发布与导出教学目的、要求：了解声音及其它媒体的导入程序；熟悉多场景动画的链接设置方法；

19、掌握影片的测试、优化、发布与导出方法。教学重点及难点：导入声音及其它媒体的操作方法（教学重点）多场景动画的链接设置方法（教学难点）教 学 基 本 内 容方法及手段一、声音的导入：声音是的影片的重要组成部分，有声影片会使动画更加生动自然，给人身临其境之感。 在Flash中，既可以为整部影片添加声音，也可以单独为影片中的某个元件添加声音 。 在一部影片中，同一个声音文件可以被反复利用。用户还可以自行设定声音与影片的同步方式。而Flash在声音资源的使用上也有着其它软件无法媲美的高压缩率，所以整理的影片极为轻巧，便于流传。可以导入影片的声音格式有：WAV、MP3和 AIFF（仅限苹果机）格式。 以上

20、格式中，最常用的为WAV格式，它既可以应用于PC机，又可以应用于苹果机 。l 声音导入的程序：1.新建文档，执行“文件”“导入”“导入到库”命令，弹出“导入到库”的对话框，在文件类型中选择WAV声音格式，接着选中要导入的声音文件，单击“确定”按钮。 2.返回场景编辑模式，按下Ctrl+L快捷键打开库面板，在库面板中可以看到刚刚选择的声音文件。 声音不但可以应用于整部影片中，还可以应用于某个元件中，和元件的原理相同，声音可以被反复利用及整理各种声音效果，均以库面板中声音为基础 。 二、其它媒体的导入与声音的导入方法相似；举例讲解、多媒体讲解、案例示范等三、多场景动画链接。1、为每一个场景最后一帧

21、设置停止动作语言关键帧；2、在每一个场景添加好相应的链接按钮；3、为每一个链接按钮正确添加动作语言。* 注意：输入动作语言是全角与半角输入法的精准切换！四、影片的测试、优化、发布与导出：1. 可以在两种环境下测试影片，一种为影片编辑环境，另一种为影片测试环境。在影片编辑环境下，按Enter键可以对影片进行简单的测试，但影片中的影片剪辑元件、按钮元件以及脚本语言也就是影片的交互式效果均不能得到测试。要在影片编辑环境下测试简单的帧动作（play、stop、gotoplay和gotoandstop），需要执行“控制”“启用简单帧动作”命令 。2. 优化影片的最终目的是减少文件的大小，确保它的播放流畅

22、。因为无论影片如何出色，如果在播放的过程中发生多次间断，都会影响它的效果。所以对影片进行必要的优化是影片整理的最后步骤，下面将讲述如何对影片的各种对象进行优化以及优化的一些技巧 。3. 可以将Flash影片发布成多种格式，而在发布之前需进行必要的发布设置，定义发布的格式以及相应的设置，达到最佳效果。在“发布设置”对话框中，可以一次性发布多个格式，且每种格式均保存为指定的发布设置，可以拥有不同的名字。4. 导出影片不像发布那样可以对影片的各方面进行设置，它可以把当前影片全部导出为Flash支持的格式。而影片的导出分为两种，分别是导出图片与导出影片。五、教师做声音及其它媒体导入、多场景动画链接设置

23、、影片的测试、优化与导出教学示范。举例讲解、多媒体讲解、案例示范等。作业、讨论题、思考题： 做声音及其它媒体导入、多场景动画设置及影片的测试、优化与导出实践操作练习。课后小结：互动煤体设计 课程教案课次6授课方式（请打）理论课 讨论课 实验课 习题课 其他课时安排4授课题目（教学章、节或主题）：第八章 Flash互动媒体设计综合作业实践训练一教学目的、要求：通过互动媒体设计综合作业实践训练，进一步了解互动媒体作品整理的程序，熟悉互动媒体作品整理的原理与方法，掌握互动媒体作品整理的方法与技巧。教学重点及难点：互动媒体综合作品的艺术设计与整理技巧的现实运用（教学重点）互动媒体综合作品的整理技巧的现实作品运用（教学难点）教 学 基 本 内 容方法及手段一、 理论知识与关键操作技巧知识的复习二、互动媒体综合作业的艺术设计与计算机整理的实践训练（一）学生进行互动媒体综合作品的前期设计整理实践练习，教师随堂指导。实践教学作业、讨论题、思考题