《互动媒体设计》教案

教案

2013～2014学年第1学期

课程名称互动媒体设计

系(院、部)艺术学院

教研室(实验室)艺术设计

授课班级设计111,设计112，艺媒111

主讲教师

职称副教授

使用教材无

淮海工学院教务处制

二○一三年九月

教案（首页）

课程

互动媒体设计总计：32学时

名称

课程

基础选修课学分2讲课：16学时

类别

分析讨论课:3学时

任课

张青荣职称：副教授大作业及设计：16学时

教师

授课

专业班级：设计111,设计112艺媒111共3个班

对象

基要教材：无

本参主要参考书：

教考

1、《flashmx实例与操作》万茂山等（著）北京希望电子出版社。

材资

2、朱健强，《网络广告语言》，厦门大学出版社

和料

主

教学目的:

互动媒体设计是艺术设计专业的一门专业基础选修课程。通过对互动

媒体作品的艺术创作方法进行深入讲解,使学生对互动媒体的艺术创作与

应用有较全面的了解,掌握互动媒体艺术创作设计的流程,培养学生应用

计算机软件进行互动媒体艺术作品基本创作设计的能力，为后续的专业设

教和

学要计服务。

目求教学要求:

的

1、掌握互动媒体设计创作的基本原理与方法；

2、掌握软件Flash的基本使用方法；

3、独立完成一段互动网站的制作；

教学重点:

互动媒体设计分类和特点、互动媒体的设计与创作方法、Flash的动

画编辑技巧、互动媒体设计实践。

教学难点:

教及互动媒体的设计与创作方法、Flash的动画编辑技巧、互动媒体设计

学难实践。

重点

点

《互动媒体设计》课程教案

课次1

授课方式课时

理论课√讨论课□实验课√习题课□其他□4

（请打√）安排

授课题目（教学章、节或主题）：

第一章、互动媒体设计概论；

第二章、互动媒体设计基础软件认识.

教学目的、要求：

了解互动媒体设计的基本概念；熟悉互动媒体设计的分类与设计方法；掌握互

动媒体设计基础软件Flash的基本操作方法。

教学重点及难点：

互动媒体设计的设计方法、Flash的基本操作方法（教学重点）

Flash的基本操作方法（教学难点）

方法及

教学基本内容

手段

一、互动媒体设计概论：举例讲

解、多媒

什么叫媒体？

体讲解、

所谓媒体，是指传播信息的介质，通俗的说就是宣传平台，能为信息的传播

提供平台的就可以称为媒体了，至于媒体的内容，应该根据国家现行的有关政策，案例播放

结合广告市场的实际需求不断更新，确保其可行性、适宜性和有效性。此前，传

统的四大媒体分别为:讲解；

1、电视；

2、广播；

使用板

3、报纸；

4、网站；

书及投

此外，还应有户外媒体，如路牌灯箱的广告位等。

影仪等。

就其目前适宜性来讲，媒体应按其形式划分为平面、电波、网络三大类，即：

1、平面媒体：主要包括印刷类、非印刷类、光电类等。

2、电波媒体：主要包括广播、电视广告（字幕、标版、影视）等。

3、网络媒体：主要包括网络索引、平面、动画、论坛等。

什么叫多媒体？

多媒体：它集合文字、图形、图像、动画、视频、录像、声音、音乐等传统表

现媒体的优点，结合了计算机的交互功能，开发者针对客户及项目需求通过精心

的策划创意构思，结合各种表现方式，运用计算机对相关素材进行编程集成，使

其成为一有机的整体

什么叫互动媒体？

互动媒体来自英文Multimedia,multi是指多重的，media即媒体，指我们

用来表达信息的载体与形式。多媒体从字面上解释是多种媒体（文字、图像、动

画、视频、声音、音乐）集合的意思。

互动媒体设计专业软件简介

二、Flash概述：

Flash的诞生与发展

Flash的应用领域

Flash的特性

Flash界面简介

Flash制作流程

导入外部文件

Flash的基本操作

图形基本绘制方法与简单动画的基本操作。

作业、讨论题、思考题：

1.讨论思考互动媒体设计的特点是什么?

2.温习Flash的基本操作；

3.上网查询互动媒体设计的有关资料。

课后小结：

《互动媒体设计》课程教案

课次2

授课方式课时

理论课√讨论课□实验课√习题课□其他□4

（请打√）安排

授课题目（教学章、节或主题）：

第三章Flash中帧的运用

教学目的、要求：

了解帧的基本概念与类型；熟悉逐帧动画的制作方法；掌握形状补间动画的基

本操作方法。

教学重点及难点：

逐帧动画、形状补间动画的基本操作方法（教学重点）

逐帧动画、形状补间动画的基本操作方法（教学难点）

方法及手

教学基本内容

段

一、帧的基本概念与类型：

电影就是把很多画面串在一条塑料胶片上，每个画面称为一帧。

Flash中帧是创建动画的基础，不同的帧代表着不同的时刻。

Flash的帧类型：

1．关键帧。以实心圆表示，代表这个帧中含有对象。

2．普通帧。普通帧中的对象永远和离它最近的关键帧中的对象保

持一致。

3．空白关键帧。以空心圆表示，代表这个关键帧中没有任何对象，

在空白关键帧中加入对象即可变成关键帧。。举例讲解、

4．一般空白帧。代表空白区域中没有任何对象。多媒体讲

5．运动渐变帧。以底色为浅蓝色的箭头符号表示，代表这个区域解、案例示

存在运动补间动画。范等。

6．形状渐变帧。以底色为浅绿色的箭头符号表示，代表这个区

域存在形状补间动画。

7．错误渐变帧。以虚线表示，代表这个区域存在错误的补间动画。

8．加入帧标签的帧，标签类型为名称。

9．加入帧标签的帧，标签类型为注释。

10．加入帧标签的帧，标签类型为锚记。

11．加入音乐的帧。

12．加入脚本语言的帧。

二、逐帧动画的制作方法

三、形状补间动画的制作方法

Flash提供了两种创建动画的方式，分别为逐帧动画与补间动

画，其中补间动画又可以分为形状渐变动画与运动渐变动画两种，用

户可以轻易的使对象在场景中来回的运动，在运动的过程中还可以伴

随有诸如放大、缩小、旋转、变色以及淡入淡出等丰富效果。

教师做逐帧动画与形状补间动画的教学示范。

作业、讨论题、思考题：

课堂与课后进行逐帧动画与形状补间动画实践练习。

课后小结：

《互动媒体设计》课程教案

课次3

授课方式课时

理论课√讨论课□实验课√习题课□其他□4

（请打√）安排

授课题目（教学章、节或主题）：

第四章Flash中影片剪辑的运用

第五章Flash中的引导层与遮罩层动画

教学目的、要求：

了解元件、实例与库的基本概念与类型；理解元件、实例与库的使用方法；

了解Flash中影片剪辑的基本概念与类型；熟悉Flash中影片剪辑动画的制作方

法；掌握Flash中的引导层与遮罩层动画动画的基本操作方法。

教学重点及难点：

Flash中影片剪辑动画的基本操作方法、Flash中的引导层与遮罩层动画动

画的基本操作方法（教学重点）

Flash中的引导层与遮罩层动画的基本操作方法（教学难点）

方法及手

教学基本内容

段

第四章Flash中影片剪辑的运用

1、元件的基本概念与类型：

在Flash中，常常需要重复使用一些元素，用户可以将这些元素

装入元件中，需要时再调用，避免无谓操作，并可以大大减少文件大

小，提高播放速度。

元件也被称作符号或图符，是Flash动画的重要组成部分，元件

的主要特性是可以被重复利用，且不会影响影片的大小。

Flash中包括三种元件类型，分别为图形元件、影片剪辑元件与举例讲解、

按钮元件，每一种元件都具有独特的属性。

Flash中的所有元件都被归纳在库面板中，可以被随时调用，十多媒体讲

分方便。即使在场景中将所有元件全部删除，也不会影响库面板中的

元件。解、案例示

2、元件、实例与库的使用方法：

不同类型元件的创建与属性修改方法。范等。

实例的属性设置方法：

影片中的实例可以根据需要改变其原有的元件类型，3种元

件类型之间可以随意互换。实例类型的改变仅限于所选的实例，

不会影响到库面板中元件的类型。

库的使用

当库项目繁多时可以利用库文件夹对其进行分类整理，库面板中可以

同时包含多个文件夹，但不允许文件夹使用相同的名字。

3、Flash中影片剪辑的特点及创建方法

4、Flash中影片剪辑的编辑与修改方法

5、Flash中影片剪辑所塑造的动画特效案例分析

第五章Flash中的引导层与遮罩层动画

1、Flash中引导层的认识及路径动画的制作

创建引导层动画：

普通引导层可以理解为除标尺、网格等辅助工具以外的另一种辅

助制图手段，例如在引导层上绘制图形，然后将普通图层上的对象与

引导层中的图形对齐，或者在引导层中绘制一个网页的框架，接着在

普通图层中制作网页内容。引导层除了起到引导的作用以外，同时具

备普通图层中的任何属性，也就是说，在普通图层上能执行的操作在

引导层上同样可以，它们之间唯一的区别是在引导层上绘制的图形与

线条为引导线，在播放影片时，不会被显示出来。

创建普通引导层

创建运动引导层举例讲解、

同时引导多个图层

多媒体讲

2、Flash中的遮罩层的认识及遮罩动画的制作

创建遮罩层动画：解、案例示

遮罩在flash中有着广泛的应用，可以做出很多意想不到的效范等。

果。遮罩层的实现需要通过两个以上的图层，建立遮罩与被遮罩的关

系，也就是说，遮罩层不仅可以与一个普通图层之间建立遮罩关系，

也可以同时与多个普通图层之间建立遮罩关系。

遮罩层的原理：

理解遮罩层的原理关键要记住两条：第一，遮罩层本身是不会被

看见的。不管画出什么图形，简单或复杂，只要它被用作遮罩层，在

播放时就不会显示出来，也就是说，不用管它是什么颜色，遮罩层只

要求图形的形状，在遮罩层中，图形的填充颜色，或是位图里的图形

都会被忽略，得到的遮罩范围只是这个图形的剪影。第二，遮罩层中

的对象覆盖的部分，就是建立遮罩关系后显示的部分。另外，线条不

可以被用来制作遮罩层，要应用线条，必须要将它转换为填充色。

将多个图层应用于同一个遮罩层时，只需将这个图层拖拽置遮罩

层之下，即可与遮罩层之间建立了遮罩和被遮罩的关系。

教师做引导层与遮罩层动画的教学示范。

作业、讨论题、思考题：

课堂与课后做影片剪辑、引导层与遮罩层动画实践练习。

课后小结：

《互动媒体设计》课程教案

课次4

授课方式课时

理论课√讨论课□实验课√习题课□其他□4

（请打√）安排

授课题目（教学章、节或主题）：

按钮元件的制作及动作指令

教学目的、要求：

进一步理解元件、实例与库的使用方法；熟悉按钮元件的制作及动作指令的使

用方法；认识动作指令的基本概念；掌握按钮元件的制作及动作指令的操作方法。

教学重点及难点：

按钮元件的制作及动作指令的操作方法（教学重点）

按钮元件的制作及动作指令的操作方法（教学难点）

方法

教学基本内容及手

段

一、按钮元件的制作：举例

通过绘制与鼠标事件相对应的对象，按钮元件主要用于创建响应鼠

标事件的交互式按钮。鼠标事件包括鼠标触及与单击两种。将绘制的图讲

形转换为按钮元件，在播放影片时，当鼠标靠近图形时，光标就会变成

小手状态，为按钮元件添加脚本语言，即可实现影片的控制。解、

二、动作指令的操作：多媒

交互式动画就是允许观众对影片进行控制，而达到某种目的的动画。交

互式动画在动画与观众之间形成一种互动，使观众可以参与到动画中来。例体讲

如前面介绍的按钮元件的制作，它可以通过鼠标的移入或移出制作出不同的

响应效果。而除了简单的响应效果以外，还可以通过为按钮编写脚本语言，解、

使按钮具有控制影片的播放或者链接到指定的网页中去的功能。这是传统

动画所不具备的，在Flash中却能轻松实现。案例

所有脚本语言的编写均在动作面板中完成，执行“窗口”→“开发面板”示范

→“动作”命令或直接按F9快捷键，即可打开动作面板。

等。

动作面板共有三个窗口组成，左上角为动作工具栏，以树状结构显示举例

Flash支持的所有脚本语言。左下角为信息工具栏，显示当前的选择，也就

是要附加脚本语言的对象和已经附加脚本语言的对象的信息。右边为脚本编讲

辑区，编辑与显示脚本语言的窗口。

交互式动画原理：解、

交互式动画是由触发动作的事件、事件的目标和触发事件的动作3多媒

个因素组成的，例如单击按钮后，影片开始播放这一事件。其中，单击

是触发动作的事件，按钮是事件的目标，影片开始播放是触发事件的动体讲

作。换句话说，事件、目标和动作构成了一个交互式动画。

在Flash中，事件包括鼠标事件、键盘事件和帧事件三种。目标包解、

括时间轴、按钮元件和影片剪辑元件三种。而动作就是指控制影片的一

系列脚本语言，所以说脚本语言的编写也就是各种动作的编写。案例

在编写脚本语言时，既可以通过直接在脚本编辑区中输入字符进行编示范

写，又可以通过在动作工具栏中选择项目进行编写。

单击动作工具栏中的项目文件夹，可展开或收缩文件夹。在展开的项目等。

文件夹中包含多个脚本项目，通过双击进行选择。此外，还可以通过添加动

作按钮，将新项目添加到脚本中。

时间轴控制中包括了几种最常用的动作，用于控制影片或影片剪辑元件

中的时间轴。理解这些语言的意义，掌握它们的编写与操作，可以轻松实现

交互式影片中最为常见的效果。实例如控制影片的播放，停止和重新播放等。

时间轴控制命令位于全局函数的子文件夹中。

三、教师做按钮元件的制作及动作指令的操作的教学示范。

作业、讨论题、思考题：

做按钮元件的制作及动作指令实践操作练习。

课后小结：

《互动媒体设计》课程教案

课次5

授课方式课时

理论课√讨论课□实验课√习题课□其他□4

（请打√）安排

授课题目（教学章、节或主题）：

导入声音及其它媒体；

多场景动画；

影片的测试、优化、发布与导出

教学目的、要求：

了解声音及其它媒体的导入程序；熟悉多场景动画的链接设置方法；掌握影片

的测试、优化、发布与导出方法。

教学重点及难点：

导入声音及其它媒体的操作方法（教学重点）

多场景动画的链接设置方法（教学难点）

方法

教学基本内容及手

段

一、声音的导入：

声音是的影片的重要组成部分，有声影片会使动画更加生动自然，给

人身临其境之感。

在Flash中，既可以为整部影片添加声音，也可以单独为影片中的某

个元件添加声音。

在一部影片中，同一个声音文件可以被反复利用。用户还可以自行设举例讲

定声音与影片的同步方式。而Flash在声音资源的使用上也有着其它软件

无法媲美的高压缩率，所以制作的影片极为轻巧，便于流传。解、多

可以导入影片的声音格式有：WAV、MP3和AIFF（仅限苹果机）格式。

以上格式中，最常用的为WAV格式，它既可以应用于PC机，又可以媒体讲

应用于苹果机。

声音导入的程序：解、案

1.新建文档，执行“文件”→“导入”→“导入到库”命令，弹出“导入

到库”的对话框，在文件类型中选择WAV声音格式，接着选中要导入的声例示范

音文件，单击“确定”按钮。

2.返回场景编辑模式，按下Ctrl+L快捷键打开库面板，在库面板中可以等

看到刚刚选择的声音文件。

声音不但可以应用于整部影片中，还可以应用于某个元件中，