非遗电子读物设计 交互平台综合应用 交互平台综合应用.docVIP

交互平台综合应用 设计团队：张满 李迎 赵玥 邓立营 【情景化描述】本案例向浏览者介绍中国山水画信息的电子读物。 【学习重点】 （1）根据项目内容确定互动媒体产品风格 （2）界面设计整体把握 （3）综合运用所学flash知识完成片头、片尾动画设计及交互式导航制作 （4）熟练运用flash与director两个软件完成互动项目 【制作流程】 【主要步骤】 1.界面设计 设计者对界面进行了精心设计，主页面以中国山水画元素为背景，采用了光影随即移动显示图像的设计方法，营造了一种中国元素的形象特征和视觉语言表现。作品中各种界面设计也都体现了形式风格的统一、图文排列有序、层次分明、主题形象突出、色彩和谐、典雅的特点。充分运用了多种媒体形式和视听语言，生动的向人们展示和传播了中国山水画。作品主题鲜明，内容丰富、风格突出，设计制作精美，交互功能设计科学，给用户以愉悦的用户体验。作品具有很强的艺术感染力。很好的展现了中国文化。如图6-40、41、42、43所示。 图6-40片头视频界面 图6-41 主界面设计 图6-42 次级界面设计 图6-43 三级界面设计 2.设计制作片头、片尾动画 （1）片头动画设计与制作 该作品片头动画由Premire与Flash软件共同配合完成。其中水墨风格的水滴效果由Premire中的滤镜功能完成。动画效果由Flash动画中的传统补间与遮罩层动画完成。 （2）片尾动画设计与制作 作品片尾动画由Flash软件完成。主要是由水墨风格的背景色与文字搭配构成画面元素，为突出文字的可视性，在背景图上设置了白色办透明底色。动画主要由文字的自下而上的补间动画组成。如图6-44所示。为突显片尾动画的节奏感，在补间中添加的缓动值，如图6-45所示。 【说明】缓动值是正数情况下，数值越大动画节凑越缓慢；缓动值是负数的情况下，数值越大节奏越快速。 图6-44 文字的自下而上的补间动画 图6-45 调节补间动画缓动值 3.设计制作交互式导航 （1）整体思路 导航背景采用整幅山水画图像自画面右面缓慢往左移动的动画。导航按钮用朝代的首字为主要元素，动态效果采用鼠标滑过分别出现笔墨纸砚具象形态导航的效果。 （2）制作流程 1）导航背景自右至左移动补间动画，为确保动画首尾不出现跳帧状态，将背景图复制一张，并做镜像处理，贴在第一个图的右面。如图6-46所示。 图6-46 右半边图像为镜像图 2）将四个按钮素材导入场景中，依次放置在舞台上，每个图层放一张图像，调整其大小及位置，并转化为影片剪辑。如图6-47所示。 图6-47将四个按钮素材导入场景中 3)新建“按钮模糊层”在第5、10、15、20帧依次插入关键帧，每一帧上放置4个按钮图，并转化为影片剪辑，其中当前按钮是清晰，其他三个按钮添加模糊滤镜效果。如图6-48所示。 图6-48新建“按钮模糊层” 4）建立双击打开影片剪辑，建立按钮放大补间动画，并在最后一帧添加停止动作。如图6-49所示。 图6-49 按钮放大补间动画 5）新建一层，在最后一帧插入关键，将文字粘贴到当前位置，并转化为影片剪辑。双击打开影片剪辑，制作毛笔写字遮罩层动画。如图6-50所示。 图6-50 毛笔写字遮罩层动画 6) 并为4个关键帧添加标记为“fa、fb、fc、fd”,并在每个关键帧上添加停止。如图6-51所示。 图6-51 添加帧标记 7）新建一层，为四个按钮图像添加透明按钮，如图6-52所示。并添加实现鼠标滑过按钮变大并执行动作的命令。如图6-53所示。用同样的方法完成其他三个按钮放大动画的制作及代码的加载。 图6-52 添加透明按钮 图6-53 添加实现鼠标滑过的代码 【说明】导航按钮在白色背景下制作，便于导入director中后实现背景透明和鼠标制作变为手指。 4.次级界面动态元素设计 （1）次级界面导航为新建元件中的按钮，如图6-54所示。在鼠标指针经过处，转化为影片剪辑，双击打开后完成动画效果制作，并在最后一帧添加停止。如图6-55所示。 图6-54 次级界面按钮 图6-55 次级界面按钮指针经过动画 （2）次级界面作品展示页面动画由补间动画和遮罩层动画制作出文字缓缓出现的效果。如图6-56所示。 图6-56 次级界面作品展示页面 5.整体交互设计整合 (1)建立片头director文件。新建director文档，设置尺寸为1028*700，将片头视频导入。第30帧处给“点击进入”按钮绘制透明热区，给热区添加将鼠标指针更改为手指的行为。如图6-57所示。 图6-58 建立片头director文件 2）建立导航director文件。将导航页面导入director中，第1帧添加停止命令，四个按钮绘制透明热区，给热区添加将鼠标指针更改为手指的行为。如图6-