项目六 使用 Animate 制作网页广告动画

项目六使用Animate制作

网页广告动画电子商务网站建设与网页设计

（微课版）1认识AnimateCC2018工作界面2Animate工具的应用3课堂练习——

制作家居网站导航菜单目录CONTENTS4课堂练习——

制作水果促销横幅广告Animate是用于创建动画和多媒体内容的专业工具软件。如果电子商务网站中只有静态的文字和图像，就会显得呆板。Animate可以将动画、音乐和音效等相融合，有效地增强网页的动态效果，从而吸引浏览者的注意力。要想运用Animate制作网页广告动画，就必须了解其工作界面及功能。本任务就来认识AnimateCC2018工作界面。任务一认识AnimateCC2018工作界面AnimateCC2018工作界面由菜单栏、基本功能区、窗口选项卡、编辑栏、舞台、“属性”面板、工具栏和“时间轴”面板等部分组成。AnimateCC2018工作界面作为交互式动画设计工具，Animate可以将音乐、音效和动画融合在一起，制作出高品质的动态效果。在使用Animate制作网页动画之前，本任务先学习Animate工具的应用方法。任务二Animate工具的应用一、文本工具下面将通过实例介绍如何添加静态文本，具体操作方法如下。静态文本一、文本工具动态文本字段显示动态更新的文本。动态文本包含外部源（如文本文件、XML文件及远程Web服务）加载的内容，其功能强大，但并不完美，只允许动态显示，不允许动态输入。下面将通过实例介绍如何添加动态文本，具体操作方法如下。动态文本一、文本工具输入文本用于在Animate动画中接收用户的输入数据，如表单或密码输入区域的数据。下面将通过实例介绍如何在舞台上添加输入文本显示密码字符，具体操作方法如下。输入文本二、绘图工具绘制直线设置绘制对象属性线条工具用于绘制直线。在AnimateCC2018中有6种笔触样式，分别是实线、虚线、点状线、锯齿线、点刻线和斑马线。可以在绘制直线前先对线条工具的属性进行设置，也可以在绘制直线后在“属性”面板中对线条的样式进行修改。线条工具二、绘图工具“实线”样式“虚线”样式“点状线”样式“锯齿线”样式“点刻线”样式“斑马线”样式线条工具用于绘制直线。在AnimateCC2018中有6种笔触样式，分别是实线、虚线、点状线、锯齿线、点刻线和斑马线。可以在绘制直线前先对线条工具的属性进行设置，也可以在绘制直线后在“属性”面板中对线条的样式进行修改。线条工具二、绘图工具铅笔工具“属性”面板单击工具栏中的“铅笔工具”按钮

或按【Shift+Y】组合键，即可调用铅笔工具。铅笔工具的“属性”面板和线条工具的“属性”面板非常相似。铅笔工具铅笔模式二、绘图工具使用钢笔工具可以绘制直线和平滑流畅的曲线，而且能调节直线的角度、长度和曲线的倾斜度等。钢笔工具设置钢笔工具参数设置笔触参数二、绘图工具使用钢笔工具可以绘制直线和平滑流畅的曲线，而且能调节直线的角度、长度和曲线的倾斜度等。钢笔工具确定锚点绘制闭合路径二、绘图工具使用钢笔工具可以绘制直线和平滑流畅的曲线，而且能调节直线的角度、长度和曲线的倾斜度等。钢笔工具绘制曲线绘制直线二、绘图工具使用钢笔工具可以绘制直线和平滑流畅的曲线，而且能调节直线的角度、长度和曲线的倾斜度等。钢笔工具添加锚点删除锚点二、绘图工具使用钢笔工具可以绘制直线和平滑流畅的曲线，而且能调节直线的角度、长度和曲线的倾斜度等。钢笔工具转换为转换锚点工具转换为部分选择工具二、绘图工具多边形工具包括矩形工具、椭圆工具、多角星形工具等，主要用于绘制一些常见的规则形状。在绘制形状时，需要在各种工具的“属性”面板中设置“填充和笔触”及相应的工具选项。多边形工具使用多边形工具绘制形状三、填充工具使用颜料桶工具可以对封闭的区域填充颜色，也可对已有的填充区域进行修改，还可设置位图填充。单击工具栏中的“颜料桶工具”按钮或按【K】键，即可调用该工具。颜料桶工具颜料桶工具“属性”面板“间隔大小”选项三、填充工具使用颜料桶工具可以对封闭的区域填充颜色，也可对已有的填充区域进行修改，还可设置位图填充。单击工具栏中的“颜料桶工具”按钮或按【K】键，即可调用该工具。颜料桶工具三、填充工具墨水瓶工具可以用于改变线条的颜色、宽度和类型，还可为只有填充颜色的图形添加边缘线条。单击工具栏中的“墨水瓶工具”按钮或按【S】键，即可调用该工具。下面将通过实例介绍如何应用墨水瓶工具，具体操作方法如下。墨水瓶工具三、填充工具使用滴管工具可以吸取线条的笔触颜色、笔触大小及笔触样式等基本属性，并将其应用于其他图形的笔触。同样，它也可以吸取填充颜色或位图等信息，并将其应用于其他图形的填充。该工具没有与其对应的“属性”面板和功能选项区。单击工具栏中的“滴管工具”按钮或按【I】键，即可调用该工具。滴管工具画笔工具组包含两种工具，分别是画笔工具和喷涂刷工具。使用画笔工具绘制的图形是被填充的，利用这一特性可以绘制出具有书法效果的图形。单击工具栏中的“画笔工具”按钮，即可调用该工具。在使用画笔工具之前，需要对其属性进行设置。打开“属性”面板，可以设置“填充和笔触”“平滑”

“画笔选项”选项。画笔工具画笔工具“属性”面板导航菜单是指位于页面顶部或侧边区域的一排水平导航按钮，起着链接站点各个页面的作用。导航菜单在电子商务网站中发挥着极其重要的作用，用于引导用户快速浏览网站中的内容。通常所见的导航菜单大都是静态的，效果较为单一。为了解决这个问题，可以将导航菜单制作成动画。在Animate中可以迅速为导航菜单添加各种动画特效。本任务将学习如何利用AnimateCC2018制作家居网站导航菜单。任务三课堂练习——制作家居网站导航菜单一、认识导航菜单顶部导航可以一目了然地让用户迅速找到自己所需的信息。现在很多电子商务网站都会将这类导航始终固定在页面顶部，让用户操作起来更加方便。顶部导航设计的样式也比较多，可以与Logo、登录注册、搜索框搭配组合成多种效果。顶部导航顶部导航一、认识导航菜单侧边栏导航的设计形式比较多样，可以有多种表现形式，可动可静，可大可小，比较个性化。固定的侧边栏导航效果不是很好，特别是侧边栏导航宽度较大时会影响整个网页的宽度，此时，可以考虑将侧边栏导航以滑动的方式进行展现。大部分平台类电子商务网站采用这类导航展示商品的分类信息。侧边栏导航侧边栏导航一、认识导航菜单底部导航的应用不是很广泛，经常出现在一些活动或个性化的网站中。一般底部导航被广泛应用于移动端页面中。底部导航底部导航汉堡包式导航其实与底部导航一样，经常出现在移动端页面中，但现在不少PC端网页设计者也越来越喜欢使用汉堡包式导航。汉堡包式导航滚动式导航分为水平式滚动导航和垂直式滚动导航。垂直式滚动导航在网页中的运用较为广泛。将一些动画特效和垂直式滚动导航相结合，可以达到一种全新的视觉效果。滚动式导航二、导航菜单设计下面将通过实例详细介绍如何利用AnimateCC2018制作电子商务网站的顶部导航菜单，具体操作方法如下。横幅广告是电子商务网站中常见的一种广告形式，当用户点击横幅广告时，通常可以链接到广告主的网页。这种广告尺寸较大，视觉冲击力强，表现更突出，能给访客留下深刻的印象。本任务将学习如何利用AnimateCC2018制作电子商务网站的横幅广告。任务四课堂练习——制作水果促销横幅广告一、认识横幅广告横幅广告经常出现在页面上方首要位置或底部中央，多作为提示性广告，可供访客点击进入，以了解更多的信息。横幅广告的展示方式灵活多变，可以用文字、图片、图文结合及动画等形式进行展示。横幅广告的尺寸通常是720像素×90像素、480像素×60像素或233像素×30像素，一般使用GIF格式的图片，既可以是静态图像，也可以是SWF动画图像。除了普通的GIF图片外，新兴的RichMediaBanner（富媒体Banner）