互动媒体设计A教案解析.docx

《互动媒体设计A教案解析.docx》由会员分享，可在线阅读，更多相关《互动媒体设计A教案解析.docx（31页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、教 案2015 2016 学年第 2学期课 程 名 称互动媒体设计A 系(院、部)艺术学院教研室(试验室)视觉及媒体艺术授 课 班 级艺视141、142主 讲 教 师张青荣职 称 副教授使 用 教 材中文版Dreamweaver CS6/Flash CS6/Photoshop CS6网页设计好用教程淮海工学院教务处制二一六 年三月 教 案（首页）课 程名 称 互动媒体设计A总计： 48 学时课 程类 别 根底必修课学分3讲课： 23 学时分析探讨课: 1 学时大作业及设计：24学时任 课教 师张青荣职称：副教授授课对 象专业班级：艺术121、122 共2个班基要本参教考材资和料主教材：中文版D

2、reamweaver CS6/Flash CS6/Photoshop CS6网页设计好用教程，张志科编著，人民邮电出版社发行部出版，出版时间：2016-1-1主要参考书：1、flash mx实例及操作万茂山等（著）北京盼望电子出版社。2、Flash及动感网页制作周全,刘进军，电子工业出版社教和学要目求的教学目的:互动媒体设计是艺术设计专业的一门专业根底必修课程。通过对互动媒体作品的艺术创作方法进展深化讲解,使学生对互动媒体的艺术创作及应用有较全面的理解,驾驭互动媒体艺术创作设计的流程, 培育学生应用计算机软件进展互动媒体艺术作品根本创作及设计制作的实力，为后续的专业设计效劳。教学要求:1、 驾

3、驭互动媒体设计创作的根本原理及方法；2、 驾驭软件Flash的根本运用方法；3、 独立完成一段互动网站的制作；教及学难重点点教学重点:互动媒体设计分类和特点、互动媒体的设计及创作方法、Flash的动画编辑技巧、Flash及Dreamweaver的互动媒体设计学问。教学难点:互动媒体的设计及创作方法、Flash的动画编辑技巧、互动媒体设计理论。互动媒体设计A 课程教案课次1授课方式（请打）理论课 探讨课 试验课 习题课 其他课时支配3授课题目（教学章、节或主题）：第一章、互动媒体设计概论教学目的、要求：相识互动媒体设计的根本概念；熟识互动媒体设计的分类及设计方法；驾驭网页设计的根本元素、根本构造

4、形式以及设计制作程序，理解互动媒体设计根底软件。教学重点及难点：互动媒体设计的设计方法、互动媒体设计作品类型，网页设计的根本元素、根本构造形式以及设计制作程序（教学重点）网页设计的根本元素、根本构造形式以及设计制作程序，对互动媒体作品艺术创作思路的理解（教学难点）教 学 基 本 内 容方法及手段一、互动媒体设计概论：什么叫媒体？所谓媒体，是指传播信息的介质，通俗的说就是宣扬平台，能为信息的传播供应平台的就可以称为媒体了，至于媒体的内容，应当依据国家现行的有关政策，结合广告市场的实际需求不断更新，确保其可行性、相宜性和有效性。此前，传统的四大媒体分别为:1、电视；2、播送；3、报纸；4、网站；此

5、外，还应有户外媒体，如路牌灯箱的广告位等。就其目前相宜性来讲，媒体应按其形式划分为平面、电波、网络三大类，即：1、平面媒体：主要包括印刷类、非印刷类、光电类等。2、电波媒体：主要包括播送、电视广告（字幕、标版、影视）等。3、网络媒体：主要包括网络索引、平面、动画、论坛等。什么叫多媒体？多媒体：它集合文字、图形、图像、动画、视频、录像、声音、音乐等 传统表现媒体的优点，结合了计算机的交互功能，开发者针对客户及工程 需求通过细心的筹划创意构思，结合各种表现方式，运用计算机对相关素材 进展编程集成，使其成为一有机的整体。举例讲解、多媒体讲解、案例讲解；运用板书及投影仪等。什么叫互动媒体？互动媒体来自

6、英文Multimedia , multi是指多重的，media即媒体，指我们用来表达信息的载体及形式。多媒体从字面上说明是多种媒体（文字、图像、动画、视频、声音、音乐）集合的意思。二、网页设计：（一）、网页媒介信息分类1. 文 字2. 图 像3. 声 音4. 视 频5. 动 画（二）、网页构造根本形式：1. 分栏构造形式2. 框架构造形式3. 开放构造形式4. 综合式（三）、网页banner广告：放置在网站页面上，是互联网广告中最根本的广告形式, 一般运用GIF格式的图像文件, 可以运用静态图形, 也可用动画图像) 。 Banner：可以是网站页面的横幅广告，也可以是游行活动时用的旗帜，还可以

7、是报纸杂志上的大标题。Bnner主要表达中心愿旨，形象显明表达最主要的情感思想或宣扬中心。（四）、网页设计制作程序l 前期创作筹划、资料的搜集整理、主题定位、栏目构造规划、logo设计、整体视觉艺术创意设计、页面排版布局设计、网站页面排版及艺术设计稿绘制； l 中期制作排版布局细化、造型制作、动画制作、背景绘制、按钮制作、声音添加等；l 后期处理动作语言的添加、交互链接、作品的输出、测试、优化及发布等.三、互动媒体设计常用软件：早期：Frontpage Adobe Golive JavaScript等目前：网页三剑客：Flash、Dreamweaver、Fireworks 如今一般用PS代替

8、Fireworks 以JavaScript等专业级网站进展编程 举例讲解、多媒体讲解、案例讲解；运用板书及投影仪等。作业、探讨题、思索题：1. 上网查询互动媒体设计的有关资料，探讨思索互动媒体设计的特点是什么 2. 设想一个个人主题网站，思索其大致内容构造。课后小结：互动媒体设计A 课程教案课次2授课方式（请打）理论课 探讨课 试验课 习题课 其他课时支配3授课题目（教学章、节或主题）：第二章 Flash软件根底学习（一）教学目的、要求：相识Flash的根本界面及根底图形绘制方法，理解Flash帧的概念及编辑技巧，学习逐帧动画.教学重点及难点：互动媒体设计的设计方法、Flash的根本操作方法，

9、Flash帧的概念及编辑技巧，学习逐帧动画（教学重点）Flash帧的概念及编辑技巧，学习逐帧动画（教学难点）教 学 基 本 内 容方法及手段第二章 Flash软件根底学习（一） 一、Flash操作界面相识二、Flash根本绘图方法 1、根本几何形的绘制2、根底自然形的绘制3、场景的创立及选择三、Flash帧的概念及编辑技巧，学习逐帧动画1）、帧的根本概念及类型：电影就是把许多画面串在一条塑料胶片上，每个画面称为一帧。Flash中帧是创立动画的根底，不同的帧代表着不同的时刻。Flash帧的类型：1关键帧。以实心圆表示，代表这个帧中含有对象。2一般帧。一般帧中的对象恒久和离它最近的关键帧中的对象保

10、持一样。3空白关键帧。以空心圆表示，代表这个关键帧中没有任何对象，在空白关键帧中参加对象即可变成关键帧。举例讲解、多媒体讲解、提问及探讨式教学4一般空白帧。代表空白区域中没有任何对象。5运动渐变帧。以底色为浅蓝色的箭头符号表示，代表这个区域存在运动补间动画。 6形态渐变帧。以底色为浅绿色的箭头符号表示，代表这个区域存在形态补间动画。2）、逐帧动画的制作方法老师演示逐帧动画制作实例作业、探讨题、思索题：1、课后接着查询“互动媒体设计”的相关资料；2、进一步完成个人网站的构造创意设计及标记设计；3、课后复习稳固课堂所学技能。课后小结：互动媒体设计A 课程教案课次3授课方式（请打）理论课 探讨课 试

11、验课 习题课 其他课时支配3授课题目（教学章、节或主题）：第二章 Flash软件根底学习（二）教学目的、要求：相识Flash的形态及元件，驾驭形态及动作补间动画的根本原理及制作方法.教学重点及难点：相识Flash的形态及元件，驾驭形态及动作补间动画的根本原理及制作方法（教学重点）形态及动作补间动画的根本原理及制作方法（教学难点）教 学 基 本 内 容方法及手段Flash软件根底学习（二） 1、形态的概念、学习形态补间动画； 形态补间动画的制作程序及技巧2、元件的概念、学习动作补间动画；l 元件的根本概念及类型：在Flash中，经常需要重复运用一些元素，用户可以将这些元素装入元件中，需要时再调用

12、，避开无谓操作，并可以大大削减文件大小，进步播放速度。元件也被称作符号或图符，是Flash动画的重要组成局部，元件的主要特性是可以被重复利用，且不会影响影片的大小。 Flash中包括三种元件类型，分别为图形元件、影片剪辑元件及按钮元件，每一种元件都具有独特的属性 。Flash中的全部元件都被归纳在库面板中，可以被随时调用，非常便利。即使在场景中将全部元件全部删除，也不会影响库面板中的元件。l 动作补间动画Flash供应了两种创立动画的方式，分别为逐帧动画及补间动画，其中补间动画又可以分为形态渐变动画及运动渐变动画两种，用户可以轻易的使对象在场景中来回的运动，在运动的过程中还可以伴随有诸如放大、

13、缩小、旋转、变色以及淡入淡出等丰富效果 。举例讲解、多媒体讲解、提问及探讨式教学作业、探讨题、思索题：1、课后复习稳固课堂所学技能。课后小结：互动媒体设计A 课程教案课次4授课方式（请打）理论课 探讨课 试验课 习题课 其他课时支配3授课题目（教学章、节或主题）：第二章 Flash软件根底学习（三）教学目的、要求：理解Flash中影片剪辑的根本概念及类型；熟识Flash中影片剪辑动画的制作方法、编辑及修改方法。教学重点及难点：理解Flash中影片剪辑的根本概念及类型；熟识Flash中影片剪辑动画的制作方法、编辑及修改方法（教学重点）Flash中影片剪辑动画的原理特点、制作方法及修改方法（教学难

14、点）教 学 基 本 内 容方法及手段flash软件根底学习（三） Flash中影片剪辑的运用1、Flash中影片剪辑的特点及创立方法2、Flash中影片剪辑的编辑及修改方法3、Flash中影片剪辑所塑造的动画特效案例分析举例讲解、多媒体讲解、提问及探讨式教学作业、探讨题、思索题：做影片剪辑动画理论练习。课后小结：互动媒体设计A 课程教案课次5授课方式（请打）理论课 探讨课 试验课 习题课 其他课时支配3授课题目（教学章、节或主题）：第二章 Flash软件根底学习（四）教学目的、要求：相识Flash中引导层的特点及创立方法，驾驭Flash中途径动画的编辑制作方法。教学重点及难点：Flash中引导

15、层的特点及创立方法， Flash中途径动画的编辑制作方法（教学重点）Flash中途径动画的编辑制作方法（教学难点）教 学 基 本 内 容方法及手段一、相识引导层：1一般引导层：用于绘制协助图形的图层，独立成为一层。2运动引导层：用于绘制运动途径的图层，至少引导一个图层。3被引导的图层：图层中的对象依据运动引导层中的途径运动。二、创立引导层动画：一般引导层可以理解为除标尺、网格等协助工具以外的另一种协助制图手段，例如在引导层上绘制图形，然后将一般图层上的对象及引导层中的图形对齐，或者在引导层中绘制一个网页的框架，接着在一般图层中制作网页内容。引导层除了起到引导的作用以外，同时具备一般图层中的任何

16、属性，也就是说，在一般图层上能执行的操作在引导层上同样可以，它们之间唯一的区分是在引导层上绘制的图形及线条为引导线，在播放影片时，不会被显示出来。l 创立一般引导层 l 创立运动引导层 l 同时引导多个图层 实例操作：引导层动画制作。举例讲解、老师示范讲解、案例解析作业、探讨题、思索题：做引导层动画理论练习。 课后小结：互动媒体设计A 课程教案课次6授课方式（请打）理论课 探讨课 试验课 习题课 其他课时支配3授课题目（教学章、节或主题）：第二章 Flash软件根底学习（五）教学目的、要求：相识Flash中遮罩层的特点及创立方法，驾驭Flash中遮罩动画的编辑制作方法。教学重点及难点：Flas

17、h中遮罩层的特点及创立方法， Flash中遮罩动画的编辑制作方法（教学重点）Flash中遮罩动画的编辑制作方法（教学难点）教 学 基 本 内 容方法及手段一、相识遮罩层：1、遮罩层：图层中的对象及下面的图层建立遮罩的关系，至少遮罩一个图层。2、被遮罩图层：图层中的对象及上面的图层建立被遮罩的关系。二、创立遮罩层动画：遮罩在flash中有着广泛的应用，可以做出许多意想不到的效果。遮罩层的实现需要通过两个以上的图层，建立遮罩及被遮罩的关系，也就是说，遮罩层不仅可以及一个一般图层之间建立遮罩关系，也可以同时及多个一般图层之间建立遮罩关系 。 l 遮罩层的原理：理解遮罩层的原理关键要记住两条：第一，遮

18、罩层本身是不会被看见的。不管画出什么图形，简洁或困难，只要它被用作遮罩层，在播放时就不会显示出来，也就是说，不用管它是什么颜色，遮罩层只要求图形的形态，在遮罩层中，图形的填充颜色，或是位图里的图形都会被忽视，得到的遮罩范围只是这个图形的剪影。第二，遮罩层中的对象覆盖的局部，就是建立遮罩关系后显示的局部。另外，线条不行以被用来制作遮罩层，要应用线条，必需要将它转换为填充色。将多个图层应用于同一个遮罩层时，只需将这个图层拖拽置遮罩层之下，即可及遮罩层之间建立了遮罩和被遮罩的关系。 实例操作：引导层动画制作。举例讲解、老师示范讲解、案例解析作业、探讨题、思索题：做引导层动画理论练习。 课后小结：互动

19、媒体设计A 课程教案课次7授课方式（请打）理论课 探讨课 试验课 习题课 其他课时支配3授课题目（教学章、节或主题）：第二章 Flash软件根底学习（六）教学目的、要求：相识Flash中按钮的特点及创立方法、驾驭 Flash中按钮的编辑及修改方法， Flash中按钮的动作指令添加方法。教学重点及难点：Flash中按钮的特点及创立方法、Flash中按钮的编辑及修改方法、按钮的动作指令添加方法。（教学重点）Flash中按钮的编辑及修改方法、按钮的动作指令添加（教学难点）教 学 基 本 内 容方法及手段Flash软件根底学习（六） Flash中按钮元件的制作及动作指令 ：一、按钮元件的特点及创立：通

20、过绘制及鼠标事务相对应的对象，按钮元件主要用于创立响应鼠标事务的交互式按钮。鼠标事务包括鼠标触及及单击两种。将绘制的图形转换为按钮元件，在播放影片时，当鼠标靠近图形时，光标就会变成小手状态，为按钮元件添加脚本语言，即可实现影片的限制。二、Flash中按钮的编辑及修改方法三、Flash中按钮的动作指令解析：交互式动画就是允许观众对影片进展限制，而到达某种目的的动画。交l 交互式动画原理：交互式动画是由触发动作的事务、事务的目的和触发事务的动作3个因素组成的，例如单击按钮后，影片开场播放这一事务。其中，单击是触发动作的事务，按钮是事务的目的，影片开场播放是触发事务的动作。换句话说，事务、目的和动作

21、构成了一个交互式动画。 在Flash中，事务包括鼠标事务、键盘事务和帧事务三种。目的包括时间轴、按钮元件和影片剪辑元件三种。而动作就是指限制影片的一系列脚本语言，所以说脚本语言的编写也就是各种动作的编写 。举例讲解、老师示范讲解、案例解析在编写脚本语言时，既可以通过干脆在脚本编辑区中输入字符进展编写，又可以通过在动作工具栏中选择工程进展编写。单击动作工具栏中的工程文件夹，可绽开或收缩文件夹。在绽开的工程文件夹中包含多个脚本工程，通过双击进展选择。此外，还可以通过添加动作按钮，将新工程添加到脚本中。 时间轴限制中包括了几种最常用的动作，用于限制影片或影片剪辑元件中的时间轴。理解这些语言的意义，驾

22、驭它们的编写及操作，可以轻松实现交互式影片中最为常见的效果。实例如限制影片的播放，停顿和重新播放等。时间轴限制吩咐位于全局函数的子文件夹中。四、Flash中局部按钮特效案例解析五、老师做按钮元件的制作及动作指令的操作的教学示范。作业、探讨题、思索题：按钮元件的制作及动作指令的操作理论练习。 课后小结：互动媒体设计A 课程教案课次8授课方式（请打）理论课 探讨课 试验课 习题课 其他课时支配3授课题目（教学章、节或主题）：Flash按钮元件及动作指令试验教学目的、要求：通过试验操作进一步相识Flash中按钮的特点及创立方法、驾驭 Flash中按钮的编辑及修改方法， Flash中按钮的动作指令添加

23、方法。教学重点及难点：Flash中按钮的特点及创立方法、Flash中按钮的编辑及修改方法、按钮的动作指令添加试验。（教学重点）Flash中按钮的编辑及修改方法、按钮的动作指令添加试验（教学难点）教 学 基 本 内 容方法及手段学生进展按钮元件的制作及动作指令的试验操作练习。老师针对问题示范演练，巡回指导。学生试验操作，老师针对问题演示指导作业、探讨题、思索题：按钮元件的制作及动作指令的操作理论练习。 课后小结：互动媒体设计A 课程教案课次9授课方式（请打）理论课 探讨课 试验课 习题课 其他课时支配3授课题目（教学章、节或主题）：第二章 Flash软件根底学习（七）教学目的、要求：理解声音及其

24、它媒体的导入程序；熟识多场景动画的链接设置方法；驾驭影片的测试、优化、发布及导出方法。教学重点及难点：导入声音及其它媒体的操作方法（教学重点）多场景动画的链接设置方法（教学难点）教 学 基 本 内 容方法及手段Flash软件根底学习（七）Flash中导入声音及其它媒体， 多场景动画一、声音的导入：声音是的影片的重要组成局部，有声影片会使动画更加生动自然，给人身临其境之感。 在Flash中，既可以为整部影片添加声音，也可以单独为影片中的某个元件添加声音 。 在一部影片中，同一个声音文件可以被反复利用。用户还可以自行设定声音及影片的同步方式。而Flash在声音资源的运用上也有着其它软件无法媲美的高

25、压缩率，所以制作的影片极为灵巧，便于流传。可以导入影片的声音格式有：WAV、MP3和 AIFF（仅限苹果机）格式。 以上格式中，最常用的为WAV格式，它既可以应用于PC机，又可以应用于苹果机 。l 声音导入的程序：1.新建文档，执行“文件”“导入”“导入到库”吩咐，弹出“导入到库”的对话框，在文件类型中选择WAV声音格式，接着选中要导入的声音文件，单击“确定”按钮。 2.返回场景编辑形式，按下Ctrl+L快捷键翻开库面板，在库面板中可以看到刚刚选择的声音文件。 声音不但可以应用于整部影片中，还可以应用于某个元件中，和元件的原理一样，声音可以被反复利用及制作各种声音效果，均以库面板中声音为根底

26、。举例讲解、老师示范讲解、案例解析二、其它媒体的导入及声音的导入方法相像；三、多场景动画链接。1、为每一个场景最终一帧设置停顿动作语言关键帧；2、在每一个场景添加好相应的链接按钮；3、为每一个链接按钮正确添加动作语言。* 留意：输入动作语言是全角及半角输入法的精准切换！四、影片的测试、优化、发布及导出：1. 可以在两种环境下测试影片，一种为影片编辑环境，另一种为影片测试环境。在影片编辑环境下，按Enter键可以对影片进展简洁的测试，但影片中的影片剪辑元件、按钮元件以及脚本语言也就是影片的交互式效果均不能得到测试。要在影片编辑环境下测试简洁的帧动作（play、stop、gotoplay和goto

27、andstop），需要执行“限制”“启用简洁帧动作”吩咐 。2. 优化影片的最终目的是削减文件的大小，确保它的播放流畅。因为无论影片如何精彩，假如在播放的过程中发生屡次连续，都会影响它的效果。所以对影片进展必要的优化是影片制作的最终步骤，下面将讲解并描述如何对影片的各种对象进展优化以及优化的一些技巧 。3. 可以将Flash影片发布成多种格式，而在发布之前需进展必要的发布设置，定义发布的格式以及相应的设置，到达最佳效果。在“发布设置”对话框中，可以一次性发布多个格式，且每种格式均保存为指定的发布设置，可以拥有不同的名字。4. 导出影片不像发布那样可以对影片的各方面进展设置，它可以把当前影片全部

28、导出为Flash支持的格式。而影片的导出分为两种，分别是导出图片及导出影片。五、老师做声音及其它媒体导入、多场景动画链接设置、影片的测试、优化及导出教学示范。作业、探讨题、思索题：做声音及其它媒体导入、多场景动画设置及影片的测试、优化及导出理论操作练习。课后小结：互动媒体设计A 课程教案课次10授课方式（请打）理论课 探讨课 试验课 习题课 其他课时支配3授课题目（教学章、节或主题）：Flash中导入声音及其它媒体、多场景链接试验教学目的、要求：通过试验操作进一步理解声音及其它媒体的导入程序；熟识多场景动画的链接设置方法；驾驭影片的测试、优化、发布及导出方法。教学重点及难点：导入声音及其它媒体

29、的操作试验（教学重点）多场景动画的链接设置试验（教学难点）教 学 基 本 内 容方法及手段学生进展按钮元件的制作及动作指令的试验操作练习。老师针对问题示范演练，巡回指导。学生试验操作，老师针对问题演示指导作业、探讨题、思索题：做声音及其它媒体导入、多场景动画设置及影片的测试、优化及导出理论操作练习。课后小结：互动媒体设计A 课程教案课次11授课方式（请打）理论课 探讨课 试验课 习题课 其他课时支配3授课题目（教学章、节或主题）：大作业方案设计及探讨教学目的、要求：通过试验操作进一步理解声音及其它媒体的导入程序；熟识多场景动画的链接设置方法；驾驭影片的测试、优化、发布及导出方法。教学重点及难点

30、：导入声音及其它媒体的操作试验（教学重点）多场景动画的链接设置试验（教学难点）教 学 基 本 内 容方法及手段学生进展按钮元件的制作及动作指令的试验操作练习。老师针对问题示范演练，巡回指导。学生试验操作，老师针对问题演示指导作业、探讨题、思索题：做声音及其它媒体导入、多场景动画设置及影片的测试、优化及导出理论操作练习。课后小结：互动煤体设计A 课程教案课次12授课方式（请打）理论课 探讨课 试验课 习题课 其他课时支配3授课题目（教学章、节或主题）：第四章 互动媒体设计综合作业理论训练1教学目的、要求：通过互动媒体设计综合作业理论训练，进一步理解互动媒体作品制作的程序，熟识互动媒体作品制作的原

31、理及方法，驾驭互动媒体作品制作的方法及技巧。教学重点及难点：互动媒体综合作品的艺术设计及制作技巧的现实运用（教学重点）互动媒体综合作品的制作技巧的现实作品运用（教学难点）教 学 基 本 内 容方法及手段一、 理论学问及关键操作技巧学问的复习二、互动媒体综合作业设计及制作理论训练学生进展互动媒体综合作品的设计制作理论练习，老师随堂指导。理论教学作业、探讨题、思索题：进入主题性互动媒体设计综合作业的设计及制作阶段。课后小结：互动煤体设计A 课程教案课次12授课方式（请打）理论课 探讨课 试验课 习题课 其他课时支配5授课题目（教学章、节或主题）：课程总结及作业点评、修正完善教学目的、要求：通过课程总结及作业点评，进一步明了互动媒体作品制作的程序、明晰互动媒体作品制作的原理及方法、驾驭互动媒体作品制作的方法及技巧。教学重点及难点：互动媒体综合作品的制作完成（教学重点）互动媒体综合作品的艺术创意及制作表现的结合（教学难点）教 学 基 本 内 容方法及手段一、课程总结及作业点评；二、互动媒体综合作业的后期制作理论训练：学生进展互动媒体综合作品的后期制作理论练习，老师随堂指导。理论教学；总结、作业点评、探讨。作业、探讨题、思索题：进一步修正及完善主题性互动媒体综合作业的制作。课后小结：