3 商务网页动画设计制作

《3 商务网页动画设计制作》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、3商务网页动画设计制作【教学目标】终极目标：能完成商务页的动画设计与制作并嵌套到网页中促成目标：l能熟练完成朗声科贸网站网页动画设计与制作l能迅速的将动画嵌套到相关网页中【项目概述】小张是一家企业电子商务应用服务商的技术人员。公司技术部经理告诉他，公司要为一家数码视听产品销售及代理企业（西安朗声科技贸易有限公司）开发一个小型静态商务网站，以提高该企业知名度并进行产品推广。小张依据对朗声科贸商务网页的策划、生成的“朗声科贸商务网页设计与制作网页指导文案.doc”文档以及已经设计制作完成的页面，设计、制

2、作朗声科贸网站页面的Flash动画并嵌套到相关网页中，以完成朗声科贸商务网页设计与制作的全部内容。【项目分析】1、设计朗声科贸商务网站页面Flash动画需要什么工具及技术？一般的企业电子商务应用服务商的技术人员是在Photoshop软件或Flash软件中设计Flash动画，在Flash软件中制作。需要灵活使用Photoshop软件、Flash软件。2、设计制作Flash动画应注意些什么？一般的商务网站Flash与页面之间都保持着统一性，整体性，和谐型。Flash具有连贯性，创新性，实用性，紧扣主题。

3、【学习目标】★在完成任务的过程中思考、体会、学习本书中的“注”、“提示”、“隐性知识”、“提问”、“知识点”★在本书的指导下能独自完成其他动画的设计★学会自己分析问题，充分学会举一反三41目录任务1动画设计制作3子任务1：创意设计Flash动画3子任务2：制作Flash动画4任务2：动画嵌入39子任务1：嵌入动画并预览39子任务2：生成完整网站包40主要是对该网站进行良好的测试及优化工作。4041任务1动画设计制作〖任务完成〗子任务1：创意设计Flash动画A、依据已经完成的页面分析Flash的风格

4、，创意，以及和谐度等。步骤1：仔细观察已经完成的首页效果图，如图4-1所示。图4-1步骤2：导航下方的蓝色区域就是我们的Flash区了，从已经完成的网页来看，Flash应大方，简单，有创意，和页面风格保持统一。步骤3：朗声科贸是销售及代理数码视听产品的企业，产品多为“声”产品，所以我们的创意就从“声”开始，但是还要展示我们的主产品。B、创意设计Flash步骤1：依据指导文案中的分析，我们设计Flash，Flash共分两幕。步骤2：第一幕，如已经完成的页面效果图所示，蓝色背景上一MP3播放着动听的天籁

5、之音，吸引了成群的鱼儿。第二幕，深红色背景，右边有一女孩在入神的听着视听产品，左边依次展示朗声产品。（注：因朗声主色调是蓝，红，灰，第一幕为蓝色，第二幕依据整网页的风格配渐41变深红色。）步骤3：为了和谐，不生硬，第一幕使用百叶窗效果切换至第二幕。子任务2：制作Flash动画A、制作所需素材。步骤1：第一幕的素材源文件里面已经有了，这里制作第二幕的素材，打开index.psd源文件，如图4-2所示。图4-2步骤2：在组“主广告”之上新建组“第二幕”，并新建图层“红背景”，如图4-3所示。图4-3步骤

6、3：左键单击组“主广告”中图层“背景”前的图层缩览图小窗口，则出现和图层“背景”同样的选区，隐藏组“主广告”，如图4-4所示。41图4-4步骤4：做颜色#000000到#FF0000的线性渐变，如图4-5所示。图4-5步骤5：新建图层“红背景右侧”，选择【矩形选框工具】，并选择属性栏中的“与选区相交”，如图4-6，4-7所示，选择相交右半部分选区。41图4-6图4-7步骤6：选择黑色#000000到透明的线性渐变，从右至左拖拽，如图4-8，4-9所示。（注：这里的渐变可多次尝试做出合适效果。）图4-

7、8图4-9步骤7：去掉选区，合并图层“红背景”和“红背景右侧”，如图4-10所示。41图4-10步骤8：打开素材文件夹中的13.jpg，使用【魔棒工具】选择黑色人物，在使用【移动工具】并拖拽到index.psd中，缩放至合适大小，如图4-11所示。（注：选择魔棒工具时，这里选择属性栏中的“不连续”）图4-11步骤9：点击图层“红色背景”前的图层缩览图小窗口，反选，删除人物多余部分，重命名图层为“黑色人物”如图4-12所示。（注：这样的情况，很多人观察人物应该正好，没有什么多余部分，这里要注意，人物下

8、半部分只是被其他图层遮住看那不见，但是是实际存在的。）图4-1241步骤10：第二幕中的产品会从左至右进来，后面跟着产品类别名称，这些产品本教材已经提供，在素材文件夹中，所以这里不需要制作。B、处理并保存素材步骤1：在源文件文件夹中新建文件夹“flash源文件”，并在其内部再新建文件夹“图片”。（注：养成良好的分类保存习惯以方便自己或者别人以后修改编辑）步骤2：选择编辑“红背景”图层，单击其前的图层缩览图小窗口，Ctrl+C，Ctrl+N，Ctrl+V，品质选择最佳，