《互动媒体设计A》教案汇总

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