毕业设计（论文）-上海世博园区多媒体景观制作实训.doc

《毕业设计（论文）-上海世博园区多媒体景观制作实训.doc》由会员分享，可在线阅读，更多相关《毕业设计（论文）-上海世博园区多媒体景观制作实训.doc（35页珍藏版）》请在三一文库上搜索。

1、上海世博园区多媒体景观制作实训 1 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 毕业实训论文 题目： 上海世博园区多媒体景观制作实训 专 业 计算机应用 班 级 10204152 学 号 1020411508 姓 名 张三 指 导 教 师 李四 2010 年 09 月 16 日 上海世博园区多媒体景观制作实训 2 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 目录目录 目录目录.ii 1绪论绪论.1 1.1问题的提出.1 1.2课题研究意义.1 1.3课题调研.3 1.4总体介绍.4 1.5工具选择.4 2制作的技术关键制作的技术关键.6 2.1技术 1 DIRECTOR软件

2、基础应用6 2.1.1舞台（Stage）.6 2.1.2演员表（Cast）.6 2.1.3分镜表（Score）.7 2.2技术 2 EASY PAINT TOOL SAI 的绘图技巧7 2.2.1SAI 的工作界面.7 2.2.2用 SAI 绘制多层彩图 .7 3设计设计.10 3.1总体设计.10 3.1.1总体设计框架图10 3.1.2各模块设计框架图10 3.1.3五大模块的首页设计12 3.2详细设计用 DIRECTOR集合所有素材.14 3.2.1主菜单界面详细设计14 3.2.2“世博揽胜”模块详细设计.16 3.2.3“会徽之谜”模块 16 3.2.4“东方之冠”模块详细设计 1

3、7 3.2.5“精彩视频”模块详细设计 21 3.2.6“海宝故事”模块详细设计 25 3.3详细设计案例多媒体素材的制作.26 3.3.1案例 1：“接天莲叶无穷碧，映日荷花别样红”影片制作.26 3.4设计中遇到的问题.30 3.4.1问题 1：.30 3.4.2问题 2：.30 3.4.3问题 3：.30 3.4.4问题 4：.30 3.5使用说明.31 3.5.1“世博揽胜”模块使用说明.31 3.5.2“会徽之谜”模块使用说明 31 上海世博园区多媒体景观制作实训 3 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 3.5.3“东方之冠”模块使用说明 31 3.5.4“精彩视频

4、”模块使用说明 31 3.5.5“海宝故事”模块使用说明 31 4结论结论.32 4.1完成情况.32 4.2更进一步的学习.32 4.3心得体会.33 致谢致谢.35 参考文献参考文献.36 上海世博园区多媒体景观制作实训 4 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 摘要摘要 中国 2010 年上海世界博览会（EXPO 2010） ，是第 41 届世界博览会。于 2010 年 5 月 1 日至 10 月 31 日期间，在中国上海市举行。此次世博会也是由中国举办的首届世界 博览会。上海世博会以“城市，让生活更美好” （BETTER CITY, BETTER LIFE）为主 题，总

5、投资达 450 亿人民币，创造了世界博览会史上最大规模记录。 世博会将是上海城市发展的一个里程碑，上海作为以城市为主题的 2010 年世界博 览会的举办城市，有着特殊的意义。上海在筹备世博会的过程中，必然会建造更多的优 秀建筑，创建面向未来的住宅区，丰富城市发展的理念，完善并提升城市功能，创造城 市未来发展的模式，推动中国城市化进程。 本课题设计部分将使用 DirectorMX2004 来将课题中的各种资料，包括文字，图片， 视频以及声音等素材进行整理和组合。由此形成一系列演示作品，希望能够以生动形象 的方式将最美的世博印象展现给观众。 关键词：关键词：创意设计 会展经济 文化产业 上海世博园

6、区多媒体景观制作实训 5 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 1 绪论 在了解了本次设计的背景及意义之后，我们将进入到课题的正式设计制作之中，首 先我们将会对本课题问题的提出，本课题的意义以及使用到的相关工具等方面的内容进 行研究。 1.1问题的提出 现在是一个开拓的多媒体作品得到充分运用的时代。多媒体元素充满了城市的各个 角落：网页中的广告，视频教学，互动演示，移动电视，银幕广告等。多媒体形式层出 不穷。作为计算机科学与技术专业，同时专业方向又是多媒体技术的学生，掌握一些多 媒体制作常识，尤其是能结合时代主题创作具有个性的特色作品，不仅是专业的要求， 而且是产业发展的实践性

7、需要。 1.2课题研究意义 通过对这个课题的设计与开发，可以了解并熟悉我眼中 2010 年上海世博会的精彩 内容。 作为与奥运会、世界杯比肩的世界三大盛会之一，世博会是对一个国家、一个城市 所取得的社会、经济、文化、科技等领域的最高成果的展示。 “一切始于世博1” 这句广为传诵的名言，道出了一个多世纪以来世博会对创新的不懈追求。世界展览会的 会场不单是展示技术和商品，而且伴以异彩纷呈的表演，富有魅力的壮观景色，设置 成日常生活中无法体验的、充满节日气氛的空间，成为一般市民娱乐和消费的理想场 所。 首先，本文将介绍中国与世博会历史（ 1851-1940） 。 中国第一个看到 “炫奇会” （世博会

8、）的是清末著名文人王韬。 1851年的英国伦敦首届博览会，中国商人和一些在中国经商的外商，将丝绸、茶 叶、中药等中国传统商品拿去参展并获得多项奖项。 1873年的维也纳博览会是中国第一次参加的世博会。当时任清政府海关总税务司 的英国人赫德曾派了名叫包腊的英国人代表中国参会。 1876年，中国海关代表李圭参加了美国费城世博会，写下了环游地球新录 一书。此举也被称为是中国参加世博会之始。在这次博览会上，中国展馆占地仅 “八千正方尺” ，精心的布置，以浓郁的中华民族特色吸引了参观者。一座木质大牌 楼向北而建，上书 “大清国”三个字，对联一副，曰 “集十八省之大观，天工可夺； 庆一百年盛会，友谊斯顿

9、” ，横批为“物华天宝” 。中国参展的商品共计有 720箱， 上海世博园区多媒体景观制作实训 6 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 6801种，价值约白银 20万两。中国的丝、菜、瓷器、绸货、雕花器、景泰蓝等在各 国展品中被推为第一。 1904年美国圣路易斯世博会是中国首次以官方形式率领商人正式参加的世博会。 当时清政府相当重视参展，花巨资修建了具有浓郁民族风格的中国村和中国展馆，并 派出了溥伦和黄开甲分任正副团长的政府正式代表团出席开幕典礼。 1915年巴拿马太平洋世界博览会在美国旧金山举行。当时的中华民国政府建造 的中华政府馆集中了许多中式建筑结构，较突出地反映了中国传

10、统政治型建筑的特色， 在巴拿马世博会各场馆中有一定的典型性和观赏性。 1926年费城世博会上，中国以生丝、茶叶、江浙绸缎、江西瓷器、福建漆器、手 工刺绣及翡翠等展品为主，具有中华民族特色。 1 通过了解中国参展世博会的历史，我们可以看到中华民族的历史步伐，领略到中 华文明在国际舞台上的鲜明个性。 现代新中国与世博会的交往是不断向前推进的。从 1982年至2008年，中国参加 了13次综合类和专业类世界博览会 。2010年上海世界博览会（Expo 2010） ，是第41届 世界博览会。于2010年5月1日至10月31日期间，在中国上海市举行。此次世博会也是由 中国举办的首届世界博览会。上海世博会

11、以“城市，让生活更美好”（Better City, Better Life）为主题，总投资达450亿人民币，创造了世界博览会史上最大规模记录。 自 2002 年的摩纳哥蒙特卡洛上中国申请举办上海 2010 年世博会成功后，到 2010 年上海世博会正式举行，经过 8 年时间的建设与宣传，人们对世博会已是耳熟能详。 “2010 年上海世博会，将会告诉你关于城市的美好未来！”正如这句话本身一样，世博 会吉祥物“海宝” ；世博的“脊梁”世博轴；世博演艺中心“飞碟” ；璀璨升起 的中国国家馆“东方之冠” ；各具特色的世界展馆以及主题馆；现代城市发展优秀 案例城市最佳实践区除了这些矗立在世博园区的夺人眼

12、球的建筑和世界仰止的 科技新秀之外，园区内亲切热情的志愿者“小白菜” ；欧洲广场、太平洋广场、美洲广 场、非洲广场和志愿者广场等几大广场的国际国内轮回驻场文艺演出以及欢乐盛装大巡 游，船鸼码头童趣盎然热闹非凡的剧场，亲水平台音乐喷泉每夜绽放织就绚丽舞曲，这 些都让中外游客流连忘返，印象深刻。上海世博会上有近 400 个展项，还有对主题有所 呈现的各种景观，各类论坛和两万场活动。所有这些项目，都好看、好玩，而且颇具内 涵、引人深思。不同的展览、活动、论坛，让你从不同地域文化和民族的视野，从国家、 地区、城市、企业、社会团体的不同角度，看到今天世界对于“城市”与“生活”问题 的解读。同时，电视、报

13、纸、互联网等主流媒体对世博会的跟踪报道也让上海世博会成 为 2010 年的年度关键词。 现在，上海2010年世博会已经圆满闭幕，对世博的回忆和讨论却经久不息。人民日 上海世博园区多媒体景观制作实训 7 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 报报道：“一届成功、精彩、难忘的世博会即将载入史册” ，中国青年报“经过世博洗 礼的一代被称为世博一代 ” ，经济日报：“书写人类文明交流互鉴新篇章” ，东方早 报：“海内存知己，天涯若比邻”2媒体报道纷至沓来，潮水般介绍世博会闭幕盛况。 在世博会结束后，园区适合按照何种形态进行后续利用是一个万众关注的问题。上 海市政协曾表示极大关注，早在

14、2009 年就提出了相关建议。根据设想，世博会后，上 海应把园区定位为国际贸易功能集聚的高端商务园区，成为永不谢幕的会展、贸易集聚 之地。事实上，世博园区所有参展国家拟建展馆时都运用了环保材料，闭幕之后都会拆 除。 应市场要求和游客期望，中国国家馆延长开放时间，整歇后于2010年12月1日开始 到2011年5月30日为止重新开放参观2，给游客更多机会欣赏东方之冠的壮观和美丽。 在世博会这个百花齐放的多媒体舞台中，影视短片和数字动画起到举足轻重的宣传 作用。多媒体产业因此提升到一个新的高度，从世博园中众多移动媒体的 LED 显示屏 循环放映的多媒体作品上可见端倪。 世博印象创意设计是一个巨大的课

15、题。一方面，本课题给学生广阔的创作空间，另 一方面，它又意味着学生必须推陈出新，以自己特有的方式组织已有的多媒体素材进行 再创作。纵观整个多媒体创作市场，高速发展的信息网络为学生们提供了大量免费可共 享的多媒体资源。如何结合自己的专业知识与技能来运用这些资源为毕业实训服务，向 用户传递个性世博印象，是一个不小的挑战，也是本次毕业实训中需要注重的问题。 1.3课题调研 在对本课题的设计目的和意义有了一个初步了解之后，我们通过查阅和分析作者当 志愿者时留下的影音资料对世博会进行一个更加深入的认识。作为一名上海欧华学院的 园区志愿者，对世博园有别样的体会，这将会有助于今后的设计与制作。 2009 年

16、 3 月，上海世博会志愿者网上报名启动，笔者马上报了名。经过一系列筛选 和测试，最终于 2009 年末确定成为园区志愿者候选人。 2010 年 3 月，作为候选人正式开始参加培训。世博理论知识、基础救护知识、世博 信息平台操作等等理论和实验训练结束后，2010 年 4 月 29 日，我们参加了世博会开幕 式演练，第一次进入世博园区进行实践观摩。接着是 2 个月的信息理论等测试，直到 2010 年 7 月 12 日，我们进入园区成为世博园 B 片区太平洋联合馆南侧遮阳伞前岗上志 愿者，主要工作为非活动期间问询。就这样，我开始真正的世博之旅。 一年多的新闻跟踪调研及两周实地考察体验“小白菜”生活，

17、我们看到了许多从未 了解过的美丽世博园，接触了许多优秀的志愿工作者，从而对上海世博会有了更加深刻 的体会。尤其是太平洋区域联合馆多元化文明，其缤纷的历史色彩，热情的人文交流， 都令人目不暇接，眼花缭乱。因此，本次毕业实训课题既是专业技巧的挑战，也是对我 上海世博园区多媒体景观制作实训 8 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 们世博之旅的总结和纪念。这种特殊的经历为我们设计中视角和模式探讨增加了个性色 彩。经过对世博官方资料以及个人影集资料的总结分析，我们确定了制作世博揽胜、会 徽之谜、东方之冠、精彩视频和海宝故事五大主要模块，然后在此基础之上对各模块内 容进行详细创意设计，以

18、求给用户最佳的世博印象。 1.4总体介绍 在本设计中将针对世博会设计从主菜单链接五个主题模块，再从各主题细分为相关 主题内容展示。展示内容包括影视作品、精美手绘、欢乐音频、动感彩图等与主题相关 素材的集成。 主菜单界面是绘图软件结合数位板手绘的彩图制作成 flash 动画循环演示。主菜单 上将显示 5 个按钮分别指引用户前往“园区揽胜” 、 “会徽之谜” 、 “东方之冠” 、 “精彩视 频”和“海宝故事”主题模块。 其中， “世博揽胜Map”展示 2010 年上海世博会地理概况，包括园区交通地图， 餐饮地图和节目单图。特色项目是太平洋舞台歌舞实况纪录。 “会徽之谜Emb”模块主线是以忆海拾贝的

19、叙述方式，演绎世博会徽的形成过 程，带领用户走近会徽，体验会徽图形美感与城市生活主题的融合过程。除主线之外， 支线故事是志愿者标志的设计及“小白菜”之旅的照片展示，让用户在各种徽章中感受 世博的人文气息和青春活力。 “东方之冠China”模块是一个以中国国家馆为主题的模块。本模块意在以 “画中乾坤”的方式展示东方之冠的故事。 “精彩视频Vid”用蓝调风格影院的方式让用户欣赏世博会的精彩官方宣传片。 播放列表上所有影片来源于上海世博会园区志愿者读本 ，集合了从申博到世博会成 功举办的一系列宣传视频，带给用户快捷方便的视听感受。 “海宝故事Luck”模块是一个充满童趣色彩的模块。模块第一个界面是结

20、合数 位板绘成的仿儿童画风格色彩斑澜的四海之宝，演示海宝来了主题曲；第二个界面 绘成了生动有趣的林中“HaiBai Story海宝故事屋” ，集成漫画图册，并让用户在漫 画中与海宝亲密接触。 本设计特色之外在于在模块中各处适得其所地插入了学生用 Easy Paint Tool SAI 绘 制的彩图，以加强设计的个性色彩和可看性。 1.5工具选择 本课题的设计主要用 Director MX2004 集成展示，素材设计软件使用 Flash MX，Easy Paint Tool SAI, Photoshop CS3 共三款多媒体软件, 辅助软件有 K-Lite Codec Pack 解码器。 上海世

21、博园区多媒体景观制作实训 9 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 Director MX2004 是一款多媒体主流集成工具。本设计主要是用 Director 展示，在 模块设计、影音图片格式支持和动画交互方面都优于同类型软件。该软件结合了多种软 件的特点，在使用上类似于 FLASH。在 Director MX2004 中有帧的概念，也有对象的概 念，这些使得设计变的更加方便快捷，易于操作3。 Flash MX 是一款优秀的动画制作软件。支持大部分格式的图像和音频素材，具有 自制动画元件的功能，并能发布多种格式的影片4。本次设计中的动画效果全部使用 Flash 实现。 Easy

22、 Paint Tool SAI 是一种体积轻简，笔刷多样的绘图软件。结合数位板可以绘制 多图层多种风格的彩图和漫画。这是本设计中所有手绘图的支持软件。 Photoshop CS3 即大众熟知的 PS5。PS 在本设计中最主要的功能在于制作各种应 用于 Flash 的字体。同时，该软件优秀的图片处理能力也在截取动画素材方面有卓越表 现，是一款经典的图形处理辅助软件。 K-Lite Codec Pack 是一款多媒体解码器软件。支持网络上绝大多数视频音频流格式， 是保证视频音频顺利播放的解码工具。 绘图辅助工具：UGG Rainbow Smart 数位板 设计计算机：联想旭日 N440 笔记本 系

23、统支持：Windows 7(本机)兼容 Windows XP/2000（机房） 上海世博园区多媒体景观制作实训 10 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 2 制作的技术关键 2.1技术 1 Director 软件基础应用 2.1.1舞台（Stage） 首先启动 Director，新建一个 Movie，选择 FileNewMovie 命令。建立的 Movie 的 尺寸是默认的大小：320*240。Movie 的尺寸也就是舞台的有效尺寸，在通常情况下， 我们需要按照自己的情况设置舞台的大小和其他的一些属性。设置的方法是，激活舞台 窗口，此时现在在属性面板中的就是舞台的各种属性，可

24、以很方便地在其中进行设置3。 在属性面板的 Movie 选项卡中，首先选择影片的颜色系统，一般采用默认的当前系 统配色表：System Win；在第二项中，是设置影片的大小，可以通过右方的下拉列表 选择由系统默认的常用方案。在这里我们直接在宽和高两栏中输入希望的大小， 800*600。在接下来的“Stage Location”一栏中，可以设置最终打包后的舞台在桌面播 放时的位置，在后面的下拉列表中可以看到有居中、左上角和自定义三个选择，考虑到 最终用户桌面的大小不一定一样，在这里设置居中。在下面的“Stage Fill Color”是设 置舞台的颜色，通常情况下选择白色或者黑色的情况比较多，这

25、里我们保持它的默认设 置：白色。接下来是设置影片通道的数目，默认的是 150 个，在通常情况下足够我们使 用。在下面的扩展面板中，一部分是设置影片的颜色模式：是 RGB 真彩色还是索引色， 以及如何影射调色板。另一部分是影片内容和作者的信息。如果不喜欢这种图标的方式， 还可以单击右上方的列表按钮，让这些信息采用列表的方式排列。如图 2.1 略（因本文超过 26 兆，作为模板，部分图只能略） 图 2.1 Movie 的属性面板示意图 2.1.2演员表（Cast） 无论什么样的媒体素材，进入到 Director 中，都被称作演员。所以 Director 中演员 的种类非常多，在每个演员的右下放，都

26、有一个小标记，标明演员的种类。例如，位图 演员下面有个“画笔”的标识，文本演员下有个“A”的标识。这里我们常用的演员类 型有：位图演员；矢量图演员；Shape 演员；脚本演员；Field 演员；文本演员；表示 Flash 演员；表示 Behavior 演员；表示按钮演员；表示声音演员；QuickTime 电影演员； avi 演员；Loop 演员；转场演员；Dir 影片演员3。 Director 可以在一个电影中支持多达 3,2000 个演员的使用。如此庞大的演员阵容都 可以有序地组织在一个或多个演员表（Cast）中。 打开或关闭演员库（Cast）：执行菜单 Window/Toolbar 命令或

27、单击工具条上的 上海世博园区多媒体景观制作实训 11 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 按钮。打开的演员库如图 2.2 所示。 略（因本文超过 26 兆，作为模板，部分图只能略） 图 2.2 演员库 2.1.3分镜表（Score） 分镜表（Score）相当于导演的剧本，可谓是 Director 的核心。一个电影的好坏成败， 关键在于分镜表是否编排得当，是否构思巧妙。 打开或关闭分镜表（Score）：执行菜单 Window/Toolbar 命令或单击工具条上的 按钮。打开的分镜表如图 2.3 所示。 略（因本文超过 26 兆，作为模板，部分图只能略） 图 2.3 分镜表 2.

28、2技术 2 Easy Paint Tool SAI 的绘图技巧 2.2.1SAI 的工作界面 SAI 的界面类似于 Photoshop 和 Painter，支持多种笔刷，具有多图层功能，可以由 用户自己选择颜色和笔刷作画。点击文件新建文件确定，进入绘图。如图 2.4 略 图 2.4 SAI 的工作界面 2.2.2用 SAI 绘制多层彩图 1绘制线稿 连接数位板，安装光盘中的驱动，以方便手绘。打开 SAI，按上面所述步骤新建文 件，选择铅笔笔刷，颜色选择深灰色，绘制线稿。如图 2.5，2.6 和 2.7 所示： 图略 图略 图 2.5 选择铅笔笔刷 图 2.6 选择颜色深灰色 略 图 2.7 绘

29、制线稿 注意区分线稿与色彩图层，铅笔笔刷的颜色不透明，颜色如果上到线稿上，会掩盖 草图轮廓，不便于着色和修改线稿。例图 2.7，因此要特别注意分层绘画。 2.采用多图层叠加的方式给线稿着色 主要是用铅笔笔刷一笔一笔着色，再使用水彩笔笔刷对细节进行调和，依照轮廓和 光线的走向给人物和背影分开图层着色。着色过程如图 2.8 至图 2.10： 图略 图 2.8 上海世博园区多媒体景观制作实训 12 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 给人物上完色之后，可以点击图层上的图标，暂时隐藏人物的相关图层，这样更 方便为背影着色。 图略 图 2.9 上完背影颜色后，点击取消人物图层的隐藏，看

30、整体效果，进行细节修饰和调整。 如图 2.10： 图 2.10 最后，点击文件保存或者 Ctrl+S 保存为主菜单.png。 另外，用和纸笔笔刷可以绘制 Better 字体.png，如图 2.11： 图略 图 2.11 上海世博园区多媒体景观制作实训 13 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 3 设计 3.1总体设计 本次课题的设计部分将分为五个部分来展开，在围绕世博印象创意设计展示这一大 主题的同时，分别对世博揽胜、会徽之谜、东方之冠、精彩视频以及海宝故事这五个模 块进行展示。 3.1.1总体设计框架图 主菜单 世 博 揽 胜 会 徽 之 谜 东 方 之 冠 精 彩 视 频

31、 海 宝 故 事 图 3.1 课题总体框架图 3.1.2各模块设计框架图 1世博揽胜： 世博揽胜首页 园区交通图园区餐饮图节目单 返回主菜单 地铁线路布局美食一条街太平洋广场秀 返回首页返回首页返回首页 图 3.2 世博揽胜模块框架图 上海世博园区多媒体景观制作实训 14 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 2.会徽之谜： 会徽之谜首页 世博会徽创意理念 会徽设计遇到的问题 会徽设计过程 最终设计成果 志愿者之心 志愿者掠影 主线故事 支线故事 返回主菜单 返回首页 图 3.3 会徽之谜模块框架图 3.东方之冠： 东方之冠首页 东方之冠，以水相连 民间绝技，三斩斧 东方之冠，

32、科技为先 芙蓉帐暖，四月绽放 中国馆为什么那么红 返回首页 返回主菜单 图 3.4 东方之冠模块框架图 4.精彩视频： 上海世博园区多媒体景观制作实训 15 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 图 3.5 精彩视频播放列表 5.海宝故事： 海宝故事首页返回主菜单 海宝来了动画展示海宝漫画故事屋 返回首页 图 3.6 海宝故事模块框架图 3.1.3五大模块的首页设计 在“世博揽胜模块中为用户展示的是 2010 年上海世博会园区位置、交通地图、餐 饮地图和太平洋广场歌舞表演。通过该模块可以让用户从整体上了解世博会的概况，并 欣赏特色歌舞。 图略 图 3.7 “世博揽胜”首页 “会

33、徽之谜”讲述了两个关于会徽的故事。主页如图 3.8 图 3.8 “会徽之谜”首页 “东方之冠”旨在达到“一张画报映中国，半瓣荷上说世博”的效果。 图略 图 3.9 “东方之冠”首页 上海世博园区多媒体景观制作实训 16 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 “精彩视频”主页即播放界面，由用户自己选择要播放的视频： 图略 图 3.10 “精彩视频”首页 “海宝故事”童心无限： 图 3.11 “海宝故事”首页 3.2详细设计用 Director 集合所有素材 本次设计的题目是世博印象创意设计，在 Director 软件的支持下，本课题将分成五 个部分来介绍世博印象，它们分别是：“世

34、博揽胜” 、 “会徽之谜” 、 “东方之冠” 、 “精彩 视频” 、 “海宝故事” 。在这五个部分中将各有侧重的 2010 年上海世博会上作者的所见所 闻所想进行主题创意展示。 3.2.1主菜单界面详细设计 1、导入素材： file-import 或 Ctrl+R 导入主菜单相关素材：主菜单.swf，10 个 button 图片及城市畅 想.mp3 共 12 个素材。图 3.12 为导入路径图： 图略 图 3.12 主菜单界面制作导入路径 2.设计主菜单画面： 在 score 第 5 帧双击插入脚本：go the frame。因此，在第 5 帧时总是跳转到本帧画 上海世博园区多媒体景观制作实训

35、 17 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 面，视觉上获得停在第 5 帧的效果。 略 图 3.13 主菜单第 5 帧脚本图 将主菜单.swf、map.png、emb.png、china.png、vid.png、luck.png 五个 button1 号图 拖入舞台。将主菜单动画放在精灵通道 1，使背景动画总是显示在最底一层，主菜单. swf 的 sprite 属性设为 W：800，H：600，与 Movie 界面同样大小，可以布满整个画面。 Flash 属性勾选 loop，循环放映 swf 影片。其他属性保留默认设置。 3.插入 button 并添加脚本： 将“园区 butt

36、on1” ， “会徽 button1” ， “东方 button1” ， “精彩 button1” ， “海宝 button1”分别插入到精灵通道 2，3，4，5，6。在 stage 窗口调整这些图的位置，然后 对其点击右键在 script 中编写如下代码（即脚本）： on mouseEnter me cursor 280 -鼠标指针进入按钮时变为手形 sprite(2).member= member (“园区button2“ ) -切换为中文图标按钮 end on mouseLeave me cursor -1 -鼠标指针离开按钮时恢复为指针 sprite(2).member= member

37、 (“园区button1“) -切换为英文图标按钮 end on mouseUp me sprite(2).member= member (“园区button1“) -鼠标单击时变为英文图标按钮 end 这段代码能够实现的效果是：当鼠标浮移到 Map 图标上时，Map 图标转移为“园 区揽胜”中文字。如图 3.14： 图 3.14 鼠标进入 map 图标范围内时，图标变换 用同种方式制作其他 4 个按钮的鼠标效果。如图 3.15 至 3.18： 图 3.15 会徽之谜图标鼠标浮移效果 图 3.16 东方之冠图标鼠标浮移效果 上海世博园区多媒体景观制作实训 18 上海欧华职业技术学院 应用技术系

38、 毕业实训论文 张三 图 3.17 精彩视频图标鼠标浮移效果 图 3.18 海宝故事图标鼠标浮移效果 4.为主菜单动画和 button 添加淡出效果 在 Library 中选择 animation 里的 fade in out，拖放在精灵通道的各个精灵上，设置 主菜单 2s 后淡出，而 button 们 2.5s 后淡出，制造有顺序的淡出效果，增加视觉上的层 次感。 3.2.2“世博揽胜”模块详细设计 1.导入素材： 导入园区地图动画，交通图，餐饮图，节目单图，八大菜系图和 Tikivilige 表演视 频等素材。在时间轴第 10，11，12，13 和 14 帧分别插入脚本 go the fr

39、ame，使它们各 自保留在当前画面。 2.设计支系模块格局 在第 10 帧插入园区地图.swf，3 个 button 图标，长度均设置为 1 帧，调整演员在舞 台的位置。如图： 图略 图 3.19 世博揽胜交通地图 设置主页与支系链接：在交通图 button，餐饮图 button 和节目单 button 上分别插入 脚本：go frame 11，go frame 12，go frame 13。插入新建 button “Exit” ，设置脚本：go frame 1，点击返回主菜单。 在第 11 帧精灵通道 1 插入素材，根据舞台调整图片大小和位置。用插入新建 button “Exit” ，设置脚

40、本 go frame 10，显示长度第 11 帧到第 13 帧，用于点击返回揽胜 首页。 3.2.3 “会徽之谜”模块 1. 导入素材： Ctrl+R 导入相关素材，包括四张主要背景图及文字图片。分别为时间轴第 15 帧到 第 19 帧添加脚本：go the frame，使其停留在本帧画面。 2设计布局： 在第 15 帧精灵通道 1 放置精灵“沙滩”图片，精灵通道 2 放置精灵“会徽之谜” 上海世博园区多媒体景观制作实训 19 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 大字标题，Insert-Ctrol-Push Button 来制作一个 Exit button，设置脚本为：go

41、frame 1，用 于返回主菜单。同样增加 button“” ，用于链接到“会徽之谜”故事主线。具体演员 表如下： 略（因本文超过 26 兆，作为模板，部分图只能略） 图 3.20 会徽之谜素材与时间轴设计 图 3.21 “会徽之谜”模块中的 button 跳转设计 3.2.4“东方之冠”模块详细设计 1导入素材： 按照上文操作导入相关素材，包括 058.jpg（主页图） ，以水相连.png，科技为先. png，提早绽放.png，三斩斧.png，这么红.png，以及与 5 个小主题相对的 swf 动画文件， 另外，还有一张只有右下角有朵水墨云的 400*300 的透明 PNG 图片。如图 3.

42、22： 略（因本文超过 26 兆，作为模板，部分图只能略） 图 3.22 “东方之冠”演员表 2设计布局： 该模块的目的是实现“一角画报映中国，半瓣荷上说世博”的影画效果。在本模块 首页，当用户鼠标浮移到报纸某一主题内容时，画面中央会动态显示该主题的详细内容。 在技术上，当鼠标浮移到主题图片区域内时，通过脚本调用舞台上一张透明图片置换成 swf 动画来实现动态影画。 从素材库将 058.jpg 放在第 20 帧精灵通道 1，显示第 20 帧到 25 帧，透明度设为 80%， 上海世博园区多媒体景观制作实训 20 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 墨水（ink）属性设置为 c

43、opy。再分别在通道 2，3，4，5，6 插入一个报纸主题 PNG 图 片，在 stage 窗口中调整其位置。使图片和底图内容位置完全相符。这样可以使报纸底 图与主题触发图标看起来像一个整体，实现小主题的“隐形” 。在通道 7 插入水墨云.png 图片，设置为舞台中央，用于显示鼠标触发后的动画。Insert-Ctrol-Push Button 来制作一 个 Exit button，设置脚本为：go frame 1，用于返回主菜单；另外分别在第 21 帧 Insert- Ctrol-Push Button 制作 Exit button，设置脚本为：go frame 20，用于返回东方之冠首页。

44、如图 3.23： 略 图 3.23 “东方之冠”首页设计 3为精灵添加脚本： 布局设计好后，分别为画报中的五个小主题图标添加脚本。下面以“东方之冠-以 水相连”小主题脚本为例，说明动画的演示： on mouseEnter me cursor 280 -鼠标指针进入按钮时变为手形 sprite(7).member= member (“东方之冠-以水相连“ )-切换为深色字体按钮 end on mouseLeave me cursor -1 -鼠标指针离开按钮时恢复为指针 sprite(1).member= member (“058“ ) -切换为浅色字体按钮 sprite(6).member=

45、member (“以水相连“ ) sprite(7).member= member (“东方布景底色图“ )-置换成透明图片 end on mouseUp me go frame 21 end 添加脚本后，点击菜单栏上的按键测试运行，运行结果如图 3.24： 上海世博园区多媒体景观制作实训 21 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 图 3.24 “东方之冠，以水相连”主题展示 “科技为先” ， “提早绽放” ， “三斩斧” ， “中国馆为什么这么红”等其他 4 个小主题 也应用同样的方式来设计，在脚本上只有精灵的区别。设计最终结果如图 3.25 至 3.28 所示： 图 3.25 “东方之冠，三斩斧”主题展示 略 图 3.26 “东方之冠，科技为先”主题展示 上海世博园区多媒体景观制作实训 22 上海欧华职业技术学院 应用技术系 毕业实训论文