《互动媒体设计A》教案.doc

1/22教案2015 2016 学年第 2 学期课课程程名名称称互动媒体设计 A系系(院、部院、部)艺术学院教 研 室教 研 室(实 验实 验室室)视觉与媒体艺术授授课课班班级级艺视 141、142主主讲讲教教师师青荣职职称称副教授使使用用教教材材中文中文版版DreamweaverDreamweaver CS6/FlashCS6/Flash CS6/PhotoshopCS6/PhotoshopCS6CS6 网页设计实用教程网页设计实用教程淮海工学院教务处制二一六 年三月2/22教教案首页案首页课课 程程名名 称称互动媒体设计 A总计：总计：48学时学时课课 程程类类 别别根底必修课学分学分3讲课：讲课：23 学时学时分析讨论课分析讨论课:1 学时学时大作业与设计：大作业与设计：24 学时学时任任 课课教教 师师青荣职称：职称：副教授授 课授 课对对 象象专业班级：专业班级：艺术 121、122 共共 2 个班个班基 要基 要本 参本 参教 考教 考材 资材 资和 料和 料主主教材：中文版 Dreamweaver CS6/Flash CS6/Photoshop CS6 网页设计实用教程，志科编著，人民邮电发行部出版，出版 2016-1-1主要参考书：1、flash mx 实例与操作万茂山等著希望电子。2、Flash 与动感网页制作周全,进军，电子工业教 和教 和学 要学 要目 求目 求的的教学目的:互动媒体设计是艺术设计专业的一门专业根底必修课程。通过对互动媒体作品的艺术创作方法进展深入讲解,使学生对互动媒体的艺术创作与应用有较全面的了解,掌握互动媒体艺术创作设计的流程,培养学生应用计算机软件进展互动媒体艺术作品根本创作与设计制作的能力，为后续的专业设计服务。教学要求:1、掌握互动媒体设计创作的根本原理与方法；2、掌握软件 FlashFlash 的根本使用方法；3、独立完成一段互动的制作；3/22教 与教 与学 难学 难重 点重 点点点教学重点:互动媒体设计分类和特点、互动媒体的设计与创作方法、FlashFlash 的动画编辑技巧、FlashFlash 与与 Dreamweaver 的互动媒体设计知识。教学难点:互动媒体的设计与创作方法、FlashFlash 的动画编辑技巧、互动媒体设计实践。互动媒体设计 A课程教案课次1授课方式请打理论课讨论课 实验课 习题课 其他课时安排3授课题目教学章、节或主题：第一章、互动媒体设计概论教学目的、要求：认识互动媒体设计的根本概念；熟悉互动媒体设计的分类与设计方法；掌握网页设计的根本元素、根本结构形式以与设计制作程序，了解互动媒体设计根底软件。教学重点与难点：互动媒体设计的设计方法、互动媒体设计作品类型，网页设计的根本元素、根本结构形式以与设计制作程序教学重点网页设计的根本元素、根本结构形式以与设计制作程序，对互动媒体作品艺术创作思路的理解教学难点教 学 基 本容方法与手段4/22一、一、互动互动媒体设计概论：媒体设计概论：什么叫媒体？所谓媒体，是指传播信息的介质，通俗的说就是宣传平台，能为信息的传播提供平台的就可以称为媒体了，至于媒体的容，应该根据国家现行的有关政策，结合广告市场的实际需求不断更新，确保其可行性、适宜性和有效性。此前，传统的四大媒体分别为:1、电视；2、广播；3、报纸；4、；此外，还应有户外媒体，如路牌灯箱的广告位等。就其目前适宜性来讲，媒体应按其形式划分为平面、电波、网络三大类，即：1、平面媒体：主要包括印刷类、非印刷类、光电类等。2、电波媒体：主要包括广播、电视广告字幕、标版、影视等。3、网络媒体：主要包括网络索引、平面、动画、论坛等。什么叫多媒体？多媒体：它集合文字、图形、图像、动画、视频、录像、声音、音乐等传统表现媒体的优点，结合了计算机的交互功能，开发者针对客户与项目需求通过精心的策划创意构思，结合各种表现方式，运用计算机对相关素材进展编程集成，使其成为一有机的整体。举例讲解、多媒体讲解、案例讲解；使用板书与投影仪等。5/22什么叫互动媒体？互动媒体来自英文 Multimedia,multi 是指多重的，media 即媒体，指我们用来表达信息的载体与形式。多媒体从字面上解释是多种媒体 文字、图像、动画、视频、声音、音乐集合的意思。二、网页设计：二、网页设计：一、网页媒介信息分类1.文字2.图像3.声音4.视频5.动画二、网页结构根本形式：1.分栏结构形式2.框架结构形式3.开放结构形式4.综合式三、网页 banner 广告：放置在页面上，是互联网广告中最根本的广告形式,一般使用 GIF 格式的图像文件,可以使用静态图形,也可用动画图像)。Banner：可以是页面的横幅广告，也可以是游行活动时用的旗帜，还可以是报纸杂志上的大标题。Bnner 主要表达中心意旨，形象鲜明表达最主要的情感思想或宣传中心。四、网页设计制作程序前期创作策划、资料的收集整理、主题定位、栏目结构规划、logo 设计、整体视觉艺术创意设计、页面排版布局设计、页面排版与艺术设计稿绘制；中期制作排版布局细化、造型制作、动画制作、背景绘制、按钮制作、声音添加等；后期处理动作语言的添加、交互、作品的输出、测试、优化与发布等.三三、互动媒体设计常用软件：、互动媒体设计常用软件：早期：FrontpageAdobe GoliveJavaScript 等目前：网页三剑客：Flash、Dreamweaver、Fireworks现在一般用 PS 代替 Fireworks以 JavaScript 等专业级进展编程举例讲解、多媒体讲解、案例讲解；使用板书与投影仪等。作业、讨论题、思考题：1.上网查询互动媒体设计的有关资料，讨论思考互动媒体设计的特点是什么?2.构想一个个人主题，思考其大致容结构。课后小结：6/22互动媒体设计 A课程教案课次2授课方式请打理论课讨论课 实验课习题课 其他课时安排3授课题目教学章、节或主题：第二章 Flash 软件根底学习一教学目的、要求：认识 Flash 的根本界面与根底图形绘制方法，理解 Flash 帧的概念与编辑技巧，学习逐帧动画.教学重点与难点：互动媒体设计的设计方法、Flash 的根本操作方法，Flash 帧的概念与编辑技巧，学习逐帧动画教学重点Flash 帧的概念与编辑技巧，学习逐帧动画教学难点教 学 基 本容方法与手段第二章 Flash 软件根底学习一一、Flash 操作界面认识二、Flash 根本绘图方法1、根本几何形的绘制2、根底自然形的绘制3、场景的创建与选择三、Flash 帧的概念与编辑技巧，学习逐帧动画1 1、帧的根本概念与类型：电影就是把很多画面串在一条塑料胶片上，每个画面称为一帧。Flash 中帧是创建动画的根底，不同的帧代表着不同的时刻。Flash 帧的类型：1关键帧。以实心圆表示，代表这个帧中含有对象。2 普通帧。普通帧中的对象永远和离它最近的关键帧中的对象保持一致。3空白关键帧。以空心圆表示，代表这个关键帧中没有任何对象，在空白关键帧中参加对象即可变成关键帧。举 例 讲解、多媒体讲解、提 问 与讨 论 式教学7/224一般空白帧。代表空白区域中没有任何对象。5运动渐变帧。以底色为浅蓝色的箭头符号表示，代表这个区域存在运动补间动画。6形状渐变帧。以底色为浅绿色的箭头符号表示，代表这个区域存在形状补间动画。2 2、逐帧动画的制作方法教师演示逐帧动画制作实例作业、讨论题、思考题：1、课后继续查询“互动媒体设计的相关资料；2、进一步完成个人的结构创意设计与标志设计；3、课后复习巩固课堂所学技能。课后小结：8/22互动媒体设计 A课程教案课次3授课方式请打理论课讨论课 实验课习题课 其他课时安排3授课题目教学章、节或主题：第二章 Flash 软件根底学习二教学目的、要求：认识 Flash 的形状与元件，掌握形状与动作补间动画的根本原理与制作方法.教学重点与难点：认识 Flash 的形状与元件，掌握形状与动作补间动画的根本原理与制作方法 教学重点形状与动作补间动画的根本原理与制作方法教学难点教 学 基 本容方法与手段Flash 软件根底学习二1、形状的概念、学习形状补间动画；形状补间动画的制作程序与技巧2、元件的概念、学习动作补间动画；元件的根本概念与类型：在 Flash 中，常常需要重复使用一些元素，用户可以将这些元素装入元件中，需要时再调用，防止无谓操作，并可以大大减少文件大小，提高播放速度。元件也被称作符号或图符，是 Flash 动画的重要组成局部，元件的主要特性是可以被重复利用，且不会影响影片的大小。Flash 中包括三种元件类型，分别为图形元件、影片剪辑元件与按钮元件，每一种元件都具有独特的属性。Flash 中的所有元件都被归纳在库面板中，可以被随时调用，十分方便。即使在场景中将所有元件全部删除，也不会影响库面板中的元件。动作补间动画Flash 提供了两种创建动画的方式，分别为逐帧动画与补间动画，其中补间动画又可以分为形状渐变动画与运动渐变动画两种，用户可以轻易的使对象在场景中来回的运动，在运动的过程中还可以伴随有诸如放大、缩小、旋转、变色以与淡入淡出等丰富效果。举例讲解、多媒体讲解、提问与讨论式教学作业、讨论题、思考题：1、课后复习巩固课堂所学技能。9/22课后小结：互动媒体设计 A课程教案课次4授课方式请打理论课讨论课 实验课习题课 其他课时安排3授课题目教学章、节或主题：第二章 Flash 软件根底学习三教学目的、要求：了解 Flash 中影片剪辑的根本概念与类型；熟悉 Flash 中影片剪辑动画的制作方法、编辑与修改方法。教学重点与难点：了解 Flash 中影片剪辑的根本概念与类型；熟悉 Flash 中影片剪辑动画的制作方法、编辑与修改方法教学重点Flash 中影片剪辑动画的原理特点、制作方法与修改方法教学难点教 学 基 本容方法与手段flash 软件根底学习三Flash 中影片剪辑的运用1、Flash 中影片剪辑的特点与创建方法2、Flash 中影片剪辑的编辑与修改方法3、Flash 中影片剪辑所塑造的动画特效案例分析举例讲解、多媒体讲解、提问与讨论式教学作业、讨论题、思考题：做影片剪辑动画实践练习。课后小结：10/22互动媒体设计 A课程教案课次5授课方式请打理论课讨论课 实验课习题课 其他课时安排3授课题目教学章、节或主题：第二章 Flash 软件根底学习四教学目的、要求：认识Flash 中引导层的特点与创建方法，掌握 Flash中路径动画的编辑制作方法。教学重点与难点：Flash 中引导层的特点与创建方法，Flash 中路径动画的编辑制作方法教学重点Flash 中路径动画的编辑制作方法教学难点教 学 基 本容方法与手段一、认识引导层：1普通引导层：用于绘制辅助图形的图层，独立成为一层。2运动引导层：用于绘制运动路径的图层，至少引导一个图层。3被引导的图层：图层中的对象按照运动引导层中的路径运动。二、创建引导层动画：普通引导层可以理解为除标尺、网格等辅助工具以外的另一种辅助制图手段，例如在引导层上绘制图形，然后将普通图层上的对象与引导层中的图形对齐，或者在引导层中绘制一个网页的框架，接着在普通图层中制作网页容。引导层除了起到引导的作用以外，同时具备普通图层中的任何属性，也就是说，在普通图层上能执行的操作在引导层上同样可以，它们之间唯一的区别是在引导层上绘制的图形与线条为引导线，在播放影片时，不会被显示出来。创建普通引导层创建运动引导层同时引导多个图层实例操作：引导层动画制作。举 例 讲解、教师示讲解、案例解析作业、讨论题、思考题：做引导层动画实践练习。11/22课后小结：互动媒体设计 A课程教案课次6授课方式请打理论课讨论课 实验课习题课 其他课时安排3授课题目教学章、节或主题：第二章 Flash 软件根底学习五教学目的、要求：认识Flash 中遮罩层的特点与创建方法，掌握 Flash中遮罩动画的编辑制作方法。教学重点与难点：Flash 中遮罩层的特点与创建方法，Flash 中遮罩动画的编辑制作方法教学重点Flash 中遮罩动画的编辑制作方法教学难点教 学 基 本容方法与手段一、认识遮罩层：1、遮罩层：图层中的对象与下面的图层建立遮罩的关系，至少遮罩一个图层。2、被遮罩图层：图层中的对象与上面的图层建立被遮罩的关系。二、创建遮罩层动画：遮罩在 flash 中有着广泛的应用，可以做出很多意想不到的效果。遮罩层的实现需要通过两个以上的图层，建立遮罩与被遮罩的关系，也就是说，遮罩层不仅可以与一个普通图层之间建立遮罩关系，也可以同时与多个普通图层之间建立遮罩关系。遮罩层的原理：理解遮罩层的原理关键要记住两条：第一，遮罩层本身是不会被看见的。不管画出什么图形，简单或复杂，只要它被用作遮罩层，在播放时就不会显示出来，也就是说，不用管它是什么颜色，遮罩层只要求图形的形状，在遮罩层中，图形的填充颜色，或是位图里的图形都会被忽略，得到的遮罩围只是这个图形的剪影。第二，遮罩层中的对象覆盖的局部，就是建立遮罩关系后显示的局部。另外，线条不可以被用来制作遮罩层，要应用线条，必须要将它转换为填充色。将多个图层应用于同一个遮罩层时，只需将这个图层拖拽置遮罩层之下，即可与遮罩层之间建立了遮罩和被遮罩的关系。实例操作：引导层动画制作。举 例 讲解、教师示讲解、案例解析12/22作业、讨论题、思考题：做引导层动画实践练习。课后小结：互动媒体设计 A课程教案课次7授课方式请打理论课讨论课 实验课习题课 其他课时安排3授课题目教学章、节或主题：第二章 Flash 软件根底学习六教学目的、要求：认识 Flash 中按钮的特点与创建方法、掌握 Flash 中按钮的编辑与修改方法，Flash 中按钮的动作指令添加方法。教学重点与难点：Flash 中按钮的特点与创建方法、Flash 中按钮的编辑与修改方法、按钮的动作指令添加方法。教学重点Flash 中按钮的编辑与修改方法、按钮的动作指令添加教学难点教 学 基 本容方法与手段13/22Flash 软件根底学习六Flash 中按钮元件的制作与动作指令：一、按钮元件的特点与创建：通过绘制与鼠标事件相对应的对象，按钮元件主要用于创建响应鼠标事件的交互式按钮。鼠标事件包括鼠标触与与单击两种。将绘制的图形转换为按钮元件，在播放影片时，当鼠标靠近图形时，光标就会变成小手状态，为按钮元件添加脚本语言，即可实现影片的控制。二、Flash 中按钮的编辑与修改方法三、Flash 中按钮的动作指令解析：交互式动画就是允许观众对影片进展控制，而达到某种目的的动画。交交互式动画原理：交互式动画是由触发动作的事件、事件的目标和触发事件的动作3 个因素组成的，例如单击按钮后，影片开始播放这一事件。其中，单击是触发动作的事件，按钮是事件的目标，影片开始播放是触发事件的动作。换句话说，事件、目标和动作构成了一个交互式动画。在 Flash 中，事件包括鼠标事件、键盘事件和帧事件三种。目标包括时间轴、按钮元件和影片剪辑元件三种。而动作就是指控制影片的一系列脚本语言，所以说脚本语言的编写也就是各种动作的编写。举 例 讲解、教师示讲解、案例解析在编写脚本语言时，既可以通过直接在脚本编辑区中输入字符进展编写，又可以通过在动作工具栏中选择项目进展编写。单击动作工具栏中的项目文件夹，可展开或收缩文件夹。在展开的项目文件夹中包含多个脚本项目，通过双击进展选择。此外，还可以通过添加动作按钮，将新项目添加到脚本中。时间轴控制中包括了几种最常用的动作，用于控制影片或影片剪辑元件中的时间轴。理解这些语言的意义，掌握它们的编写与操作，可以轻松实现交互式影片中最为常见的效果。实例如控制影片的播放，停止和重新播放等。时间轴控制命令位于全局函数的子文件夹中。四、Flash 中局部按钮特效案例解析五、教师做按钮元件的制作与动作指令的操作的教学示。作业、讨论题、思考题：按钮元件的制作与动作指令的操作实践练习。14/22课后小结：互动媒体设计 A课程教案课次8授课方式请打理论课 讨论课 实验课习题课 其他课时安排3授课题目教学章、节或主题：Flash 按钮元件与动作指令实验教学目的、要求：通过实验操作进一步认识 Flash 中按钮的特点与创建方法、掌握 Flash 中按钮的编辑与修改方法，Flash 中按钮的动作指令添加方法。15/22教学重点与难点：Flash 中按钮的特点与创建方法、Flash 中按钮的编辑与修改方法、按钮的动作指令添加实验。教学重点Flash 中按钮的编辑与修改方法、按钮的动作指令添加实验教学难点教 学 基 本容方法与手段学生进展按钮元件的制作与动作指令的实验操作练习。教师针对问题示演练，巡回指导。学生实验操作，教师针对问题演示指导作业、讨论题、思考题：按钮元件的制作与动作指令的操作实践练习。课后小结：互动媒体设计 A课程教案课次9授课方式请打理论课讨论课 实验课习题课 其他课时安排3授课题目教学章、节或主题：第二章 Flash 软件根底学习七教学目的、要求：了解声音与其它媒体的导入程序；熟悉多场景动画的设置方法；掌握影片的测试、优化、发布与导出方法。16/22教学重点与难点：导入声音与其它媒体的操作方法教学重点多场景动画的设置方法教学难点教 学 基 本容方法与手段Flash 软件根底学习七Flash 中导入声音与其它媒体，多场景动画一、声音的导入：声音是的影片的重要组成局部，有声影片会使动画更加生动自然，给人身临其境之感。在 Flash 中，既可以为整部影片添加声音，也可以单独为影片中的某个元件添加声音。在一部影片中，同一个声音文件可以被反复利用。用户还可以自行设定声音与影片的同步方式。而 Flash 在声音资源的使用上也有着其它软件无法媲美的高压缩率，所以制作的影片极为轻巧，便于流传。可以导入影片的声音格式有：WAV、MP3 和 AIFF仅限苹果机格式。以上格式中，最常用的为 WAV 格式，它既可以应用于 PC 机，又可以应用于苹果机。声音导入的程序：1.新建文档，执行“文件“导入“导入到库命令，弹出“导入到库的对话框，在文件类型中选择 WAV 声音格式，接着选中要导入的声音文件，单击“确定按钮。2.返回场景编辑模式，按下 Ctrl+L 快捷键打开库面板，在库面板中可以看到刚刚选择的声音文件。声音不但可以应用于整部影片中，还可以应用于某个元件中，和元件的原理一样，声音可以被反复利用与制作各种声音效果，均以库面板中声音为根底。举 例 讲解、教师示讲解、案例解析17/22二、其它媒体的导入与声音的导入方法相似；三、多场景动画。1、为每一个场景最后一帧设置停止动作语言关键帧；2、在每一个场景添加好相应的按钮；3、为每一个按钮正确添加动作语言。*注意：输入动作语言是全角与半角输入法的精准切换！四、影片的测试、优化、发布与导出：1.可以在两种环境下测试影片，一种为影片编辑环境，另一种为影片测试环境。在影片编辑环境下，按 Enter 键可以对影片进展简单的测试，但影片中的影片剪辑元件、按钮元件以与脚本语言也就是影片的交互式效果均不能得到测试。要在影片编辑环境下测试简单的帧动作play、stop、gotoplay 和gotoandstop，需要执行“控制“启用简单帧动作命令。2.优化影片的最终目的是减少文件的大小，确保它的播放流畅。因为无论影片如何出色，如果在播放的过程中发生屡次连续，都会影响它的效果。所以对影片进展必要的优化是影片制作的最后步骤，下面将讲述如何对影片的各种对象进展优化以与优化的一些技巧。3.可以将 Flash 影片发布成多种格式，而在发布之前需进展必要的发布设置，定义发布的格式以与相应的设置，达到最正确效果。在“发布设置对话框中，可以一次性发布多个格式，且每种格式均保存为指定的发布设置，可以拥有不同的名字。4.导出影片不像发布那样可以对影片的各方面进展设置，它可以把当前影片全部导出为 Flash 支持的格式。而影片的导出分为两种，分别是导出图片与导出影片。五、教师做声音与其它媒体导入、多场景动画设置、影片的测试、优化与导出教学示。作业、讨论题、思考题：做声音与其它媒体导入、多场景动画设置与影片的测试、优化与导出实践操作练习。课后小结：18/22互动媒体设计 A课程教案课次10授课方式请打理论课讨论课 实验课习题课 其他课时安排3授课题目教学章、节或主题：Flash 中导入声音与其它媒体、多场景实验教学目的、要求：通过实验操作进一步了解声音与其它媒体的导入程序；熟悉多场景动画的设置方法；掌握影片的测试、优化、发布与导出方法。教学重点与难点：导入声音与其它媒体的操作实验教学重点多场景动画的设置实验教学难点教 学 基 本容方法与手段学生进展按钮元件的制作与动作指令的实验操作练习。教师针对问题示演练，巡回指导。学生实验操作，教师针对问题演示指导作业、讨论题、思考题：做声音与其它媒体导入、多场景动画设置与影片的测试、优化与导出实践操作练习。课后小结：19/22互动媒体设计 A课程教案课次11授课方式请打理论课讨论课 实验课习题课 其他课时安排3授课题目教学章、节或主题：大作业方案设计与讨论教学目的、要求：通过实验操作进一步了解声音与其它媒体的导入程序；熟悉多场景动画的设置方法；掌握影片的测试、优化、发布与导出方法。教学重点与难点：导入声音与其它媒体的操作实验教学重点多场景动画的设置实验教学难点教 学 基 本容方法与手段学生进展按钮元件的制作与动作指令的实验操作练习。教师针对问题示演练，巡回指导。学生实验操作，教师针对问题演示指导作业、讨论题、思考题：做声音与其它媒体导入、多场景动画设置与影片的测试、优化与导出实践操作练习。课后小结：20/22互动煤体设计 A课程教案课次12授课方式请打理论课讨论课 实验课习题课其他课时安排3授课题目教学章、节或主题：第四章 互动媒体设计综合作业实践训练 1教学目的、要求：通过互动媒体设计综合作业实践训练，进一步了解互动媒体作品制作的程序，熟悉互动媒体作品制作的原理与方法，掌握互动媒体作品制作的方法与技巧。教学重点与难点：互动媒体综合作品的艺术设计与制作技巧的现实运用教学重点互动媒体综合作品的制作技巧的现实作品运用教学难点教 学 基 本容方法与手段一、理论知识与关键操作技巧知识的复习二、互动媒体综合作业设计与制作实践训练学生进展互动媒体综合作品的设计制作实践练习，教师随堂指导。实践教学作业、讨论题、思考题：进入主题性互动媒体设计综合作业的设计与制作阶段。课后小结：21/22互动煤体设计 A课程教案课次12授课方式请打理论课讨论课 实验课习题课 其他课时安排5授课题目教学章、节或主题：课程总结与作业点评、修正完善教学目的、要求：通过课程总结与作业点评，进一步明了互动媒体作品制作的程序、明晰互动媒体作品制作的原理与方法、掌握互动媒体作品制作的方法与技巧。教学重点与难点：互动媒体综合作品的制作完成教学重点互动媒体综合作品的艺术创意与制作表现的结合教学难点教 学 基 本容方法与手段一、课程总结与作业点评；二、互动媒体综合作业的后期制作实践训练：学生进展互动媒体综合作品的后期制作实践练习，教师随堂指导。实践教学；总结、作 业 点评、讨论。作业、讨论题、思考题：进一步修正与完善主题性互动媒体综合作业的制作。22/22课后小结：