1.3 电子商务网站动画

案例分析

商务网站是通过网络上琳琅满目的商品信息、完善的物流配送系统和方便安全的资金结算系统进行交易的。电子商务网站中的动画，应以向浏览者表达信息为主，将所需要表达的信息，通过动画的表现形式来展现给浏览者，这样可以加深浏览者的印象及吸引浏览者的注意力。

动画的色彩搭配要与网站的色彩达到一致的风格，动画中可以采用卡通的形象来表达需要表达的信息，这样可以更加丰富页面的内容。

最终的效果如图1-57所示。

图1-57 最终效果图

技术点睛：

（1）钢笔工具——使用“钢笔工具”可以绘制一些较为复杂的图形，钢笔工具可以绘制出比较流畅的曲线，在一些图形中，其他的工具是没有办法做到的，在绘制完的路径上有很多的锚点，方便以后进行图形的修改（如图1-58所示）。

图1-58 钢笔绘制

（2）矩形工具设置——在“工具”设置面板上可以选择星形和多边形，方便绘制图形，可以设置多边形和星形的边数和星形的顶点大小（如图1-59所示）。

图1-59 工具设置面板

（3）放射状渐变——在“混色器”面板上可以设置渐变的样式为“放射状”，这样的渐变多适用于发光体，或者特别突出的图形，在设置渐变的同时还可以设置其“Alpha”值，使其达到渐隐的效果（如图1-60所示）。

图1-60 放射状渐变效果

1.3.1 制作步骤

STEP 01 执行“文件→新建”命令，新建一个Flash文档。单击“属性”面板上的“大小”尺寸按钮，设置打开的“文档属性”面板上“尺寸”为390px×100px，“帧频”设置为“34”，其他设置如图1-61所示。

图1-61 设置“文档属性”

STEP 02 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“影片剪辑”，“名称”为“牛1动画”，如图1-62所示。单击“时间轴”面板上的“图层1”第1帧位置，执行“文件→导入→导入到舞台”命令，将图片“CD/源文件/第1章/1.2.3.png”导入到场景中，如图1-63所示。

图1-62 新建元件

图1-63 导入图形

STEP 03 选中图片，执行“修改→转换为元件”命令，打开“转换为元件”面板，设置“类型”为“图形”，“名称”为“牛1”，如图1-64所示。

图1-64 转换为元件

STEP 04 单击“时间轴”面板上的“图层1”第10帧位置，按“F6”键插入关键帧，单击“工具”面板上的“选择工具”按钮，选中图形，将图形向上移动，如图1-65所示。

图1-65 移动图形

STEP 05 单击“时间轴”面板上的“图层1”第20帧位置，按“F6”键插入关键帧，单击“工具”面板上的“选择工具”按钮，选中图形，将图形向下移动，如图1-66所示。

图1-66 移动元件

STEP 06 分别选中“图层1”中第1帧和第10帧位置，设置“属性”面板上的“补间”类型为“动画”，时间轴效果如图1-67所示。

图1-67 时间轴效果

STEP 07 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“影片剪辑”，“名称”为“牛2动画”，如图1-68所示。

图1-68 新建元件

STEP 08 用步骤2同样的方法制作该元件，如图1-69所示。

图1-69 元件效果

STEP 09 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“影片剪辑”，“名称”为“星星动画”，如图1-70所示。

图1-70 新建元件

STEP 10 单击“时间轴”面板上的“图层1”第1帧位置，单击“工具”面板上的“钢笔工具”按钮，在场景中绘制如图1-71所示图形。

图1-71 绘制图形

STEP 11 单击“时间轴”面板上的“图层1”第10帧位置，按“F6”键插入关键帧，单击“时间轴”面板上“图层1”第5帧位置，按“F6”键插入关键帧，单击“工具”面板上的“任意变形工具”按钮，选中场景中的图形调整为如图1-72所示图形。

图1-72 调整图形

STEP 12 分别单击“时间轴”面板上的第1帧和第5帧位置，设置“属性”面板上的“补间”类型为“动画”， 时间轴效果如图1-73所示。

图1-73 时间轴效果

STEP 13 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“影片剪辑”，“名称”为“星星动画2”，如图1-74所示。

图1-74 新建元件

STEP 14 单击“时间轴”面板上的“图层1”第1帧位置，单击“工具”面板上的“钢笔工具”按钮，在场景中绘制如图1-75所示图形。

图1-75 绘制图形

STEP 15 单击“时间轴”面板上的“图层1”第10帧位置，按“F6”键插入关键帧，单击“时间轴”面板上“图层1”第5帧位置，按“F6”键插入关键帧，单击“工具”面板上的“任意变形工具”按钮，选中场景中的图形调整为如图1-76所示图形。

图1-76 调整图形

STEP 16 分别单击“时间轴”面板上的第1帧和第5帧位置，设置“属性”面板上的“补间”类型为“动画”， 时间轴效果如图1-77所示。

图1-77 时间轴效果

STEP 17 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“图形”，“名称”为“星星1”，如图1-78所示。

图1-78 新建元件

STEP 18 单击“工具”面板上的“多边形工具”按钮，设置“笔触颜色”为“无”，“填充色”为“#FF6BAB”，单击“属性”面板上的“选项”按钮，打开“工具设置”面板，设置如图1-79所示。

图1-79 “工具设置”面板

STEP 19 在场景中绘制如图1-80所示图形。

图1-80 绘制图形

STEP 20 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“影片剪辑”，“名称”为“星星动画3”，如图1-81所示。

图1-81 新建元件

STEP 21 单击“时间轴”面板上的“图层1”第1帧位置，将“星星1”元件拖入场景中如图1-82所示位置。

图1-82 拖入元件

STEP 22 单击“时间轴”面板上的“图层1”第35帧位置，按“F6”键插入关键帧，单击第1帧位置，设置“属性”面板上的“补间”类型为“动画”。设置“旋转”选项为“顺时针”，旋转数为“1”，如图1-83所示。

图1-83 设置“属性”面板

STEP 23 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“图形”，“名称”为“文字1”，如图1-84所示。

图1-84 新建元件

STEP 24单击“工具”面板上的“文本工具”按钮，设置“文本高度”为“35”，设置“文本颜色”为“#DD7900”，在场景中输入文字，如图1-85所示。

图1-85 输入文字

STEP 25 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“影片剪辑”，“名称”为“文字1动画”，如图1-86所示。

图1-86 新建元件

STEP 26 单击“时间轴”面板上的“图层1”第1帧位置，将“文字1”元件拖入场景中，如图1-87所示。

图1-87 拖入元件

STEP 27 分别单击“图层1”第10帧和第20帧位置，按“F6”键插入关键帧，单击“图层1”第5帧位置，按“F6”键插入关键帧，时间轴效果如图1-88所示。单击“工具”面板上的“选择工具”按钮，调整场景中元件的位置，如图1-89所示。

图1-88 调整元件位置

图1-89 时间轴效果

STEP 28 分别单击“图层1”第1帧和第5帧位置，设置“属性”面板上的“补间”类型为“动画”，时间轴效果如图1-90所示。

图1-90 时间轴效果

STEP 29 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“图形”，“名称”为“文字2”，如图1-91所示。

图1-91 新建元件

STEP 30 单击“工具”面板上的“文本工具”按钮，设置“字体大小”为“35”，“文本（填充）颜色”为“#FF9A42”，在场景中输入文字，如图1-92所示。

图1-92 输入文字

STEP 31 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“影片剪辑”，“名称”为“文字2动画”，如图1-93所示。

图1-93 新建元件

STEP 32 单击“图层1”第1帧位置，将“文字2”元件拖入场景中，如图1-94所示。

图1-94 拖入元件

STEP 33 分别单击“图层1”第5帧、第10帧和第40帧位置，按“F6”键插入关键帧，时间轴效果如图1-95所示。

图1-95 时间轴效果

STEP 34 单击“图层1”第5帧位置，单击“工具”面板上的“选择工具”按钮，调整元件位置，如图1-96所示。

图1-96 调整元件位置

STEP 35 选中元件，设置其“属性”面板上的“颜色”样式下的“色调”选项，设置如图1-97所示。

图1-97 设置“色调”属性

STEP 36 分别单击“图层1”第1帧和第5帧位置，设置“属性”面板上的“补间”类型为“动画”，时间轴效果如图1-98所示。

图1-98 时间轴效果

STEP 37 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“图形”，“名称”为“文字3”。如图1-99所示。

图1-99 新建元件

STEP 38 单击“工具”面板上的“文本工具”按钮，设置“字体大小”为“28”，“文本（填充）颜色”为“#FF9A42”，在场景中输入文字，如图1-100所示。

图1-100 输入文字

STEP 39 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“影片剪辑”，“名称”为“文字3动画”，如图1-101所示。

图1-101 新建元件

STEP 40 单击“图层1”第1帧位置，将“文字3”元件拖入场景中，如图1-102所示。

图1-102 拖入元件

STEP 41 分别单击“图层1”第15帧、第30帧、第35帧、第40帧、第45帧和第50帧位置，按“F6”键插入关键帧，时间轴效果如图1-103所示。

图1-103 时间轴效果

STEP 42 单击“图层1”第15帧位置，单击“工具”面板上的“选择工具”按钮，调整元件位置，如图1-104所示。

图1-104 移动元件

STEP 43 分别单击“图层1”第35帧和第45帧位置，单击“工具”面板上的“选择工具”按钮，调整元件位置，如图1-105所示。

图1-105 移动元件

STEP 44 分别选中第35帧和第45帧上元件，单击“属性”面板上的“颜色”下拉菜单，选择“色调”选项，设置如图1-106所示。

图1-106 设置“色调”属性

STEP 45 分别单击“图层1” 第1帧、第15帧、第30帧、第35帧、第40帧和第45帧位置，设置“属性”面板上的“补间”类型为“动画”，时间轴效果如图1-107所示。

图1-107 时间轴效果

STEP 46 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“图形”，“名称”为“黑框文字1”，如图1-108所示。

图1-108 新建元件

STEP 47 单击“工具”面板上的“矩形工具”按钮，设置“笔触颜色”为“无”，“填充色”为“#000000”，单击“选项”面板上的“边角半径设置”按钮，打开“矩形设置”面板，设置“边角半径”为“10”，如图1-109所示。

图1-109 “矩形设置”面板

STEP 48 单击“图层1”第1帧位置，在场景中绘制一个40px×45px的矩形，如图1-110所示。

图1-110 绘制矩形

STEP 49 单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，单击“图层2”第1帧位置，单击“工具”面板上的“文本工具”按钮，设置“字体大小”为“35”，“文本（填充）颜色”为“#F7C321”，在场景中输入文字，如图1-111所示。

图1-111 输入文字

STEP 50 用同样的方法制作其他元件，如图1-112所示。

图1-112 元件效果

STEP 51 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“影片剪辑”，“名称”为“光标”，如图1-113所示。

图1-113 新建元件

STEP 52 单击“时间轴”面板上的“图层1”第1帧位置，单击“工具”面板上的“矩形工具”按钮，设置“笔触颜色”为“无”，“填充色”为“#000000”，在场景中绘制一个2p x× 20px的矩形，如图1-114所示。

图1-114 绘制矩形

STEP 53 单击“图层1”第8帧位置，按“F5”键插入帧。单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，单击“图层2”第15帧位置，按“F5”键插入帧，时间轴效果如图1-115所示。

图1-115 时间轴效果

STEP 54 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“影片剪辑”，“名称”为“输入框”，如图1-116所示。

图1-116 新建元件

STEP 55 单击“时间轴”面板上的“图层1”第1帧位置，单击“工具”面板上的“矩形工具”按钮，设置“笔触颜色”为“#000000”，“填充色”为“无”，在场景中绘制一个100px× 25px的矩形，如图1-117所示。

图1-117 绘制矩形

STEP 56 单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，单击“图层2”第1帧位置，将“光标”元件拖入场景中，如图1-118所示。

图1-118 拖入元件

STEP 57 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“图形”，“名称”为“白布”，如图1-119所示。

图1-119 新建元件

STEP 58 单击“时间轴”面板上的“图层1”第1帧位置，单击“工具”面板上的“矩形工具”按钮，设置“笔触颜色”为“无”，“填充色”为“#000000”，“Alpha”值为“10%”，在场景中绘制一个400px×260px的矩形，如图1-120所示。

图1-120 绘制矩形

STEP 59 单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，单击“图层2”第1帧位置，单击“工具”面板上的“矩形工具”按钮，设置“笔触颜色”为“无”，“填充色”为“#FFFFFF”，在场景中绘制一个395px×260px的矩形，如图1-121所示。

图1-121 绘制矩形

STEP 60 单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，单击“图层2”第1帧位置，单击“工具”面板上的“矩形工具”按钮，设置“笔触颜色”为“无”，在“混色器”面板中设置“填充颜色”的“类型”为“放射状”，从“#FFFFFF”到“#E3E3E3”的渐变如图1-122所示，在场景中绘制一个395px×260px的矩形，如图1-123所示。

图1-122 “混色器”面板

图1-123 绘制矩形

STEP 61 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“影片剪辑形”，“名称”为“黑框文字动画”，如图1-124所示。

图1-124 新建元件

STEP 62 单击“时间轴”面板上的“图层1”第1帧位置，将“黑框文字1”元件拖入场景中，如图1-125所示。

图1-125 拖入元件

STEP 63 分别单击“时间轴”面板上的“图层1”第7帧、第11帧和第23帧位置，按“F6”键插入关键帧，时间轴效果如图1-126所示。

图1-126 时间轴效果

STEP 64 单击“图层1”第1帧位置，单击“工具”面板上的“任意变形工具”按钮，选中场景中的元件，调整元件的大小，如图1-127所示。

图1-127 调整元件大小

STEP 65 单击“时间轴”面板上的“图层1”第7帧位置，选中帧上的元件，设置其“属性”面板上的“颜色”样式下的“色调”选项，设置如图1-128所示，元件效果如图1-129所示。

图1-128 设置“色调”属性

图1-129 元件效果

STEP 66 单击“图层1”第29帧位置，按“F6”键插入关键帧，单击“工具”面板上的“任意变形工具”按钮，调整场景中元件的位置及大小，如图1-130所示。

图1-130 调整元件位置

STEP 67 分别单击“图层1”第49帧和第55帧位置，按“F6”键插入关键帧，单击第55帧位置，单击“工具”面板上的“任意变形工具”按钮，调整场景中元件的位置及大小，如图1-131所示。

图1-131 调整元件位置

STEP 68 分别单击“图层1”第1帧、第7帧、第23帧和第49帧位置，设置“属性”面板上的“补间”类型为“动画”，时间轴效果如图1-132所示。

图1-132 时间轴效果

STEP 69 用同样的方法制作其他的图层，效果如图1-133所示，时间轴效果如图1-134所示。

图1-133 制作效果

图1-134 时间轴效果

STEP 70 单击“时间轴”面板上的“插入图层”按钮，新建“图层5”，单击“图层5”第55帧位置，按“F6”键插入关键帧，执行“窗口→动作”命令，打开“动作-帧”面板，输入“stop();”语句，时间轴效果如图1-135所示。

图1-135 时间轴效果

STEP 71 单击“时间轴”面板上的“场景1”标签，返回场景，单击“图层1”第1帧位置，单击“工具”面板上的“矩形工具”按钮，设置“笔触颜色”为“无”，在“混色器”面板中设置“填充颜色”的“类型”为“线性”，从“#FFFFFF”到“#3CCAE4”的渐变如图1-136所示，在场景中绘制一个39px×100px的矩形，如图1-137所示。

图1-136 “混色器”面板

图1-137 绘制矩形

STEP 72 单击“图层1”第1帧位置，执行“文件→导入→导入到舞台”命令，将图片“CD/源文件/第1章/1.2.1.png”导入到场景中，单击第240帧位置，按“F5”键插入帧，如图1-138所示。

图1-138 导入图片

STEP 73 单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，单击“图层2”第1帧位置，将“白布”元件拖入场景中，单击第240帧位置，按“F5”键插入帧，如图1-139所示。

图1-139 拖入元件

STEP 74 单击“时间轴”面板上的“插入图层”按钮，新建“图层3”，单击“图层3”第20帧位置，按“F6”键插入关键帧，将“文字1动画”元件拖入场景中，单击“工具”面板上的“任意变形工具”按钮，调整元件的大小，如图1-140所示。

图1-140 拖入元件

STEP 75 单击“图层3”第25帧位置，按“F6”键插入关键帧，单击第20帧位置，选中帧上元件，设置其“属性”面板上“颜色”样式下的“Alpha”值为“0%”。单击第20帧位置，设置“属性”面板上的“补间”类型为“动画”，时间轴效果如图1-141所示。鼠标拖动选中第121帧至第240帧位置，单击鼠标右键，在弹出的快捷菜单中选择“删除帧”选项。

图1-141 时间轴效果

STEP 76 单击“时间轴”面板上的“插入图层”按钮，新建“图层4”，单击“图层4”第50帧位置，按“F6”键插入关键帧，将“星星动画1”元件拖入场景中，单击“工具”面板上的“任意变形工具”按钮，调整元件的大小，如图1-142所示。

图1-142 拖入元件

STEP 77 单击“图层4”第55帧位置，按“F6”键插入关键帧，单击第50帧位置，选中帧上元件，设置其“属性”面板上的“颜色”样式下的“Alpha”值为“0%”，单击“工具”面板上的“选择工具”按钮，调整元件位置。单击第50帧位置，设置“属性”面板上的“补间”类型为“动画”，时间轴效果如图1-143所示。鼠标拖动选中第121帧至第240帧位置，单击鼠标右键，在弹出的快捷菜单中选择“删除帧”选项。

图1-143 时间轴效果

STEP 78 单击“时间轴”面板上的“插入图层”按钮，新建“图层5”，单击“图层5”第50帧位置，按“F6”键插入关键帧，将“星星动画2”元件拖入场景中，单击“工具”面板上的“任意变形工具”按钮，调整元件的大小，如图1-144所示。

图1-144 拖入元件

STEP 79 单击“图层5”第55帧位置，按“F6”键插入关键帧，单击第50帧位置，选中帧上元件，设置其“属性”面板上的“颜色”样式下的“Alpha”值为“0%”，单击“工具”面板上“选择工具”按钮，调整元件位置。单击第50帧位置，设置“属性”面板上“补间”类型为“动画”，时间轴效果如图1-145所示。鼠标拖动选中第121帧至第240帧位置，单击鼠标右键，在弹出的快捷菜单中选择“删除帧”选项。

图1-145 时间轴效果

STEP 80 单击“时间轴”面板上的“插入图层”按钮，新建“图层6”，单击“图层6”第52帧位置，按“F6”键插入关键帧，将“星星动画3”元件拖入场景中，单击“工具”面板上的“任意变形工具”按钮，调整元件的大小，如图1-146所示。

图1-146 拖入元件

STEP 81 单击“图层6”第57帧位置，按“F6”键插入关键帧，选中帧上元件，设置其“属性”面板上的“颜色”样式下的“色调”为“#FFFF00”，单击第52帧位置，选中帧上元件，设置其“属性”面板上的“颜色”样式下的“Alpha”值为“0%”，单击“工具”面板上的“选择工具”按钮，调整元件位置。单击第52帧位置，设置“属性”面板上的“补间”类型为“动画”，时间轴效果如图1-147所示。鼠标拖动选中第121帧至第240帧位置，单击鼠标右键，在弹出的快捷菜单中选择“删除帧”选项。

图1-147 时间轴效果

STEP 82 单击“时间轴”面板上的“插入图层”按钮，新建“图层7”，单击“图层7”第52帧位置，按“F6”键插入关键帧，将“星星动画3”元件拖入场景中，单击“工具”面板上的“任意变形工具”按钮，调整元件的大小，如图1-148所示。

图1-148 拖入元件

STEP 83 单击“图层7”第57帧位置，按“F6”键插入关键帧，选中帧上元件，设置其“属性”面板上的“颜色”样式下的“色调”为“#00FFFF”，单击第52帧位置，选中帧上元件，设置其“属性”面板上的“颜色”样式下的“Alpha”值为“0%”，单击“工具”面板上的“选择工具”按钮，调整元件位置。单击第52帧位置，设置“属性”面板上的“补间”类型为“动画”，时间轴效果如图1-149所示。鼠标拖动选中第121帧至第240帧位置，单击鼠标右键，在弹出的快捷菜单中选择“删除帧”选项。

图1-149 时间轴效果

STEP 84 单击“时间轴”面板上的“插入图层”按钮，新建“图层8”，单击“图层8”第52帧位置，按“F6”键插入关键帧，将“星星动画3”元件拖入场景中，单击“工具”面板上的“任意变形工具”按钮，调整元件的大小，如图1-150所示。

图1-150 拖入元件

STEP 85 单击“图层8”第57帧位置，按“F6”键插入关键帧，单击第52帧位置，选中帧上元件，设置其“属性”面板上的“颜色”样式下的“Alpha”值为“0%”，单击“工具”面板上的“选择工具”按钮，调整元件位置。单击第52帧位置，设置“属性”面板上的“补间”类型为“动画”，时间轴效果如图1-151所示。鼠标拖动选中第121帧至第240帧位置，单击鼠标右键，在弹出的快捷菜单中选择“删除帧”选项。

图1-151 时间轴效果

STEP 86 单击“时间轴”面板上的“插入图层”按钮，新建“图层9”，单击“图层9”第50帧位置，按“F6”键插入关键帧，将“黑框文字动画”元件拖入场景中，单击“工具”面板上的“任意变形工具”按钮，调整元件的大小，如图1-152所示，时间轴效果如图1-142所示。

图1-152 拖入元件

图1-153 时间轴效果

STEP 87 单击“时间轴”面板上的“插入图层”按钮，新建“图层10”，单击“图层10”第148帧位置，按“F6”键插入关键帧，将“文字2动画”元件拖入场景中，单击“工具”面板上的“任意变形工具”按钮，调整元件的大小，如图1-154所示。

图1-154 拖入元件

STEP 88 单击“图层10”第153帧位置，按“F6”键插入关键帧，单击第148帧位置，选中帧上元件，设置其“属性”面板上的“颜色”样式下的Alpha值为0%。单击第148帧位置，设置“属性”面板上“补间类型”为“动画”，时间轴效果如图1-155所示。

图1-155 时间轴效果

STEP 89 单击“时间轴”面板上的“插入图层”按钮，新建“图层11”，单击“图层11”第150帧位置，按“F6”键插入关键帧，将“文字3动画”元件拖入场景中，单击“工具”面板上的“任意变形工具”按钮，调整元件的大小，如图1-156所示。

图1-156 拖入元件

STEP 90 单击“图层11”第155帧位置，按“F6”键插入关键帧，单击第150帧位置，选中帧上元件，设置其“属性”面板上的“颜色”样式下的“Alpha”值为“0%”。单击第150帧位置，设置“属性”面板上的“补间”类型为“动画”，时间轴效果如图1-157所示。

图1-157 时间轴效果

STEP 91 单击“时间轴”面板上的“插入图层”按钮，新建“图层12”，单击“图层12”第150帧位置，按“F6”键插入关键帧，将“输入框”元件拖入场景中，单击“工具”面板上的“任意变形工具”按钮，调整元件的大小，如图1-158所示。

图1-158 拖入元件

STEP 92 单击“图层12”第155帧位置，按“F6”键插入关键帧，单击第150帧位置，选中帧上元件，设置其“属性”面板上的“颜色”样式下的“Alpha”值为“0%”。单击第150帧位置，设置“属性”面板上“补间”类型为“动画”，时间轴效果如图1-159所示。

图1-159 时间轴效果

STEP 93 用与步骤76同样的方法制作其他的图层效果，如图1-160所示。时间轴效果如图1-161所示。

图1-160 拖入元件

图1-161 时间轴效果

STEP 94 单击“时间轴”面板上的“插入图层”按钮，新建“图层18”，单击“图层18”第1帧位置，单击“工具”面板上的“矩形工具”按钮，在场景中绘制一个273px×122px的矩形，如图1-162所示。

图1-162 绘制矩形

STEP 95 选中图形，执行“修改→转换为元件”命令，设置“类型”为“图形”，“名称”为“遮照”，如图1-163所示。

图1-163 转换为元件

STEP 96 单击“图层18”第15帧位置，按“F6”键插入关键帧，单击“工具”面板上的“选择工具”按钮，调整场景中元件的位置，如图1-164所示。

图1-164 调整元件的位置

STEP 97 分别单击“图层18”第20帧、第121帧、第125帧、第143帧和第147帧位置，按“F6”键插入关键帧，分别单击“图层18”第17帧、第123帧和第1457帧位置，按“F6”键插入关键帧，分别调整元件位置，如图1-165所示。

图1-165 调整元件的位置

STEP 98 单击“图层18”第1帧、第132帧和第136帧位置，按“F6”键插入关键帧，单击“工具”面板上的“选择工具”按钮，将场景中元件移至顶端位置。

STEP 99 分别单击“图层18”第1帧、第15帧、第17帧、第121帧、第123帧、第125帧、第136帧、第143帧和第145帧位置，设置“属性”面板上的“补间”类型为“动画”，时间轴效果如图1-166所示。

图1-166 时间轴效果

STEP 100 右键单击“图层名称”，在弹出的快捷菜单中选择“遮照层”选项，如图1-167所示。

图1-167 设置“遮照层”

STEP 101 分别单击“图层3”至“图层16”，执行“修改→时间轴→图层属性”命令，打开“图层属性”面板，设置如图1-168所示。

图1-168 设置“图层属性”面板

STEP 102 单击“时间轴”面板上的“插入图层”按钮，新建“图层19”，单击“图层19”第1帧位置，将“边框下”元件拖入场景中，如图1-169所示。

图1-169 调整元件的位置

STEP 103 分别单击“图层19”第20帧、第121帧、第125帧、第143帧和第147帧位置，按“F6”键插入关键帧，分别单击“图层19”第17帧、第123帧和第1457帧位置，按“F6”键插入关键帧，分别调整元件位置，如图1-170所示。

图1-170 调整元件的位置

STEP 104 单击“图层19”第1帧、第132帧和第136帧位置，按“F6”键插入关键帧，单击“工具”面板上的“选择工具”按钮，将场景中元件移至顶端位置。

STEP 105 分别单击“图层19”第1帧、第15帧、第17帧、第121帧、第123帧、第125帧、第136帧、第143帧和第145帧位置，设置“属性”面板上的“补间”类型为“动画”，时间轴效果如图1-171所示。

图1-171 时间轴效果

STEP 106 单击“时间轴”面板上的“插入图层”按钮，新建“图层20”，单击“图层20”第1帧位置，将“边框下”元件拖入场景中，单击“工具”面板上的“任意变形工具”按钮，将元件垂直翻转过来，如图1-172所示。

图1-172 拖入元件

STEP 107 单击“时间轴”面板上的“插入图层”按钮，新建“图层21”，单击“图层21”第1帧位置，将“牛1动画”元件拖入场景中，如图1-173所示。

图1-173 拖入元件

STEP 108 单击“图层21”第5帧、第126帧和第132帧位置，按“F6”键插入关键帧。单击“图层21”第1帧和第132帧位置，设置其“属性”面板上的“颜色”样式下的“A l p h a”值为“0%”，如图1-174所示。

图1-174 设置“Alpha”值

STEP 109 分别单击“图层21”第1帧和第126帧位置，调整元件位置，如图1-175所示，设置“属性”面板上的“补间”类型为“动画”， 鼠标拖动选中第133帧至第240帧位置，单击鼠标右键，在弹出的快捷菜单中选择“删除帧”选项。

图1-175 调整元件的位置

STEP 110 单击“时间轴”面板上的“插入图层”按钮，新建“图层22”，单击“图层22”第133帧位置，按“F6”键插入关键帧，将“牛1动画”元件拖入场景中，如图1-176所示。

图1-176 拖入元件

STEP 111 单击“图层22”第138帧位置，按“F6”键插入关键帧。单击“图层22”第133帧位置，设置其“属性”面板上的“颜色”样式下的“Alpha”值为“0%”，调整元件位置，如图1-177所示。

图1-177 设置“Alpha”值

STEP 112 单击“图层22”第133帧位置，设置“属性”面板上的“补间”类型为“动画”，时间轴效果如图1-178所示。

图1-178 时间轴效果

STEP 113 执行“文件→保存”命令，保存文件，按“Enter+Ctrl”组合键测试动画，效果如图1-179所示。

图1-179 预览效果

1.3.2 案例总结

● 使用钢笔绘制图形时注意调整角度。

● 注意渐变填充时的角度和大小。

上一章目录下一章