资源描述
#,1,P,art,9,第,9,章 网站,Flash,引导页面制作,2,目标概述,案例效果,学习,目标,网站引导页面动画是网站的品牌和理念的最佳的演示,要在充分了解客户想要表达的概念或者价值观念的基础上,制作出具有出色的创意同时符合网络的要求的动画效果。本项目就是为常州工程职业技术学院的学院网站制作引导页面,。,3,知识导航,设 计 思 路,9.1,5,根据,网站的页面设计,引导页面具体的设计思路如下:,1.字动画,(1)屏幕居中“常州工程职业技术学院”标记文字由大且模糊逐渐变小且清晰,最终消失;,(2)屏幕左上角的“常州工程职业技术学院”Logo由模糊逐渐变清晰;,(3)“常州工程职业技术学院”Logo下方延展出一条白线;,(4)白线下方显示“常州工程职业技术学院”的英文缩写(遮罩效果);,(5)居中显示的图片上下方出现白线移动效果。,6,2.图片动画,(1)屏幕居中展示一幅“常州工程职业技术学院”校园景色的图片;,(2)图片右侧依次出现“图片按钮”,。,3.添加按钮脚本,(1)单击“图片按钮”能切换到展示“常州工程职业技术学院”的其他校园图片;,(2)单击“skip”文字按钮能跳过引导页面动画,进入到网站首页面。,项 目 实 施,9.2,8,任务说明,效果展示,实现引导页面的文字动画效果。,(1)屏幕居中“常州工程职业技术学院”标记文字由大且模糊逐渐变小且清晰,最终消失;,(2)屏幕左上角的“常州工程职业技术学院”Logo由模糊逐渐变清晰;,(3)“常州工程职业技术学院”Logo下方延展出一条白线;,(4)白线下方显示“常州工程职业技术学院”的英文缩写(遮罩效果);,(5)居中显示的图片上下方出现白线移动效果。,任务1 制作文字动画效果,9,任务,2,制作图片动画效果,任务说明,效果展示,实现图片动画效果。,(1)屏幕居中展示一幅“常州工程职业技术学院”校园景色的图片;,(2)图片右侧依次出现“图片按钮”。,10,任务,3,添加按钮脚本,制作按钮图片切换动画效果,任务说明,添加按钮脚本,(1)单击“图片按钮”能切换到展示“常州工程职业技术学院”的其他图片;,(2)单击“skip”文字按钮能跳过引导页面动画,进入到网站首页面。,经 验 指 导,9.3,12,相关知识,网站的引导页面通常是起到画龙点睛的作用,绚丽的动画效果能够为网站的设计锦上添花,要设计好的片头动画,要在充分了解客户想要表达的概念或者价值观念的基础上,制作出具有出色的创意,同时符合网络的要求的效果,制作流程如下:,1.明确设计思路:明确引导页面的设计思路、动画的设计脚本,方便于素材的准备和任务的分解。,2.材料准备:将FLASH引导页面动画的内容素材收集在一起,图片,声音,音效,动画主题,文字内容,布局,颜色定位 这七项元素都确定下来。,3.制作动画:根据动画的设计思路,将构成引导页面中的每一个元素都用时间轴让它动起来。制作过程中注意每个元素“动”起来的时间先后顺序。,4.多幅平面设计图的拼接:制作片头动画一个场景就够了,其他的多幅平面设计图都集中放在一个“剪辑MC”中即可。,拓展训练,9.4,14,制作,珠宝首饰网站flash引导页面。,项目说明,项目名称,网站,引导页面以模特图片为背景,突出首饰的优美造型,体现首饰的风采。,设计提示,(1)收集动画设计的背景及首饰等素材,制作背景及文字逐渐显示的动画效果;,(2)绘制矩形的首饰图片展示框,通过遮罩效果显示首饰图片;,(3)设置其他背景及首饰图片的显示效果;,效果展示,
展开阅读全文