电子商务网页设计(第二版)-课件8

电子商务网页设计教育部中等职业教育专业技能课立项教材中等职业教育实战型电子商务规划教材主编袁海波张勋若content电子商务网页赏析商品图片的使用与编辑15目录HTML网页制作基础2电子商务网页编辑软件3网页元素的编辑4表格与DIV的使用HTML5与响应式网页设计610使用CSS控制页面元素7使用Animate制作网页中的动画8

使用JS制作动态效果9设计与制作电子商务网店结构项目11使用制作网页中的动画8Animate2020的工作界面Animate2020基本操作介绍及使用实例使用Animate2020制作节日活动动画

Contents目录任务分析1相关知识2任务实施3任务一Animate2020的工作界面通过对Animate软件的学习,了解Animate动画的应用领域、特点、创作流程,以及掌握启动和退出Animate2020的方法,并认识Animate2020的工作界面,用这个软件制作一些简单广告动画。任务分析1相关知识21.Animate与FlashAnimate的前身是Flash，1996年11月美国Macromedia公司收购了FutureWave，并将其改名为Flash，2005年12月3日被Adobe公司收购。Flash通常也指MacromediaFlashPlayer（现AdobeFlashPlayer）。2015年12月1日，Adobe将动画制作软件FlashprofessionalCC2015升级并改名为AnimateCC2015，从此与Flash技术划清界限。使用方面来说没有大的区别，会用flash就可以很容易的转移到Animate上进行创造，Animate也就是flash的后续传承版本。相关知识2Animate动画主要有以下特点:(1)制作简单:Flash动画的制作相对比较简单,拥有一台电脑、一套软件,并掌握一定的软件知识就可以制作出简单的动画。(2)动画发布类型多样，可为视频、动态

GIF或

HTML5canvas格式等。(3)交互性强:可以使用ActionScript3.0语言为Animate动画添加代码,使动画具有交互性。相关知识23.场景如果将Animate2020动画比作话剧,一个场景就是话剧的一幕,每一幕都有丰富的内容、精彩的表演,结合起来就形成了一个完整的话剧。4.舞台舞台是展示、播放和控制动画的地方。舞台上显示的内容是当前所选帧上的对象,可以在舞台上为当前帧创建所需要的内容。相关知识25.Animate2020的工具箱选择工具

:选择和移动舞台中的对象,或改变对象的大小、形状。部分选取工具

:从所选对象中再选择部分内容,可用于调整曲线的形状。线条工具

:用于绘制各种长度和角度的直线段。套索工具

:用于在舞台中选择不规则区域或多个对象。钢笔工具

:用于绘制精确路径,如直线或平滑流畅的曲线,也可用来调整直线的角度和长度及曲线段的斜率。相关知识25.Animate2020的工具箱文本工具

:用于创建静态、动态或输入各种类型的文本对象。椭圆工具

:用于绘制椭圆图形(包括椭圆线条和椭圆填充图形)。矩形工具

:该工具包含两个子工具,可以用来绘制矩形或多边形(包括矩形线条和填充

图形)。铅笔工具

:使用该工具可以与使用真实铅笔大致相同的方式来绘制任意形状的线条。刷子工具

:用于绘制出刷子般的笔触,就好像在涂色一样。它可以创建特殊效果,包括

书法效果等。任意变形工具

:使用该工具可以对图形进行缩放、扭曲或旋转变形。相关知识25.Animate2020的工具箱填充变形工具

:该工具通过调整填充的大小、方向或中心,可以使渐变填充或位

图填充变形。墨水瓶工具

:使用该工具可以更改线条或者形状轮廓的笔触颜色、宽度和样式。颜料桶工具

:使用该工具可以用颜料填充封闭的区域,对于未完全封闭的区域,也

可以通过适当设置来进行填充。滴管工具

:使用该工具可以从一个对象中复制填充和笔触属性,然后立即将它们

应用到其他对象上。使用该工具还可以从位图图像取样用做填充。橡皮擦工具

:使用该工具可以快速擦除舞台上的任何内容,包括个别笔触段或填

充区域。相关知识25.Animate2020的工具箱手形工具

:当放大舞台时,可能无法看到整个舞台,利用该工具可以移动舞台,从而

不必更改缩放比例即可更改视图。缩放工具

:该工具用来改变舞台显示比例,缩放比例取决于显示器的分辨率和文档

大小,相当于生活中的放大镜和显微镜的功能。舞台缩放的最小比例是

8%,最大比例是2000%。摄像头

:使用摄像头可以模仿虚拟的摄像头移动。在摄像头视图下查看作品时，

看到的图层会像正透过摄像头来看一样。您还可以对摄像头图层添加补

间或关键帧。可使用摄像头中的以下功能来优化动画。骨骼工具

:使用骨骼工具可以实现反向运动

(IK)，这是一种通过骨骼为对象添加动

画效果的方式，这些骨骼按父级子级关系链接成线性或枝状的骨架。当一个骨骼移动时，与其连接的骨骼也发生相应的移动。3任务实施(1)单击“开始”按钮,在弹出的菜单中选择“AdobeAnimate2020”,或双击桌面上的图标

,即可启动。(2)打开Animate2020程序后,单击菜单栏的“件”→“新建”，打开Animate新建文档对话框，如图8—1所示。图8—1新建文档对话框3任务实施(3)选择“标准640*480”，再单击“创建”，进入Animate的工作界面后，可以看到其工作界面由标题栏、菜单栏、文档选项卡、工具箱、时间轴、舞台和多个控制面板组成，如图8—2所示。图8—2工作界面3任务实施（4）单击面板栏

“属性”面板，可展开属性面板的详细内容，如图8-3所示。通过菜单栏的“窗口”→“属性”也能打开属性面板。图8-3属性面板3任务实施（5）单击面板栏

“库”面板，可展开库面板的信息，如图8-4所示。如果要关闭库面板，再次单击面板栏

“库”面板就行了。图8-4库面板Contents目录任务分析1相关知识2任务实施3任务二Animate2020基本操作介绍

及使用实例制作Animate动画时,首先需要新建一个Animate文档并设置文档属性。对于新手来说,要制作出Animate动画,还需要简单了解制作动画的基本原理。本任务将带领大家学习这些知识,并创建一个Flash动画作品。任务分析1相关知识21.时间轴面板时间轴用于组织和控制文档内容在一定时间内播放的层数和帧数（就好比剧本），它决定了各个场景的切换及演员的出场、表演的时间顺序。AdobeAnimate中的时间轴用于组织和控制在一定时间内图层和帧中的文档内容。Animate文档也将时长划分为多个帧。图层就像堆叠在一起的多张幻灯胶片一样，每个图层都包含一个不同的图像显示在舞台中。时间轴面板如图8—9所示。图8—9时间轴面板相关知识22.帧帧是动画的核心，指定每一段的时间和运动。影片中帧的总数和播放速度共同决定了影片的总长度。3.FPS帧频（动画在

AdobeAnimate中的播放速度）以每秒帧数

(FPS)计量。帧频太慢会使动画看起来一顿一顿的，而帧频太快则会使动画的细节变得模糊。新的

Animate文档的默认帧频设置是30fps。4.图层图层可以帮助您组织

Animate文档中的插图。可以在一个图层上绘制和编辑对象，而不会影响其他图层上的对象。相关知识25.库面板库面板用于存放和组织可重复使用的Animate动画元件,包括在Animate中绘制的图形对象和导入的声音、位图等文件,如图8—10所示。图8—10库面板相关知识26.元件与实例在戏剧中经常可看见一个戏剧演员要出场多次,甚至在一幕戏中出场多次。为此Animate设置了“库”,将这样的对象放置其中,形成称为“元件”的对象,在需要元件对象上场时,只需用鼠标将该元件拖到舞台中即可。(1)执行“文件”→“新建”菜单命令或按快捷键Ctrl+N,在弹出的“新建文档”对话框中,选择预设中的“标准”选项,然后单击“创建”按钮,如图8—11所示。3任务实施图8—11新建文件对话框（2）创建一个Animate文档并进入工作界面后，执行“修改”→“文档”菜单命令，在“尺寸”编辑框中设置文档的宽度和高度均为400像素，然后单击“背景颜色”右侧的色块，在弹出的“拾色器”面板中单击黄色，其他选项保持默认设置不变，单击“确定”按钮，如图8—12所示。3任务实施图8—12修改文档属性（3）按住工具箱中的“矩形”工具不放，在展开的工具列表中单击选择“椭圆”工具

，按住Shift键的同时，按住鼠标左键并拖动，绘制出一个红色的正圆形，如图8—13所示。3任务实施图8—13绘制小球(4)单击时间轴面板的“插入关键帧”

，再将图形向下移动，单击绘图纸外观

以观察移动的情况，如图8-14所示。3任务实施图8—14插入关键帧(5)重复上面的步骤，直到圆形到舞台底部，如图8-15所示。3任务实施图8—15插入普通帧(6)将第8帧的图形使用“任意变形工具”

变扁点，第7帧的图形变长点,如图8—16所示。这样操作的目的使动画的效果更加柔和些。3任务实施图8—16任意变形工具使用（7）在帧右键在弹出的菜单中选择“选择所有帧”，如图8-17所示，再右键在弹出的菜单中选择“复制帧”，右键在弹出的菜单中选择“翻转帧”，再选择第一帧，右键在弹出的菜单中选择“粘贴帧”，这样我们的动画就有一个完整的下降与回弹的过程，如图8-18所示。3任务实施图8-17右键菜单项内容图8-18完成后图形(8)单击“时间轴”面板的“播放”

按钮预览动画效果。也可以再单击“循环”按钮，并设循环范围，使动画循环放映，如图8-19所示。3任务实施图8—19循环范围(9)单击菜单栏“文件”“保存”，在弹出的对话框中输入文件名为“弹跳的小球”，保存类型为Animate文档（*.fla），如图8-20所示。3任务实施图8—20保存对话框（10）单击菜单栏“文件”“发布设置”在弹出的对话框中单击“发布”按钮将文件输出其它格式,如图8—21所示。3任务实施图8—21保存对话框Contents目录任务三使用Animate2020制作节日

活动动画任务分析1相关知识2任务实施3第一节遮罩文字效果第一节：遮罩文字效果本任务通过Animate遮罩动画制作网页常看到的发光文字效果。发光效果不仅仅只有文字，还可以是图像，如果大家留意就会发现很多网址上也会有发光的动画效果。本任务发光文字制作的原理是，两个“福”字，一个是黑色的“福”字底部完整显示，一个白色的“福”字，在黑色“福”字的上面被遮罩，只有一个矩形移动通过的地方才会显示白色的“福”字部分内容，这样随着矩形的移动部分白色的“福”字从顶到底的运动显示，就像一道光经过，所以被称为发光文字效果。任务分析1相关知识21.动画的基本类型（1）逐帧动画逐帧动画就像传统动画一样,需要绘制动画的每一帧,主要用于表现一些复杂的运动,如动物的奔跑、人物的行走等。（2）传统补间传统补间是指在

FlashCS3和更早版本中使用的补间，在

Animate中予以保留主要是用于过渡目的。若要创建传统补间，需为起始点和结束点分别设置一个关键帧，如图8-22所示。图8—22保存对话框相关知识2(3)补间动画补间动画用于在

Animate中创建动画运动。补间动画是通过为第一帧和最后一帧之间的某个对象属性指定不同的值来创建的。由于每个帧中未使用资源，补间动画会最大限度降低文件大小和文档中资源的使用，如图8-23所示。图8—23补间动画相关知识2(4)补间形状AdobeAnimate可以对位置、大小、旋转进行补间并倾斜元件实例、组及文本。还可以对实例和文本的颜色进行补间，以便创建动画形式的颜色变换或透明度的淡入淡出。若要对组或文本的颜色进行补间，需先将对象转换为元件，如图8-24所示。图8—24补间形状相关知识2(5)运动引导层动画。运动引导层动画实际上是补间动画的一种特殊情况,它在动作补间动画的基础上增加了运动轨迹控制,使动画对象能够沿预先绘制的路径运动,它是制作复杂补间动画的最好方法。(6)遮罩层动画。遮罩顾名思义就是遮挡住下面的对象。遮罩动画是通过“遮罩层”来达到有选择地显示位于其下方的“被遮罩层”中的内容的目地，在一个遮罩动画中，“遮罩层”只有一个，“被遮罩层”可以有任意多个。对于那些处于遮罩层下的东西而言，只有那些被遮盖的部分才能被看倒，没有被遮罩的区域反而看不到。需要注意的是，一个遮罩层中只能存在一个遮罩物。相关知识22.图层在Flash中,图层是最基本也是最重要的概念之一。图层基本可以处理所有对象,包括文本、图形等。在Animate2020中,图层共分为五种类型,即一般图层、遮罩图层、被遮罩图层、传统运动引导图层、静态引导层、被引导图层。（1）运行Animate2020，执行“文件”→“新建”菜单命令，在弹出的“新建文档”对话框中，选择预设中的“标准”然后单击“创建”按钮，如图8—25所示。3任务实施图8—25“新建文档”对话框(2)选择菜单栏的“窗口”→“库”菜单命令,打开库面板，在库面板中单击新建元件按钮

，在弹出的“创建新元件”对话框中,在名称栏输入文字，如图8-26所示。3任务实施图8—26创建新元件对话框(3)设置工具面板的前景色为黑色，如图8-27所示，单击文字工具

，在文字元件中输入一个“福”字。3任务实施图8—27创建新元件(4)选择菜单栏的“窗口”→“属性”菜单命令，打开属性面板，选择工具栏的选择工具

，单击“福”字，在属性面板里设置文字大小为150px，如图8-

28所示。3任务实施图8—28属性面板（5）单击工具栏的任意变形工具

，将文字180度翻转，如图8-29所示。3任务实施图8—29福到了（6）在库面板中单击新建元件按钮

，在弹出的“创建新元件”对话框中,在名称栏输入遮罩文字，类型选择为“影片剪辑”，单击“确定”，如图8-30所示。3任务实施图8—30创建新元件（7）将库面板的文字元件拖动到影片剪辑窗口中，再新建图层，设置前景色为红色，在图层中使用矩形工具

绘制一个矩形，再单击菜单栏“修改”→“变形”→“缩放与旋转”，在弹出的对话框中设置旋转为45度，单击“确定”，如图8-31所示。3任务实施图8—31缩放和旋转对话框（8）在新建图层2的文字上双击，修改图层名为背景，并将它拖动到图层1的下面。再修改图层1的名字为底字，并调整文字的位置使文字能在红色背景的中心，如图8-32所示。3任务实施图8—32图层操作（9）在“底字”图层的上面再新一个图层，并命名为遮罩文字，再次将文字元件拖动到“遮罩文字”图层上，并调整位置使两个文字元件重合，如图8-33所示。3任务实施图8—33图层操作（10）选择“遮罩文字”图层的文字，在属性面板中选择色彩效果下的色调选项，并将色调的调到最右边使文字变成白色，如图8-34所示。3任务实施图8—34属性面板设置（10）选择“遮罩文字”图层的文字，在属性面板中选择色彩效果下的色调选项，并将色调的调到最右边使文字变成白色，如图8-34所示。3任务实施图8—34属性面板设置（11）在最上层新建图层命名为遮罩，设置前景色为黑色，用矩形工具

绘制一个长方形，并用任意变形工具

旋转矩形，如图8-35所示。3任务实施图8—35遮罩层内容（12）黑色矩形的上面右键在弹出的菜单上面选择“转换为元件”，在弹出的“转换为元件“对话框中单击”，单击“确定”。（13）在时间轴上20帧上按左键拖动，选择全部图层的20帧。在面板的“插入键”按钮上左键按着，在弹出的列表中选择帧，为全部图层添加帧，如图8-36所示。3任务实施图8—36插入帧（14）单击遮罩层的黑色矩形，右键在弹出的菜单中选择“创建补间动画”，单击遮罩层最后一帧，将黑色矩形拖动到文字的下方，如图8-37所示。3任务实施图8—37添加补间动画（15）在遮罩层上右键，在弹出的菜单中选择“遮罩层”，如图8-38所示。这样黑色矩形经过的地方，下方白色的文字就能显示出来，就像文字发光一样。3任务实施图8—38添加补间动画（16）在遮罩层上右键，在弹出的菜单中选择“遮罩层”，如图8-39所示。这样黑色矩形经过的地方，下方白色的文字就能显示出来，就像文字发光一样。3任务实施图8—39设置遮罩（17）单击舞台左上方“←”，返回“场景1”，将库中的“遮罩文字”拖到舞台上，按“Ctrl+Enter”测试动画，如图8-40所示。3任务实施图8—40测试动画（18）单击菜单栏的“文件”→“保存”,在保存对话框中输入文件名为简单动画，类型为Animate文档（*.fla），完成操作。小思考为什么本任务中的发光文字效果不在舞台中制作，而是在影片剪辑库元件中完成？这样制作有什么好处？

3任务实施Contents目录任务三使用Animate2020制作节日

活动动画任务分析12任务实施第二节按钮制作第二节制作按钮本任务是在Animate下制作红包雨动画效果，这在很多网址、APP上都有抢红包活动，点击红包抢优惠，在Animate中按钮主要是负责鼠标的各种事件处理，本任务为制作和测试方便真的红包就只有一个按钮。任务分析1（1）运行Animate2020,执行“文件”→“打开”菜单命令,在弹出的“打开”对话框中,选择上次任务文件简单动画.fla。（2）执行“文件”→“导入”→“导入到库”菜单命令,在“导入”对话框中,打开图片文件“红包.jpg”、“背景云1.jpg”、“背景云2.jpg”，在库面板中我们就看到了导入的三个jpg内容。

2任务实施（3）单击库面板的新建元件按钮

，在打开的创建新元件对话框中在名称中输入红包，类型选择为按钮，单击“确定”，如图8-41所示。2任务实施图8—41创建新元件对话框（4）将库面板中的图像红包.jpg拖动到按钮舞台上，打开属性面板设置图像宽为50，高为50。（5）在时间轴面板上点击关键帧按钮

分别为“指针经过”、“按下”、“点击”添加关键帧，如图8-42所示。2任务实施图8—42按钮状态键（6）单击库面板的新建元件按钮

，在打开的创建新元件对话框中在名称中输入红包雨，类型选择为图形，单击“确定”，如图8-43所示。2任务实施图8—43创建新元件（7）在红包雨元件的舞台上放多个红包按钮，返回场景1。（8）在场景新建两个图层，分别命名为背景、前景，调整图层的位置，将背景层放在最底部，前景图层放在最上面，再把图层1重命名为福字，如图8-44所示。2任务实施图8—44新建图层（8）在背景图层放背景云1.jpg、在前景图层上放背景云2.jpg，调整图像的位置，如图8-45所示。2任务实施图8—45添加背景（9）在前景图层下新建图层并命名为红包雨，把库面板中的红包雨元件拖动到舞台上，并调整位置，如图8-46所示。2任务实施图8—46添加红包雨（10）在40帧处拖动鼠标从第一个图层到最后一个图层并添加帧，在红包雨元件上右键选择“创建补间动画”，并在40帧处向下移动红包雨元件，完成补间动画，如图8-47所示。（11）单击菜单栏“文件”→“保存”，Ctrl+Enter测试动画，完成操作。2任务实施图8—47创建补间动画Contents目录任务三使用Animate2020制作节日

活动动画任务分析12任务实施第三节ActionScript脚本第二节ActionScript脚本本任务在Animate动画中为红包按钮加入ActionScript脚本用于控制动画。当没有点中正确的红包时红包雨不停，在帧上的ActionScript脚本自动跳到第1帧重新开始动画，只到点到正确的红包按钮ActionScript脚本跳到中奖信息帧。通过动画以实现网站与消费者之间的互动。任务分析1（1）运行Animate2020,，执行“文件”→“打开”菜单命令，在弹出的“打开”对话框中，选择上次任务文件简单动画.fla。（2）在红包雨图层的上面新建一个图层并命名为红包，单击菜单栏“窗口”→“库”，打开库面板，将红包按钮拖动到新建的红包图层，如图8-48所示。2任务实施图8—48新建红包图层（3）单击菜单栏“窗口”→“属性”，打开

属性面板，选择红包按钮，在属性面板中实

例名称输入btn，如图8-49所示。2任务实施图8—49属性面板（4）在红包按钮上面右键，在弹出的菜单中选择“创建补间动画”，选择40帧，再将红

包按钮移动一下位置，如图8-50所示。2任务实施图8—50补间动画（5）选择第40帧，单击菜单栏“窗口”→“动作”，打开动作面板，单击动作面板的“代码片断”

按钮，在弹出的对话框中选择“ActionScript”→“时间轴导航”→“在此帧处停止”，双击“在此帧处停止”，Animate就会在自动添加一个Action图层并在40帧处加上stop();这个语句，同时40帧上还会有一a，表示该帧上有动作，如图8-51所示。2任务实施图8—51动作面板（6）修改stop();为gotoAndPlay(1);让动画到第40帧的时候再从头开始。（7）在前景图层下新建一个图层并命名为中奖，在第41帧处单击时间轴面板插入关键帧

按钮，同时在前景、背景图层的41帧处同样插入关键帧，如图8-52所示。2任务实施图8—52插入关键帧（8）中将图层中使用文字工具，在舞台中输入“恭喜您抽中巧克力一盒”，打开属性面板，设置大小为50Pt，填充颜色为红色，调整文字位置，如图8-53所示。2任务实施图8—53添加文字（9）选择Action