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