互动媒体设计

1、南昌大学自考实践报告 互动媒体设计（一） 姓名: 专业：动画设计2015.10.16FLASH互动媒体设计与研究Flash在网络中的地位如日中天，其以文件小、制作简单、画面 流畅、播放方便等特性获得了各种硬件平台包括互联网、手机和新一 代的高清电视的青睐和支持。随着Flash技术的发展和完善，除传统 的大量应用Flash制作广告和Flash MTV之外，现正广泛地应用于娱 乐（如Flash游戏）和商业用途（如Flash网站）之中，Flash方便 的界面制作和丰富的Action Script控制为大家制作Flash互动设计 提供了更多的空间。本实践报告共分为若干个，其中第一节到第四节是轻松入门部

2、分， 包括互动媒体设计体验、Flash动作脚本基本知识，Flash跳转函数 控制播放器、Flash影片属性应用；第五章到第十章为拾级进阶 部分，包括鼠标跟随效果、日期、时问显示和设置、数据的交互应用 进度条、声音和背景音乐的控制、碰撞检测与定时器、过渡效果和行 为；第十一节到第十八节为攀缘而上部分，包括使用外部文件、Flash 的常用类、视频应用、Flash与麦克风的互动、使用组件、Flash动 态数据处理、绘图函数、综合实例。本实践报告中包含了大量的较为实用的案例，对比较复杂的案例， 除了给出制作步骤之外，还对案例进行了分析和扩展，让我们不仅能 掌握互动设计制作的基本技巧，而且能开阔视野，达

3、到举一反三的效 果，同时还能提高读者对互动项目策划的能力。其中所涉及的案例都 可以在Flash8版本下正常编译运行。在学习互动媒体设计之前，如果有程序设计的基础，将能更加顺 利地完成flash互动媒体设计的学习。在学习第十六节实例制作一一 Flash留言板之前，应熟悉ASP的相关技术。如果没有ASP基础，可 以跳过本节内容，不会影响到后续其他内容的学习。目录 TOC o 1-5 h z HYPERLINK l bookmark10 o Current Document 第一节绪论11.1引言1.1.2研究的背景以及意义3 HYPERLINK l bookmark13 o Current Doc

4、ument 第二节互动媒体设计体验62.1互动设计规划72.2互动设计实例9 HYPERLINK l bookmark16 o Current Document 第三节Flash动作脚本基本知识113.1 Flash动作脚本功能123.2认识Flash动作脚本窗口133.3使用变量14第节绪论1.1引言2009年11月，英国伦敦V&A博物馆数字设计感官展展出了大量 由计算机程序生成的互动艺术作品，展览打破了作品静态呈现的传统 展示方式，颠覆了观众静观作品的观看惯性。计算机程序对艺术的介 入引发了艺术家创作工具和思维方式的转变。研究如何编写程序、创 造声音或图像的界面以实现代码与观众之间的交流互

5、动，成为设计艺 术界新的课题。美国排名前列的罗德岛设计学院聘请麻省理工媒体实 验室ACG小组主任约翰梅达担任校长，传统的艺术设计行业正面临 着一场革命。编写程序不仅是程序员的专利，它也已成为数字艺术家 的创作手段，以及艺术院校的必修课程。英国皇家艺术学院、耶鲁大 学设计学院、加州大学媒体艺术专业、卡内基梅隆大学等院校都把编 程作为教学课题。大部分设计师都会使用商业软件（如Photoshop、Illustrator、 Flash ）来从事创作，这些软件功能丰富、使用方便，可以实现预设 的效果。但人们的创意和表现形式往往被企业所主导的制式化生产工 具所限制。FLASH互动媒体设计的出现是艺术设计创

6、作的一场革命， 它是一种具有前瞻性的新兴计算机语言，用户主要面向计算机程序员 和数字艺术家。艺术家可以运用FLASH互动媒体设计生成唯美的图 形，为互动艺术作品编写程序，将抽象的数据呈现为视觉形象。当你 进入到互动编程艺术的世界，就会发现这一切都是让人兴奋不已的。 由于文化和语言的差异，国内研究Processing的学术机构并不多见， 中文网站和学术论坛等学习资源有限，也没有相关的中文版本的书籍。资料的缺乏在很大程度上降低了中国设计师学习Processing的 积极性。鉴于以上现实，作者根据自身的教学实践编写了本书。本书 可作为学习互动艺术编程的基础书籍，主要面向艺术院校数字媒体设 计专业、交

7、互设计专业，以及业界的设计师，等等。本书前两章主要 介绍了 Processing的背景、编程与互动艺术的关系，以及编程基础 知识。接下来的章节对绘画、互动、动画、函数与对象、数组、图片 与文字、视频与音频、3D与物理计算等方面进行了较为全面的论述， 并结合了大量的实例与作品分析来启发读者的互动艺术思维。在国 内，互动艺术和编程艺术都是新的研究领域，本书是在一个全新的领 域中进行探索，在此过程中难免会存在不完善之处，希望得到相关专 家和广大读者的批评指正！在创意产业迅速发展的中国，我们有理由相信新一代的艺术家和设计 师们不会只停留在软件应用的层次，他们会运用编程去创新、发展艺 术与设计，并将民族

8、文化与思想注入到作品中1.2研究的意义与背景Flash动画是一门综合的艺术，给我们带来视觉、听觉等方面的享受， 大部分flash动画往往会在角色、情节、语言、场景等方面加入幽默 元素，给人以乐趣。Flash创作的动画故事表现力极强，能深入挖掘人们内心的矛盾，以 诙谐幽默的手法展现作者对现实社会的理解。所以，很多flash动画 作品深受人们的喜爱。而且flash动画简单易学，打破了专业动画制 作者的局限，爱好者同样经过学习能成为制作者。而且flash动画制 作成本低，制作时间比传统动画缩短很多。因此，flash动画制作的 爱好者在也在迅速增加。Flash制作的领域很广泛。电视广告、贺卡、 MTV

9、、动画短片、交互游戏、网站广告都flash的身影，甚至电子商 务中也应用了 flash技术。出于对flash动画作品的热爱，很多爱好 者开始学习动画制作。由于学习flash的方法有误，又没有好的教程， 很多人连基础动画都没学会。最终我还是自己去买教材，买实例介绍 的比较清晰，自学类型的教材。所以，flash动画制作的学习方法是 我们需要重点考虑的问题，需要有新的教学方法改善这种“很多人学， 很多人不会”的局面。经过几年的flash学习和教学过程，我总结了 自己的教学经验，买实例详尽的基础较强的学习教材，从网上搜索视 频解说教程，让学生自己动手，教师引导，学生学得较快。这种教学 与学习的方法比以

10、前的教学方法有所创新。主要工作分以下几个方 面：一加强理论学习）建构主义学习理论建构主义其学习理论的核心 观点是：1）学习不应看成是对于教师所授予的知识的被动接受， 而是学习者以自身已有的知识和经验为基础的主动的建构活动，即学 生能主动积极地构造意义。所以，我在flash动画教学过程中，先引 导学生学习动画基础操作，先从简单的容易实现的制作实例开始学 习，让学生小有成就感，渐渐产生兴趣，才能主动积极的学习后面的 操作。2）学生学习活动主要是在学校环境中，在教师的直接指导下 进行的。因此，学习作为一种特殊的建构活动有社会性质。这说明学习不是一 个封闭的过程，而是一个交流、反思、改进、协调和创造的

11、过程。所 以，由学生、教师、媒体组成的学习环境是学生主动构建活动所必要 的。我坚持和学生一起制作动画，通过投影仪屏幕展示的形式给学生 引导，真正感受学生不会的操作，师生之间讨论、改进。第二节互动媒体设计体验1.1互动设计规划互动设计在任何的人工物的设计和制作过程里面都是不可以避免 的，区别只在于显意识和无意识。然而，随着产品和用户体验日趋复 杂、功能增多，新的人工物不断涌现，给用户造成的认知摩擦日益加 剧的情况下，人们对互动设计的需求变得愈来愈显性，从而触发其作 为单独的设计学科在理论和实践的呼声变得愈发迫切。然而，由于互动设计的研究者和实践者来自不同领域，而且这个 领域本身尚在创建阶段，因此

12、人们往往对某些问题尚未达成共识，甚 至对类似和相同的问题本身的理解以及解决方式也可能有不同方案， 且相互矛盾。比如互动设计的基本元素包含什么，现在也还在讨论中。但是人们依然形成了一些不相互否认的共识，比如，互动设计是 设计人和物的对话(dialog)，而互动设计研究和实践的本质可能是隐 藏于这个对话中的。互动设计的目的包括，有用性，易用性和吸引性 的设计和改善。特别是进入数字时代，多媒体让互动设计的研究显得更加多元化 多学科各角度的剖析让互动设计理论的显得更加丰富。现在基于互动 设计的产品已经越来越多的投入市场，而很多新的产品也大量的吸收 了互动设计的理论2.2互动设计实例创意初始：力求讲山清

13、水润，讲江南温婉，讲气质，讲在北方，讲独特人文园林 ，讲互动在中国元素衍生，讲时光流转，四季切换，用网络平台展现平日无法企及的视觉效 果。在VNOISE 团队一致努力下，网站如期进行项目地址 HYPERLINK http:/www.bjtlsy.c http:/www.bjtlsy.c显示格式 选取1024*768 （占81%）的浏览用户按惯例我们开始进行设计大纲：经过创意部门的开 会，起草了一个方向性的大纲。大体从导向入手，考虑一个初次访问者的浏览层次 如下图1琳 *1去粗取精，概括为：游园体验！完全要摒弃那种条框将中国概念削弱。弱化网站结构，体现方寸之间。天上人间的感受。在画面表现规划上：

14、讲究（虚实）（动静）远虚呻实（项目主体实）近-虚-（近处水墨夸张，细节活色生香）同时抓一些色彩概括：我们不是在做SHOW，而是要深刻体现项目特质，这个项目适合什么手段来表现，用减法，去该概括，去将时间压缩，去将历史精华在那访问网站的几分钟内，从容展示：、画面开始讲溯源：我们从江南而来带来了园林同时在北京找到了北方豪放大气的宝地-13 陵（可以看出水是南方的；山确是北方的。我们有意而为之。第一个景色我们特地选取冬在家暖冬，泥炉煮雪，对影成叁。显然冬是特殊的，至少在江南没有，在苏州园林以前没有，今天在北京有了，而且很具有特色，一种华丽的晚装夕卜 寒内暖，敛聚天地的感受，不然总让人莫名感到一些缺憾。

15、在北京我们找到了抓苏州元素；在内容上将又浅及深，在画文结合的情况下，体现天伦随园的整体高贵气质。 当然由于时间仓促客观条件我们开发周期比较急促有些细节不尽人意，实在遗憾。另：有一 些细节素材是从网络搜索开源得来，例如一些音乐，和一些中国元素，在此表示感谢， 我们会在今后始终为体现视觉互动精神而努力正如我们公司的名字VNOISE视觉互动。第三节FLASH动作脚本基本知识3.1 FLASH动作脚本功能1实现动作的流畅完整3.2认识FLASH脚本窗口在Flash中，动作脚本的编写，都是在“动作”面板的编辑环境中进行，熟悉“动作”面板是十分必要的。按【F9】键调出“动作”面 板，可以看到“动作”面板的

16、编辑环境由左右两部分组成。左侧部分 又分为上下两个窗口。左侧的上方是一个“动作”工具箱，单击前面 的图标展开每一个条目，可以显示出对应条目下的动作脚本语句元 素，双击选中的语句即可将其添加到编辑窗口。下方是一个“脚本” 导航器。里面列出了 FLA文件中具有关联动作脚本的帧位置和对象； 单击脚本导航器中的某一项目，与该项目相关联的脚本则会出现在“脚本”窗口中，并且场景上的播放头也将移到时间轴上的对应位置 上。双击脚本导航器中的某一项，则该脚本会被固定。右侧部分是“脚 本”编辑窗口，这是添加代码的区域。可以直接在“脚本”窗口中编 辑动作、输入动作参数或删除动作。也可以双击“动作”工具箱中的 某一项

17、或“脚本编辑”窗口上方的【添加脚本】工具，向“脚本” 窗口添加动作。在“脚本”编辑窗口的上面，有一排工具图标，在编辑脚本的时 候，可以方便适时的使用它们的功能。3.3在使用“动作”面板的时候，可以随时点击“脚本”编辑窗口左 侧的箭头按钮，以隐藏或展开左边的窗口。将左面的窗口隐藏可以使 “动作”面板更加简洁，方便脚本的编辑。好了，动作面板就介绍这些，有个印象，不要求记住，工具栏上 每个工具的作用和功能将在以后的课程中边用边熟悉3.3使用变量 比较运算符用于比较表达式的值，然后返回一个布尔值(true或 false)。这些运算符最常用于循环语句和条件语句中。Flash中的 算术运算符及简单的用法如

18、表比较返回值在舞台上绘制四个动态 文本框，变量名分别为：m_txt1、m_txt2、m_txt3、m_txt4。再放入 两个按钮。按钮1上的AS：on (release) m1_txt = 1 = 2;m2_txt = 12;m3_txt = 12;m4_txt = 1 != 2;按钮2上的AS:on (release) m1_txt=m2_txt=m3_txt=m4_txt = 条件运算符?：(条件)格式：表达式式1?表达式2：表达式3参数：表达式1计算结 果为布尔值的表达式，通常为像x 5这样的比较表达式。表达式 2表达式3任何类型的值。说明：指示Flash计算表达式1,如果表达式1的值为true,则它返回表达式2的值；否则，它返回表达式3的值。条件运算符原理在舞台上绘制两个输入文本，一个 动态文本。变量名分别为x_txt”、y_txt”、z_txt”。在放入一个“计算”按钮、一个“清空”按钮。运算按钮上的AS代 码：on (press) x = Number(x_txt);y = Number(y_txt);