3商务网页动画设计制作.doc

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

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的风格，创意，以及和谐度等。步骤1：仔细观察已经

4、完成的首页效果图，如图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步骤3：左键单击组“主广告”中图层“背景”前的图层缩览图小窗口，则出现和图层“背景”同样的选区，隐

6、藏组“主广告”，如图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-8图4-9步骤7：去掉选区，合并图层“红背景”和“红背景右侧”，如图4-10所示。4

7、1个人收集整理仅供参考学习图4-10步骤8：打开素材文件夹中的13.jpg，使用【魔棒工具】选择黑色人物，在使用【移动工具】并拖拽到index.psd中，缩放至合适大小，如图4-11所示。（注：选择魔棒工具时，这里选择属性栏中的“不连续”）图4-11步骤9：点击图层“红色背景”前的图层缩览图小窗口，反选，删除人物多余部分，重命名图层为“黑色人物”如图4-12所示。（注：这样的情况，很多人观察人物应该正好，没有什么多余部分，这里要注意，人物下半部分只是被其他图层遮住看那不见，但是是实际存在的。）图4-1241个人收集整理仅供参考学习步骤1

8、0：第二幕中的产品会从左至右进来，后面跟着产品类别名称，这些产品本教材已经提供，在素材文件夹中，所以这里不需要制作。B、处理并保存素材步骤1：在源文件文件夹中新建文件夹“flash源文件”，并在其内部再新建