毕业实训论文上海世博园区多媒体景观制作实训

i 毕业实训论文 题目： 上海世博园区多媒体景观制作实训 专 业 计算机应用 班 级 10204152 学 号 1020411508 姓 名 张三 指 导 教 师 李四 2010 年 09 月 16 日 ii 目录 目录 .ii 1 绪论 .1 1.1 问题的提出 .1 1.2 课题研究意义 .1 1.3 课题调研 .3 1.4 总体介绍 .4 1.5 工具选择 .4 2 制作的技术关键 .6 2.1 技术 1 DIRECTOR 软件基础应用 .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.1 SAI 的工作界面 .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 “东方之冠”模块详细设计 .17 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 iii 3.5.3 “东方之冠”模块使用说明 .31 3.5.4 “精彩视频”模块使用说明 .31 3.5.5 “海宝故事”模块使用说明 .31 4 结论 .32 4.1 完成情况 .32 4.2 更进一步的学习 .32 4.3 心得体会 .33 致谢 .35 参考文献 .36 iv 摘要 中国 2010 年上海世界博览会（EXPO 2010） ，是第 41 届世界博览会。于 2010 年 5 月 1 日至 10 月 31 日期间，在中国上海市举行。此次世博会也是由中国 举办的首届世界博览会。上海世博会以“城市，让生活更美好” （BETTER CITY, BETTER LIFE）为主题，总投资达 450 亿人民币，创造了世界博览会史上最大规 模记录。 世博会将是上海城市发展的一个里程碑，上海作为以城市为主题的 2010 年 世界博览会的举办城市，有着特殊的意义。上海在筹备世博会的过程中，必然会 建造更多的优秀建筑，创建面向未来的住宅区，丰富城市发展的理念，完善并提 升城市功能，创造城市未来发展的模式，推动中国城市化进程。 本课题设计部分将使用 DirectorMX2004 来将课题中的各种资料，包括文字， 图片，视频以及声音等素材进行整理和组合。由此形成一系列演示作品，希望能 够以生动形象的方式将最美的世博印象展现给观众。 关键词： 梦幻挥之不去；盛况历历在目；创意设计；会展经济；文化产业。 v Abstract Chinas 2010 Shanghai world EXPO (EXPO 2010), is the 41st session of the world exposition.It held in Shanghai, China ,between 1 May and October 31 ,2010. This is the first world expo held in China. Shanghai world expo held a theme of BETTER CITY, BETTER LIFE ,with a total investment of 450 million yuan,Shanghai Expo has created the most large-scale records in the world expo history. The expo will be a milestone in the development of Shanghai, as a city for 2010 world expo, the host city get a special meaning. In the process of preparation for the world expo in Shanghai, it would build more excellent architecture, upgrade the city idea to create the future urban development of rich, perfect residential areas and the model, promoted urbanization process in China. The “Comic Expo2010” will use DirectorMX2004 to do sorting and combination of all kinds of material, including issues of words, images, video and voice material. I hope to show the most beatiful impression of Expo inShanghai to the audience. Keywords: Dream always round me; Significant front eyes one by one;Creative design; Exhibition economy ; Culture product. 1 绪论 在了解了本次设计的背景及意义之后，我们将进入到课题的正式设计制作之中，首 先我们将会对本课题问题的提出，本课题的意义以及使用到的相关工具等方面的内容进 行研究。 1.1 问题的提出 现在是一个开拓的多媒体作品得到充分运用的时代。多媒体元素充满了城市的各个 角落：网页中的广告，视频教学，互动演示，移动电视，银幕广告等。多媒体形式层出 不穷。作为计算机科学与技术专业，同时专业方向又是多媒体技术的学生，掌握一些多 媒体制作常识，尤其是能结合时代主题创作具有个性的特色作品，不仅是专业的要求， 而且是产业发展的实践性需要。 1.2 课题研究意义 通过对这个课题的设计与开发，可以了解并熟悉我眼中 2010 年上海世博会的精彩 内容。 作为与奥运会、世界杯比肩的世界三大盛会之一，世博会是对一个国家、一个城市 所取得的社会、经济、文化、科技等领域的最高成果的展示。 “一切始于世博 1” 这句广为传诵的名言，道出了一个多世纪以来世博会对创新的不懈追求。世 界 展 览 会 的 会 场 不 单 是 展 示 技 术 和 商 品 ， 而 且 伴 以 异 彩 纷 呈 的 表 演 ， 富 有 魅 力 的 壮 观 景 色 ， 设 置 成 日 常 生 活 中 无 法 体 验 的 、 充 满 节 日 气 氛 的 空 间 ， 成 为 一 般 市 民 娱 乐 和 消 费 的 理 想 场 所 。 首 先 ， 本 文 将 介 绍 中 国 与 世 博 会 历 史 （ 1851-1940） 。 中 国 第 一 个 看 到 “炫 奇 会 ”（ 世 博 会 ） 的 是 清 末 著 名 文 人 王 韬 。 1851年 的 英 国 伦 敦 首 届 博 览 会 ， 中 国 商 人 和 一 些 在 中 国 经 商 的 外 商 ， 将 丝 绸 、 茶 叶 、 中 药 等 中 国 传 统 商 品 拿 去 参 展 并 获 得 多 项 奖 项 。 1873年 的 维 也 纳 博 览 会 是 中 国 第 一 次 参 加 的 世 博 会 。 当 时 任 清 政 府 海 关 总 税 务 司 的 英 国 人 赫 德 曾 派 了 名 叫 包 腊 的 英 国 人 代 表 中 国 参 会 。 1876年 ， 中 国 海 关 代 表 李 圭 参 加 了 美 国 费 城 世 博 会 ， 写 下 了 环 游 地 球 新 录 一 书 。 此 举 也 被 称 为 是 中 国 参 加 世 博 会 之 始 。 在 这 次 博 览 会 上 ， 中 国 展 馆 占 地 仅 “八 千 正 方 尺 ”， 精 心 的 布 置 ， 以 浓 郁 的 中 华 民 族 特 色 吸 引 了 参 观 者 。 一 座 木 质 大 牌 楼 向 北 而 建 ， 上 书 “大 清 国 ”三 个 字 ， 对 联 一 副 ， 曰 “集 十 八 省 之 大 观 ， 天 工 可 夺 ； 庆 一 百 年 盛 会 ， 友 谊 斯 顿 ”， 横 批 为 “物 华 天 宝 ”。 中 国 参 展 的 商 品 共 计 有 720箱 ， 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 2 6801种 ， 价 值 约 白 银 20万 两 。 中 国 的 丝 、 菜 、 瓷 器 、 绸 货 、 雕 花 器 、 景 泰 蓝 等 在 各 国 展 品 中 被 推 为 第 一 。 1904年 美 国 圣 路 易 斯 世 博 会 是 中 国 首 次 以 官 方 形 式 率 领 商 人 正 式 参 加 的 世 博 会 。 当 时 清 政 府 相 当 重 视 参 展 ， 花 巨 资 修 建 了 具 有 浓 郁 民 族 风 格 的 中 国 村 和 中 国 展 馆 ， 并 派 出 了 溥 伦 和 黄 开 甲 分 任 正 副 团 长 的 政 府 正 式 代 表 团 出 席 开 幕 典 礼 。 1915年 巴 拿 马 太 平 洋 世 界 博 览 会 在 美 国 旧 金 山 举 行 。 当 时 的 中 华 民 国 政 府 建 造 的 中 华 政 府 馆 集 中 了 许 多 中 式 建 筑 结 构 ， 较 突 出 地 反 映 了 中 国 传 统 政 治 型 建 筑 的 特 色 ， 在 巴 拿 马 世 博 会 各 场 馆 中 有 一 定 的 典 型 性 和 观 赏 性 。 1926年 费 城 世 博 会 上 ， 中 国 以 生 丝 、 茶 叶 、 江 浙 绸 缎 、 江 西 瓷 器 、 福 建 漆 器 、 手 工 刺 绣 及 翡 翠 等 展 品 为 主 ， 具 有 中 华 民 族 特 色 。 1 通 过 了 解 中 国 参 展 世 博 会 的 历 史 ， 我 们 可 以 看 到 中 华 民 族 的 历 史 步 伐 ， 领 略 到 中 华 文 明 在 国 际 舞 台 上 的 鲜 明 个 性 。 现 代 新 中 国 与 世 博 会 的 交 往 是 不 断 向 前 推 进 的 。 从 1982年 至 2008年 ， 中 国 参 加 了 13次 综 合 类 和 专 业 类 世 界 博 览 会 。 2010年上海世界博览会（Expo 2010） ，是第41届 世界博览会。于2010年5月1日至10月31日期间，在中国上海市举行。此次世博会也是由 中国举办的首届世界博览会。上海世博会以“城市，让生活更美好” （Better City, Better Life）为主题，总投资达450 亿人民币，创造了世界博览会史上最大规模记录。 自 2002 年的摩纳哥蒙特卡洛上中国申请举办上海 2010 年世博会成功后，到 2010 年上海世博会正式举行，经过 8 年时间的建设与宣传，人们对世博会已是耳熟能详。 “2010 年上海世博会，将会告诉你关于城市的美好未来！”正如这句话本身一样，世博 会吉祥物“海宝” ；世博的“脊梁”世博轴；世博演艺中心“飞碟” ；璀璨升起 的中国国家馆“东方之冠” ；各具特色的世界展馆以及主题馆；现代城市发展优秀 案例城市最佳实践区除了这些矗立在世博园区的夺人眼球的建筑和世界仰止的 科技新秀之外，园区内亲切热情的志愿者“小白菜” ；欧洲广场、太平洋广场、美洲广 场、非洲广场和志愿者广场等几大广场的国际国内轮回驻场文艺演出以及欢乐盛装大巡 游，船鸼码头童趣盎然热闹非凡的剧场，亲水平台音乐喷泉每夜绽放织就绚丽舞曲，这 些都让中外游客流连忘返，印象深刻。上海世博会上有近 400 个展项，还有对主题有所 呈现的各种景观，各类论坛和两万场活动。所有这些项目，都好看、好玩，而且颇具内 涵、引人深思。不同的展览、活动、论坛，让你从不同地域文化和民族的视野，从国家、 地区、城市、企业、社会团体的不同角度，看到今天世界对于“城市”与“生活”问题 的解读。同时，电视、报纸、互联网等主流媒体对世博会的跟踪报道也让上海世博会成 为 2010 年的年度关键词。 现在，上海2010年世博会已经圆满闭幕，对世博的回忆和讨论却经久不息。人民日 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 3 报报道：“一届成功、精彩、难忘的世博会即将载入史册” ，中国青年报“经过世博洗 礼的一代被称为世博一代 ”，经济日报：“书写人类文明交流互鉴新篇章” ，东方早 报：“海内存知己，天涯若比邻”2媒体报道纷至沓来，潮水般介绍世博会闭幕盛况。 在世博会结束后，园区适合按照何种形态进行后续利用是一个万众关注的问题。上 海市政协曾表示极大关注，早在 2009 年就提出了相关建议。根据设想，世博会后，上 海应把园区定位为国际贸易功能集聚的高端商务园区，成为永不谢幕的会展、贸易集聚 之地。事实上，世博园区所有参展国家拟建展馆时都运用了环保材料，闭幕之后都会拆 除。 应市场要求和游客期望，中国国家馆延长开放时间，整歇后于2010年12月1日开始 到2011年5月30日为止重新开放参观2，给游客更多机会欣赏东方之冠的壮观和美丽。 在世博会这个百花齐放的多媒体舞台中，影视短片和数字动画起到举足轻重的宣传 作用。多媒体产业因此提升到一个新的高度，从世博园中众多移动媒体的 LED 显示屏 循环放映的多媒体作品上可见端倪。 世博印象创意设计是一个巨大的课题。一方面，本课题给学生广阔的创作空间，另 一方面，它又意味着学生必须推陈出新，以自己特有的方式组织已有的多媒体素材进行 再创作。纵观整个多媒体创作市场，高速发展的信息网络为学生们提供了大量免费可共 享的多媒体资源。如何结合自己的专业知识与技能来运用这些资源为毕业实训服务，向 用户传递个性世博印象，是一个不小的挑战，也是本次毕业实训中需要注重的问题。 1.3 课题调研 在对本课题的设计目的和意义有了一个初步了解之后，我们通过查阅和分析作者当 志愿者时留下的影音资料对世博会进行一个更加深入的认识。作为一名上海欧华学院的 园区志愿者，对世博园有别样的体会，这将会有助于今后的设计与制作。 2009 年 3 月，上海世博会志愿者网上报名启动，笔者马上报了名。经过一系列筛选 和测试，最终于 2009 年末确定成为园区志愿者候选人。 2010 年 3 月，作为候选人正式开始参加培训。世博理论知识、基础救护知识、世博 信息平台操作等等理论和实验训练结束后，2010 年 4 月 29 日，我们参加了世博会开幕 式演练，第一次进入世博园区进行实践观摩。接着是 2 个月的信息理论等测试，直到 2010 年 7 月 12 日，我们进入园区成为世博园 B 片区太平洋联合馆南侧遮阳伞前岗上志 愿者，主要工作为非活动期间问询。就这样，我开始真正的世博之旅。 一年多的新闻跟踪调研及两周实地考察体验“小白菜”生活，我们看到了许多从未 了解过的美丽世博园，接触了许多优秀的志愿工作者，从而对上海世博会有了更加深刻 的体会。尤其是太平洋区域联合馆多元化文明，其缤纷的历史色彩，热情的人文交流， 都令人目不暇接，眼花缭乱。因此，本次毕业实训课题既是专业技巧的挑战，也是对我 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 4 们世博之旅的总结和纪念。这种特殊的经历为我们设计中视角和模式探讨增加了个性色 彩。经过对世博官方资料以及个人影集资料的总结分析，我们确定了制作世博揽胜、会 徽之谜、东方之冠、精彩视频和海宝故事五大主要模块，然后在此基础之上对各模块内 容进行详细创意设计，以求给用户最佳的世博印象。 1.4 总体介绍 在本设计中将针对世博会设计从主菜单链接五个主题模块，再从各主题细分为相关 主题内容展示。展示内容包括影视作品、精美手绘、欢乐音频、动感彩图等与主题相关 素材的集成。 主菜单界面是绘图软件结合数位板手绘的彩图制作成 flash 动画循环演示。主菜单 上将显示 5 个按钮分别指引用户前往“园区揽胜” 、 “会徽之谜” 、 “东方之冠” 、 “精彩视 频”和“海宝故事”主题模块。 其中， “世博揽胜Map”展示 2010 年上海世博会地理概况，包括园区交通地图， 餐饮地图和节目单图。特色项目是太平洋舞台歌舞实况纪录。 “会徽之谜Emb”模块主线是以忆海拾贝的叙述方式，演绎世博会徽的形成过 程，带领用户走近会徽，体验会徽图形美感与城市生活主题的融合过程。除主线之外， 支线故事是志愿者标志的设计及“小白菜”之旅的照片展示，让用户在各种徽章中感受 世博的人文气息和青春活力。 “东方之冠China”模块是一个以中国国家馆为主题的模块。本模块意在以 “画中乾坤”的方式展示东方之冠的故事。 “精彩视频Vid”用蓝调风格影院的方式让用户欣赏世博会的精彩官方宣传片。 播放列表上所有影片来源于上海世博会园区志愿者读本 ，集合了从申博到世博会成 功举办的一系列宣传视频，带给用户快捷方便的视听感受。 “海宝故事Luck”模块是一个充满童趣色彩的模块。模块第一个界面是结合数 位板绘成的仿儿童画风格色彩斑澜的四海之宝，演示海宝来了主题曲；第二个界面 绘成了生动有趣的林中“HaiBai Story海宝故事屋” ，集成漫画图册，并让用户在漫 画中与海宝亲密接触。 本设计特色之外在于在模块中各处适得其所地插入了学生用 Easy Paint Tool SAI 绘 制的彩图，以加强设计的个性色彩和可看性。 1.5 工具选择 本课题的设计主要用 Director MX2004 集成展示，素材设计软件使用 Flash MX，Easy Paint Tool SAI, Photoshop CS3 共三款多媒体软件, 辅助软件有 K-Lite Codec Pack 解码器。 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 5 Director MX2004 是一款多媒体主流集成工具。本设计主要是用 Director 展示，在 模块设计、影音图片格式支持和动画交互方面都优于同类型软件。该软件结合了多种软 件的特点，在使用上类似于 FLASH。在 Director MX2004 中有帧的概念，也有对象的概 念，这些使得设计变的更加方便快捷，易于操作3。 Flash MX 是一款优秀的动画制作软件。支持大部分格式的图像和音频素材，具有 自制动画元件的功能，并能发布多种格式的影片4。本次设计中的动画效果全部使用 Flash 实现。 Easy Paint Tool SAI 是一种体积轻简，笔刷多样的绘图软件。结合数位板可以绘制 多图层多种风格的彩图和漫画。这是本设计中所有手绘图的支持软件。 Photoshop CS3 即大众熟知的 PS5。PS 在本设计中最主要的功能在于制作各种应 用于 Flash 的字体。同时，该软件优秀的图片处理能力也在截取动画素材方面有卓越表 现，是一款经典的图形处理辅助软件。 K-Lite Codec Pack 是一款多媒体解码器软件。支持网络上绝大多数视频音频流格式， 是保证视频音频顺利播放的解码工具。 绘图辅助工具：UGG Rainbow Smart 数位板 设计计算机：联想旭日 N440 笔记本 系统支持：Windows 7( 本机)兼容 Windows XP/2000（机房） 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 6 2 制作的技术关键 2.1 技术 1 Director 软件基础应用 2.1.1 舞台（Stage） 首先启动 Director，新建一个 Movie，选择 FileNewMovie 命令。建立的 Movie 的 尺寸是默认的大小：320*240。Movie 的尺寸也就是舞台的有效尺寸，在通常情况下， 我们需要按照自己的情况设置舞台的大小和其他的一些属性。设置的方法是，激活舞台 窗口，此时现在在属性面板中的就是舞台的各种属性，可以很方便地在其中进行设置3。 在属性面板的 Movie 选项卡中，首先选择影片的颜色系统，一般采用默认的当前系 统配色表：System Win；在第二项中，是设置影片的大小，可以通过右方的下拉列表 选择由系统默认的常用方案。在这里我们直接在宽和高两栏中输入希望的大小， 800*600。在接下来的“Stage Location”一栏中，可以设置最终打包后的舞台在桌面播 放时的位置，在后面的下拉列表中可以看到有居中、左上角和自定义三个选择，考虑到 最终用户桌面的大小不一定一样，在这里设置居中。在下面的“Stage Fill Color”是设 置舞台的颜色，通常情况下选择白色或者黑色的情况比较多，这里我们保持它的默认设 置：白色。接下来是设置影片通道的数目，默认的是 150 个，在通常情况下足够我们使 用。在下面的扩展面板中，一部分是设置影片的颜色模式：是 RGB 真彩色还是索引色， 以及如何影射调色板。另一部分是影片内容和作者的信息。如果不喜欢这种图标的方式， 还可以单击右上方的列表按钮，让这些信息采用列表的方式排列。如图 2.1 略（因本文超过 26 兆，作为模板，部分图只能略） 图 2.1 Movie 的属性面板示意图 2.1.2 演员表（Cast） 无论什么样的媒体素材，进入到 Director 中，都被称作演员。所以 Director 中演员 的种类非常多，在每个演员的右下放，都有一个小标记，标明演员的种类。例如，位图 演员下面有个“画笔”的标识，文本演员下有个“A ”的标识。这里我们常用的演员类 型有：位图演员；矢量图演员；Shape 演员；脚本演员；Field 演员；文本演员；表示 Flash 演员；表示 Behavior 演员；表示按钮演员；表示声音演员；QuickTime 电影演员； avi 演员；Loop 演员；转场演员； Dir 影片演员3。 Director 可以在一个电影中支持多达 3,2000 个演员的使用。如此庞大的演员阵容都 可以有序地组织在一个或多个演员表（Cast）中。 打开或关闭演员库（Cast）：执行菜单 Window/Toolbar 命令或单击工具条上的 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 7 按钮。打开的演员库如图 2.2 所示。 略（因本文超过 26 兆，作为模板，部分图只能略） 图 2.2 演员库 2.1.3 分镜表（Score） 分镜表（Score）相当于导演的剧本，可谓是 Director 的核心。一个电影的好坏成败， 关键在于分镜表是否编排得当，是否构思巧妙。 打开或关闭分镜表（Score）：执行菜单 Window/Toolbar 命令或单击工具条上的 按钮。打开的分镜表如图 2.3 所示。 略（因本文超过 26 兆，作为模板，部分图只能略） 图 2.3 分镜表 2.2 技术 2 Easy Paint Tool SAI 的绘图技巧 2.2.1 SAI 的工作界面 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 绘制线稿 注意区分线稿与色彩图层，铅笔笔刷的颜色不透明，颜色如果上到线稿上，会掩盖 草图轮廓，不便于着色和修改线稿。例图 2.7，因此要特别注意分层绘画。 2.采用多图层叠加的方式给线稿着色 主要是用铅笔笔刷一笔一笔着色，再使用水彩笔笔刷对细节进行调和，依照轮廓和 光线的走向给人物和背影分开图层着色。着色过程如图 2.8 至图 2.10： 图略 图 2.8 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 8 给人物上完色之后，可以点击图层上的 图标，暂时隐藏人物的相关图层，这样更 方便为背影着色。 图略 图 2.9 上完背影颜色后，点击取消人物图层的隐藏，看整体效果，进行细节修饰和调整。 如图 2.10： 略 图 2.10 最后，点击文件保存或者 Ctrl+S 保存为主菜单.png。 另外，用和纸笔笔刷可以绘制 Better 字体.png，如图 2.11： 图略 图 2.11 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 9 3 设计 3.1 总体设计 本次课题的设计部分将分为五个部分来展开，在围绕世博印象创意设计展示这一大 主题的同时，分别对世博揽胜、会徽之谜、东方之冠、精彩视频以及海宝故事这五个模 块进行展示。 3.1.1 总体设计框架图 主菜单 世 博 揽 胜 会 徽 之 谜 东 方 之 冠 精 彩 视 频 海 宝 故 事 图 3.1 课题总体框架图 3.1.2 各模块设计框架图 1世博揽胜： 世博揽胜首页 园区交通图 园区餐饮图 节目单 返回主菜单 地铁线路布局 美食一条街 太平洋广场秀 返回首页返回首页 返回首页 图 3.2 世博揽胜模块框架图 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 10 2.会徽之谜： 会徽之谜首页 世博会徽创意理念 会徽设计遇到的问题 会徽设计过程 最终设计成果 志愿者之心 志愿者掠影 主线故事 支线故事 返回主菜单 返回首页 图 3.3 会徽之谜模块框架图 3.东方之冠： 东方之冠首页 东方之冠，以水相连 民间绝技，三斩斧 东方之冠，科技为先 芙蓉帐暖，四月绽放 中国馆为什么那么红 返回首页 返回主菜单 图 3.4 东方之冠模块框架图 4.精彩视频： 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 11 图 3.5 精彩视频播放列表 5.海宝故事： 海宝故事首页 返回主菜单 海宝来了动画展示 海宝漫画故事屋 返回首页 图 3.6 海宝故事模块框架图 3.1.3 五大模块的首页设计 在“世博揽胜模块中为用户展示的是 2010 年上海世博会园区位置、交通地图、餐 饮地图和太平洋广场歌舞表演。通过该模块可以让用户从整体上了解世博会的概况，并 欣赏特色歌舞。 图略 图 3.7 “世博揽胜”首页 “会徽之谜”讲述了两个关于会徽的故事。主页如图 3.8 图 3.8 “会徽之谜”首页 “东方之冠”旨在达到“一张画报映中国，半瓣荷上说世博”的效果。 图略 图 3.9 “东方之冠”首页 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 12 “精彩视频”主页即播放界面，由用户自己选择要播放的视频： 图略 图 3.10 “精彩视频”首页 “海宝故事”童心无限： 图略 图 3.11 “海宝故事”首页 3.2 详细设计用 Director 集合所有素材 本次设计的题目是世博印象创意设计，在 Director 软件的支持下，本课题将分成五 个部分来介绍世博印象，它们分别是：“世博揽胜” 、 “会徽之谜” 、 “东方之冠” 、 “精彩 视频” 、 “海宝故事” 。在这五个部分中将各有侧重的 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 帧时总是跳转到本帧画 面，视觉上获得停在第 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 并添加脚本： 将“园区 button1”， “会徽 button1”， “东方 button1”， “精彩 button1”， “海宝 button1”分别插入到精灵通道 2，3，4，5，6。在 stage 窗口调整这些图的位置，然后 对其点击右键在 script 中编写如下代码（即脚本）： on mouseEnter me 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 13 cursor 280 -鼠标指针进入按钮时变为手形 sprite(2).member= member (园区button2 ) -切换为中文图标按钮 end on mouseLeave me cursor -1 -鼠标指针离开按钮时恢复为指针 sprite(2).member= member (园区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 东方之冠图标鼠标浮移效果 图 3.17 精彩视频图标鼠标浮移效果 图 3.18 海宝故事图标鼠标浮移效果 4.为主菜单动画和 button 添加淡出效果 在 Library 中选择 animation 里的 fade in out，拖放在精灵通道的各个精灵上，设置 主菜单 2s 后淡出，而 button 们 2.5s 后淡出，制造有顺序的淡出效果，增加视觉上的层 次感。 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 14 3.2.2 “世博揽胜”模块详细设计 1.导入素材： 导入园区地图动画，交通图，餐饮图，节目单图，八大菜系图和 Tikivilige 表演视 频等素材。在时间轴第 10，11，12，13 和 14 帧分别插入脚本 go the frame，使它们各 自保留在当前画面。 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”，设置脚本 go frame 10，显示长度第 11 帧到第 13 帧，用于点击返回揽胜 首页。 3.2.3 “会徽之谜”模块 1. 导入素材： Ctrl+R 导入相关素材，包括四张主要背景图及文字图片。分别为时间轴第 15 帧到 第 19 帧添加脚本：go the frame，使其停留在本帧画面。 2设计布局： 在第 15 帧精灵通道 1 放置精灵“沙滩”图片，精灵通道 2 放置精灵“会徽之谜” 大字标题，Insert-Ctrol-Push Button 来制作一个 Exit button，设置脚本为：go frame 1，用 于返回主菜单。同样增加 button“”，用于链接到“会徽之谜”故事主线。具体演员 表如下： 略（因本文超过 26 兆，作为模板，部分图只能略） 图 3.20 会徽之谜素材与时间轴设计 图 3.21 “会徽之谜”模块中的 button 跳转设计 3.2.4 “东方之冠”模块详细设计 1导入素材： 按照上文操作导入相关素材，包括 058.jpg（主页图） ，以水相连.png，科技为先. 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 15 png，提早绽放.png，三斩斧.png，这么红.png，以及与 5 个小主题相对的 swf 动画文件， 另外，还有一张只有右下角有朵水墨云的 400*300 的透明 PNG 图片。如图 3.22： 略（因本文超过 26 兆，作为模板，部分图只能略） 图 3.22 “东方之冠”演员表 2设计布局： 该模块的目的是实现“一角画报映中国，半瓣荷上说世博”的影画效果。在本模块 首页，当用户鼠标浮移到报纸某一主题内容时，画面中央会动态显示该主题的详细内容。 在技术上，当鼠标浮移到主题图片区域内时，通过脚本调用舞台上一张透明图片置换成 swf 动画来实现动态影画。 从素材库将 058.jpg 放在第 20 帧精灵通道 1，显示第 20 帧到 25 帧，透明度设为 80%， 墨水（ink）属性设置为 copy。再分别在通道 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，用于返回东方之冠首页。 如图 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= member (以水相连 ) sprite(7).member= member (东方布景底色图 )-置换成透明图片 end on mouseUp me go frame 21 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 16 end 添加脚本后，点击菜单栏上的 按键测试运行，运行结果如图 3.24： 略 图 3.24 “东方之冠，以水相连”主题展示 “科技为先” ， “提早绽放” ， “三斩斧” ， “中国馆为什么这么红”等其他 4 个小主题 也应用同样的方式来设计，在脚本上只有精灵的区别。设计最终结果如图 3.25 至 3.28 所示： 略 图 3.25 “东方之冠，三斩斧”主题展示 略 图 3.26 “东方之冠，科技为先”主题展示 略 图 3.27 “东方之冠，提早绽放”主题展示 略 图 3.28 “东方之冠，中国馆为何这么红”主题展示 3.2.5 “精彩视频”模块详细设计 1导入素材： 导入素材至演员表。本模块素材包括：精彩视频背景框.png，打碟动画. gif，Movieday.gif 等几个装饰动画， 4 组 button 图标和 9 个官方宣传视频。 略（因本文超过 26 兆，作为模板，部分图只能略） 图 3.29 “精彩视频”演员表 2创建视频列表 List： 在工具栏（Tools）中点击下标小三角，切换为 flash component，如图 3.30： 略（因本文超过 26 兆，作为模板，部分图只能略） 图 3.30 flash component 工具栏 然后鼠标左键点击 list 工具，在 Stage 中拖出矩形列表。并在右边属性栏的 labels 标签中填写播放清单，格式如： 跳房子篇世博宣传片, 各民族迎世博, 城市标 徽篇, 城市报时篇, 城市漫游宣传片, 城市畅想 , 不出国门，看遍世界, 城市文明 的盛会, 海宝宣传 。 略（因本文超过 26 兆，作为模板，部分图只能略） 图 3.31 列表属性设置 图略 图 3.32 舞台上的 List 菜单效果 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 17 3视频控制按钮说明： 该模块共设置“播放” ， “暂停” ， “循环” ， “关闭”4 个按钮。功能分别是：单击 “播放”键播放视频；单击“暂停”键暂停视频播放；单击“循环”键回复到影片开头， 单击“关闭”键关闭当前播放中的视频。 在视觉上，要实现当鼠标浮移到按钮范围内时，按钮变成暗色效果以示区分。因此， 4 个按钮图片都做成 2 个图片一组，一共 8 个 button 图标。设计时将第一状态图片放置 在舞台，利用脚本调用当鼠标移入 button 范围时，立即将第一状态图（浅色图标）所在 通道的精灵置换成第二状态图（深色图标） ；当鼠标离开 button 范围时，button 恢复到 第一状态（浅色图标） 。如图 3.33： 图 3.33 播放按钮的两种状态组图 4设计页面布局并为演员们添加脚本： 整个页面设计布局力求简洁现代感，使用 SAI 绘制的暗色光影背景图和相应的动画 素材，在时间轴的设置上要注意各个演员的出场顺序，遵循先进先出原则。依次替演员 们编写脚本如下： 视频播放菜单（selectedindex ）的脚本： on mouseup me case sprite(6).selectedindex of 0:sprite(5).member=member(跳房子篇世博宣传片)-切换 MV sprite(5).ink=0 1:sprite(5).member=member(各民族迎世博)-切换 MV sprite(5).ink=0 2:sprite(5).member=member(城市标徽篇)-切换 MV sprite(5).ink=0 3:sprite(5).member=member(城市报时篇)-切换 MV sprite(5).ink=0 4:sprite(5).member=member(城市漫游篇宣传片)-切换 MV sprite(5).ink=0 5:sprite(5).member=member(城市的畅想)-切换 MV sprite(5).ink=0 6:sprite(5).member=member(不出国门看遍世界)-切换 MV sprite(5).ink=0 7:sprite(5).member=member(城市文明的盛会)-切换 MV 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 18 sprite(5).ink=0 8:sprite(5).member=member(海宝宣传)-切换 MV sprite(5).ink=0 end case end “播放”按钮第一状态图（ideoplay_button1）脚本： on mouseEnter me cursor 280 -鼠标指针进入按钮时变为手形 sprite(8).member= member (videoplay_button2 ) -切换为深色字体按钮 end on mouseLeave me cursor -1 -鼠标指针离开按钮时恢复为指针 sprite(8).member= member (videoplay_button1) -切换为浅色字体按钮 end on mouseUp me sprite(8).member= member (videoplay_button1) -鼠标单击时变为浅色字体按 钮 member(海宝宣传).loop = member(videoloop_button1).hilite sound(5).queue(member(list) sprite(5).play() end “暂停”按钮第一状态图 videopause_button 1）脚本： on mouseEnter me cursor 280 -鼠标指针进入按钮时变为手形 sprite(9).member= member (videopause_button2 ) -切换为深色字体按钮 end on mouseLeave me cursor -1 -鼠标指针离开按钮时恢复为指针 sprite(9).member= member (videopause_button1) -切换为浅色字体按钮 end on mouseUp me sprite(9).member= member (videopause_button1) -鼠标单击时变为浅色字体按钮 sprite(5).pause() end 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 19 “循环”按钮第一状态图（videoloop_button1）脚本： on mouseEnter me cursor 280 -鼠标指针进入按钮时变为手形 sprite(10).member= member (videoloop_button2 ) -切换为深色字体按钮 end on mouseLeave me cursor -1 -鼠标指针离开按钮时恢复为指针 sprite(10).member= member (videoloop_button1) -切换为浅色字体按钮 end on mouseUp me sprite(10).member= member (videoloop_button1) -鼠标单击时变为浅色字体按 钮 end “关闭”按钮第一状态图（videoclose_button1 ）脚本： on mouseEnter me cursor 280 -鼠标指针进入按钮时变为手形 sprite(11).member= member (videoclose_button2 ) -切换为深色字体按钮 end on mouseLeave me cursor -1 -鼠标指针离开按钮时恢复为指针 sprite(11).member= member (videoclose_button1) -切换为浅色字体按钮 end on mouseUp me sprite(11).member= member (videoclose_button1) -鼠标单击时变为浅色字体按钮 sprite(5).member=member() end 最后插入制作一个 Exit button 在页面右下角，脚本为 go frame 1，用于点击返回主 菜单首页。如图 3.34： 略 图 3.34 “精彩视频”整体页面设计 3.2.6 “海宝故事”模块详细设计 1导入素材： Ctrl+R 导入素材，包括海宝背景框.png，海宝来了.mv，海宝来了.mp3，海宝表情 数款，海盗船.gif，人物角色图.gif 等与模块相关的素材。在第 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 20 29，30，31，32，33，34，35 帧分别添加脚本：go the frame，保证这一模块 7 帧每一 帧都停留在本帧，由 button 来控制时间轴的跳转。 2模块设计与布局： 本模块目标在于展示世博吉祥物“海宝”的可爱魅力。我们借助热播动画海 宝来了和清新活泼的动态图集成来讲述海宝的故事。在第 29 帧精灵通道依次插入演 员。为使海宝潜水的动画正好在背景框图的气泡中显示，将潜水动画放在通道 1，背景 叠放在动画之上，放在精灵通道 2，按这种原则，本模块 score 图如图 3.35： 略（因本文超过 26 兆，作为模板，部分图只能略） 图 3.35 “海宝来了”模块时间轴设计 略 图 3.36 “海宝来了”首页与故事页面设计 略 图 3.37 结束页面设计 3.3 详细设计案例多媒体素材的制作 3.3.1 案例 1：“接天莲叶无穷碧，映日荷花别样红”影片制作 1用 Photoshop 制作美术字体素材： 打开 Photoshop CS3，新建文件，大小为 760*560 像素，背景为白色。鼠标左键点 击工具栏中的文字工具 ，输入“接天莲叶无穷碧， ”和“映日荷花别样红”并根据 设计版面调整字体大小，效果如图 3.38： 图 3.38 “接天莲叶无穷碧，映日荷花别样红”字体设计 接着，为字体添加修饰。打开一张“蓝人鱼”图片素材，用魔棒 工具抠出人鱼 围绕的边框；点击菜单中的“编辑”“自由变换”来调整图形大小；如图 3.39： 图略 图 3.39 “蓝人鱼”相框素材的修改处理 选择“图像”“调整”“色彩平衡”来调整色彩偏向暖色，如图 3.40： 上海世博园区多媒体景观制作实训 上海欧华职业技术学院 应用技术系 毕业实训论文 张三 21 略（因本文超过 26 兆，作为模板，部分图只能略） 图 3.40 色彩平衡的调整 应用到“接天莲叶无穷碧，映日荷花别样红”的“红”字上去装饰，再用“画笔” 工具点缀字体，绘制出荷叶荷花交相辉映的影子，最终效果如图 3.41： 图 3.41 “接天莲叶无穷碧，映日荷花别样红”美术字设计展示 点击“文件”“保存” ，格式为 PNG，作为“东方之冠，提早绽放 ”的字体素材。 大段的“芙蓉帐暖，提早绽放”的新闻内容也同样可以用 PS 制作成 PNG 格式的图 片素材，只是文字方向上要选择“直排文字工具” 。如图 3.42： 略 图 3.42 新闻内容图片素材展示 2制作“提早绽放”的 flash 动画： 打开 Flash MX，选择“ 文件”“新建”“flash 文档” ，大小设置为 760*580， 背景颜色参考宣纸的颜色，选择淡黄。如图 3.43： 略（因本文超过 26 兆，作为模板，部分图只能略） 图 3.43 文档属性面板 选择“文件”“导入”“导入到库”导入荷花图片，字体素材以及国画动画。 点击图层栏下的新建图层按钮 新建图层，命名为“碧荷” ；从库中将碧荷图片放 在第 1 帧；在时间轴第 10 帧和 20 帧插入关键帧，添加补间，并修改第 1 帧和第 20 帧 时， “碧荷”图片 Alpha 属性数值为 0%，创造淡入淡出效果。如图 3.44： 图 3.44 修改 Alpha