商务网页动画设计制作.docVIP

PAGE PAGE 41 3 商务网页动画设计制作 【教学目标】 终极目标：能完成商务页的动画设计与制作并嵌套到网页中 促成目标： 能熟练完成朗声科贸网站网页动画设计与制作 能迅速的将动画嵌套到相关网页中 【项目概述】 小张是一家企业电子商务应用服务商的技术人员。公司技术部经理告诉他，公司要为一家数码视听产品销售及代理企业（西安朗声科技贸易有限公司）开发一个小型静态商务网站，以提高该企业知名度并进行产品推广。小张依据对朗声科贸商务网页的策划、生成的“朗声科贸商务网页设计与制作网页指导文案.doc”文档以及已经设计制作完成的页面，设计、制作朗声科贸网站页面的Flash动画并嵌套到相关网页中，以完成朗声科贸商务网页设计与制作的全部内容。 【项目分析】 1、设计朗声科贸商务网站页面Flash动画需要什么工具及技术？ 一般的企业电子商务应用服务商的技术人员是在Photoshop软件或Flash软件中设计Flash动画，在Flash软件中制作。需要灵活使用Photoshop软件、Flash软件。 2、设计制作Flash动画应注意些什么？ 一般的商务网站Flash与页面之间都保持着统一性，整体性，和谐型。Flash具有连贯性，创新性，实用性，紧扣主题。 【学习目标】 在完成任务的过程中思考、体会、学习本书中的“注”、“提示”、“隐性知识”、“提问”、“知识点” 在本书的指导下能独自完成其他动画的设计 学会自己分析问题，充分学会举一反三 目 录 TOC \o 1-4 \h \z \u 任务 1 动画设计制作 3 子任务1：创意设计Flash动画 3 子任务2：制作Flash动画 4 任务2： 动画嵌入 39 子任务1：嵌入动画并预览 39 子任务2：生成完整网站包 40 主要是对该网站进行良好的测试及优化工作。 40 任务 1 动画设计制作 〖任务完成〗 子任务1：创意设计Flash动画 A、依据已经完成的页面分析Flash的风格，创意，以及和谐度等。 步骤1：仔细观察已经完成的首页效果图，如图4-1所示。 图4-1 步骤2：导航下方的蓝色区域就是我们的Flash区了，从已经完成的网页来看，Flash应大方，简单，有创意，和页面风格保持统一。 步骤3：朗声科贸是销售及代理数码视听产品的企业，产品多为“声”产品，所以我们的创意就从“声”开始，但是还要展示我们的主产品。 B、创意设计Flash 步骤1：依据指导文案中的分析，我们设计Flash，Flash共分两幕。 步骤2：第一幕，如已经完成的页面效果图所示，蓝色背景上一MP3播放着动听的天籁之音，吸引了成群的鱼儿。 第二幕，深红色背景，右边有一女孩在入神的听着视听产品，左边依次展示朗声产品。 （注：因朗声主色调是蓝，红，灰，第一幕为蓝色，第二幕依据整网页的风格配渐 变深红色。） 步骤3：为了和谐，不生硬，第一幕使用百叶窗效果切换至第二幕。 子任务2：制作Flash动画 A、制作所需素材。 步骤1：第一幕的素材源文件里面已经有了，这里制作第二幕的素材，打开index.psd 源文件，如图4-2所示。 图4-2 步骤2：在组“主广告”之上新建组“第二幕”，并新建图层“红背景”，如图4-3所示。 图4-3 步骤3：左键单击组“主广告”中图层“背景”前的图层缩览图小窗口，则出现和图层“背景”同样的选区，隐藏组“主广告”，如图4-4所示。 图4-4 步骤4：做颜色#000000到#FF0000的线性渐变，如图4-5所示。 图4-5 步骤5：新建图层“红背景右侧”，选择【矩形选框工具】，并选择属性栏中的“与选区相交”，如图4-6，4-7所示，选择相交右半部分选区。 图4-6 图4-7 步骤6：选择黑色#000000到透明的线性渐变，从右至左拖拽，如图4-8，4-9所示。 （注：这里的渐变可多次尝试做出合适效果。） 图4-8 图4-9 步骤7：去掉选区，合并图层“红背景”和“红背景右侧”，如图4-10所示。 图4-10 步骤8：打开素材文件夹中的13.jpg，使用【魔棒工具】选择黑色人物，在使用【移动工具】并拖拽到index.psd中，缩放至合适大小，如图4-11所示。 （注：选择魔棒工具时，这里选择属性栏中的“不连续”） 图4-11 步骤9：点击图层“红色背景”前的图层缩览图小窗口，反选，删除人物多余部分，重命名图层为“黑色人物”如图4-12所示。 （注：这样的情况，很多人观察人物应该正好，没有什么多余部分，这里要注意，人物下半部分只是被其他图层遮住看那不见，但是是实际存在的。） 图4-12 步骤10：第二幕中的产品会从左至右进来，后面跟着产品类别名称，这些产品本教材已经提供，在素材文件夹中，所以这里不需要制作。 B、处理并保存素材 步骤1：