|
|
[制作缘由] 受电视“百事可乐”广告启发，制作广告片尾的百事可乐的波浪动画。[学习重点] 1、辅助线的灵活使用。 2、路径对象的调整方法。 3、使用蒙版产生动画效果。[面向对象] fw的初级学习者[源文件下载] 点击这里 [制作步骤] 先来看效果演示：6 V& x( l/ {6 X! e! v
2 y, l& Q* W- @% w2 ~2 O
 7 S2 @# W( [" x) E6 J1 g
一、基础图形绘制 1、新建文档，设置文档大小为400*400， 背景色为“#006699”。 2、在编辑区绘制一个圆形对象， 在属性面板对其进行相关设置：填充色任意，不和背景色一致即可，不要描边，宽和高均设为300，X和Y均设为50，这样就保证了圆形对象在编辑区的位置居中。 3、选中圆形对象，按“Ctrl+Shift+D”五次，克隆五个圆形对象，在层面板上暂且隐藏这五个克隆对象。 4、选择菜单“视图|标尺”（Ctrl+Alt+R）命令，在编辑区的上侧和左侧显示标尺。 5、选择菜单“视图|辅助线|显示辅助线”（Ctrl+;）命令，在编辑区上允许显示辅助线，以便于我们接下来的操作。 6、分别从上侧标尺和左侧标尺出拖拽出水平和垂直方向的两条辅助线，使两条辅助线相交于圆心。如果不确定是否相交于圆心，可以分别双击任意一条辅助线，在弹出的“移动引导线”的设置框中将“位置”均设为200，这样配合第2步对圆形对象的大小、位置的数值设定，确。两条辅助线相交于圆心处。6 D' I8 D; g& b
+ w" L( n0 [( f * P: h0 w. V$ _! ?" }# M! \
2 u5 `6 Q; D2 B G* e [注]观察“百事可乐”的图标可以发现，位于图标中间位置的白色波浪图形，并非是高度均一的，而是波峰和波谷的位置白色波浪的高度最高，位于两侧的起点和终点高度最低，这样，接下来我们就先在编辑区拖拽出相关的辅助线，以备接下来的白色波浪图形的绘制工作。
6 C& X6 S1 ^" x$ f8 R A1 U u 7、从上侧标尺处依次拖拽出6条辅助线，这样包括先前的经过圆心位置的辅助线，这样，编辑区总共有7条水平方向的辅助线。从上而下，每条辅助线的位置依次为：“155、170、185、200、215、230、245”
# T' p* A0 J" U/ I4 E, G5 P) U% j2 m7 `' J. m2 x U
 3 e+ B }# H1 j
4 t' V( p/ t9 P# n 8、在编辑区绘制一个矩形对象，使其左边在圆形对象的左侧，右边与垂直方向的辅助线重合，上边和水平方向的第2条辅助线重合，下边和水平方向的第5条辅助线重合，填充颜色为白色，无描边色，如下图所示。
2 T/ r Q/ s1 M0 x0 X" a, Y& e1 w
" \9 @, ~/ o/ | U# i0 {" q! ~' l, j / x7 ^, k5 B P: P4 @' `" C
9 c c5 D6 k) A7 J7 T
9、同时选中编辑区的圆形对象和矩形对象，选择菜单“修改|组合路径|交集”命令。将生成图形对象的填充颜色设为白色。3 j( ~7 U0 ]0 V2 @+ L5 U" j2 L
; W7 V; i8 v7 T$ L
4 J8 Z: n" A0 Z! L- ^) A6 q' [4 q }
10、取消层面板上2个圆形对象的隐藏状态。 11、参照第8、9步的方法，在垂直辅助线的右侧绘制举行对象，并且和圆形对象进行“组合路径”的操作，得到右侧的图形对象，如图
5 Z% l& E4 ?/ u( h) G+ x q
+ a7 B% v9 u; o1 k( \* j: i- u1 r
9 w7 L! R p9 ?6 r* m
1 o6 S8 }) s6 Q4 f* v 12、使用“部分选定”工具，选中左侧白色图形对象由下角的路径节点，按键盘上向下的方向键，向下方将其移动，使其与水平方向的第6 条辅助线相交为止。 4 N7 `! O& l) \
2 C& Z, e+ ]/ [! S% F
 % ~1 x: p U8 [. i
2 i/ ^% d, y# r# v( @- w
13、参照上一步的操作方法，将右侧白色图形的左上角的路径节点移动到与水平方向的第2条辅助线相交。
! y( ^" d, W* I6 Z9 i. d, t) E6 U
 7 ]: A6 H# W8 G, x. K9 m5 K
7 b: v' \" O m' v7 X6 U! U) n [注] 12、13步的操作，可以在放大编辑区显示视图的状态下进行，这样准确性更高。 14、同时选定左右两侧的白色图形，选择菜单“修改|组合路径|联合”命令，将两个图形对象联合为一个路径对象。 15、为了便于操作，按“Ctrl+3”组合键将编辑取视图缩放到“300%” 16、按下“Alt”键，使用部分选定工具选中白色路径对象左下角的路径节点，向右下方拖动，以对该路径节点的单条路径调解手柄进行调整。本步调整的目的是为了调整右侧的调解手柄，使得节点右侧的路径形状发生预期的变化，所以如果调整的手柄错误的话，可以使用快捷键“Ctrl+Z”进行快速的撤销操作。本步操作如下图所示。
6 U6 Z2 _5 ^6 ?& p$ m9 D1 r! g2 U- z3 J3 W( n) d- F1 f, }
 9 ]# e/ s: @2 b; q0 U( E
7 V7 g5 O( Z2 R$ i8 ` 要使得路径与水平方向的第7条辅助线相切，调整的预期目的和最终效果如下图所示。+ l- }* S2 D0 ]) F( A9 G' o
) b1 w8 M8 O7 K# e* e2 K
+ P# p( L/ E& p4 B
. c4 e4 R; |$ P- \, J% q. {- p2 ] 17、接着调整垂直辅助线和水平方向第6条的辅助线相交处的路径节点。同样是配合“Alt”键，对该路径节点进行单一方向调解手柄的调解。为了使得该节点左右侧的路径连接显示平滑，尽量使调整后的两个调节手柄位于同一条水平线上。如下图所示。" y& r& {- B @# M6 M* x, }
2 D4 L! L6 u, |& s, m
' \) j/ Y4 P0 A8 S: G+ r- F& X" q1 y- H, V
18、参照16、17步的方法，分别对坐上角的路径节点和垂直辅助线和水平第2条辅助线交点处的路径节点进行调整，具体调整后生成的图形效果如下图所示。
1 |! z4 Q8 w! X- l) H% h8 K8 T
, S" z7 p1 `! Z, E: R 4 I1 C/ W5 G: Q# O- N+ Q
4 ]" _. ]4 D Z5 u; o [3 [1 T 19、经过如上的麻麻烦烦步骤的操作，“百事可乐”图标的白色波浪图形制作完毕，接下来的步骤比较简单，制作红、蓝的两个半圆即可。 20、选中圆形对象，选取工具箱的“刀子”工具，沿着水平方向穿过圆心的辅助线拖动鼠标，切割完圆形对象后，在编辑区的其他位置单击鼠标，可以看到层面板已经出现了两个半圆路径对象。将上面的半圆对象的填充颜色设为红色，下面的半圆对象的填充颜色设为蓝色（“#0000CC”）。 好了，到此为止，“百事可乐”图标的基础形状制作成功。如下图所示。8 @* m5 X3 |1 c/ a. A) t' q2 K2 p
/ N1 o3 \$ U/ K$ z8 U) n
+ k& A/ b* J+ U0 K
+ h; f7 ~1 b! P9 z$ r 二、动画元件制作 1、在编辑区的空白位置单击鼠标，单击属性面板上“画布大小”按钮，在弹出的“花布大小”对话框中，将宽的数值改为“800”，其余各项保持默认即可。 2、选中波浪图形对象，按“Ctrl+Shift+D”组合键两次，克隆两个波浪图形对象，分别在属性面板上设置两个克隆对象的“X”值为“-50”和“550”，此刻编辑区如下图所示。7 @& M# q7 T; G* e- [( p" D7 s
5 s1 E* Z! ]' V
: B5 Z2 Z$ \' I# x: A- j: u6 b3 W- i! p# ~. e- ^2 x% H2 Z
3、选中最左侧的波浪对象，按键盘上向右的方向键移动它，直到其与中间的波浪对象重合相交为止。如下图所示。
& o. ?, w$ Y6 {8 z8 ~9 b3 ^$ [/ T8 q* [% P0 C
 % D/ \* {) ^9 _: Y- q0 h
" C- d! f: ^/ \0 B J { 4、同样，向左侧移动最右侧的波浪图形，也使其与中间的波浪对象重合相交。 5、同时选定编辑区的三个波浪对象，选择菜单“修改|组合路径|联合”命令，将三个路径对象联合为一个路径对象。如下图所示。' t, ~* L" A' d- P6 R) m, F( J
4 p" ] u0 P5 F2 \' p
$ y% |+ X3 I! M" v9 X) y$ p7 q7 j/ E
+ w9 R% m- c7 i* Q; |3 l _ 6、可以使用部分选定工具，对各个路径节点进行微调，使路径变得更为平滑。 7、选中波浪图形对象，在属性面板上将其“X”值设为“250”。接着再次对“画布大小”进行设定，将宽的数值改为“400”，其余各项保持默认即可。 8、选中波浪图形对象，按“F8”功能键，将其转化为“元件”。在弹出的“元件属性”对话框中，将类型设为“动画”，确定即可。 9、在弹出的“动画”设置框中，将帧数设为“12”，移动设为“280”，方向为“180”，其余各项保持默认，确定即可。
3 T& Y( ]& F& Z# C- T7 `4 P5 u g4 L; ^; m
$ j; k, `5 A: k9 @$ [5 }, h
! L: d% i0 `1 r: K% r 10、在层面板上新建“层2”，将动画元件拖放到“层2”。双击“层1”，在弹出的属性设置框中，勾选“共享交叠帧”。9 ?: B, o% r, F5 h# a
9 L, i& [) `& O- W/ L 6 [& A( B, p- V3 {, j
0 E9 t% h- i% [' w 11、打开帧面板，将帧12删除，这样，动画就会变得更为连贯，不会出现首尾重合时的停顿。 到此，波浪动画制作完毕，但是并未达到预期的动画目的，别急，下面就是使用蒙版来完成最终动画的制作。
" x2 R! o5 b% V) Q" z1 z% K, U 三、完成最终动画 1、选中层1上面的1个圆形路径对象，取消其隐藏状态。 2、在编辑区上水平方向的第1条和第7条辅助线中间绘制一个矩形对象，上、下两边要分别与第1和第7条辅助线重合，宽要超过圆形对象的宽度即可。如下图所示。6 M0 s0 t3 y6 }9 L$ G$ F
- J7 F3 L9 B' V9 P
6 U+ w" b0 w# U9 w9 G
4 V& o4 k5 {( `; z' V 3、同时选定矩形对象和圆形对象，选择菜单“修改|组合路径|交集”命令。 4、选中上一步操作产生的路径对象，按“Ctrl+X”组合键，剪切它，然后选中“层2”上的动画元件，选择菜单“修改|蒙版|粘贴为蒙版”命令，OK，最终动画效果制作完毕，按编辑区下方状态栏上的“播放”按钮，察看最终的动画效果。 对于动画的速度不够满意的话，可以通过帧面板来进行调整，这里不再赘述。- B' h3 l% t8 |
四、图形美化操作 接下来的操作就是对图形效果最终的美化操作处理了，没有兴趣的朋友到这里可以让你的眼睛休息一下了！  1、锁定动画元件所在的“层2”，新建一个“层3”，将“层1”中的1个圆形对象拖放到“层3”，这样就自动取消了其隐藏状态，接着，锁定“层1”。 2、选中“层3”上的圆形对象，再次克隆2个圆形对象。 3、选中最上层的圆形对象，在属性面板上进行效果设定。选择效果菜单的“阴影和光晕|内侧阴影”命令，具体的设定如下图所示，其中阴影颜色选择白色，勾选“去底色”。
: m( g& B7 h4 l' Q( M, r; x9 e9 a" _/ d' d
0 m5 z4 o7 X7 M& z- E$ C
8 [3 L0 g0 |. P 4、选定剩余的两个圆形对象，向右侧移动一定距离，并且使其位置摆放如下图所示。/ [+ z8 K- v C% N( \
# {' K0 R# O5 f* T( T1 ]
0 z- j; I+ X& i) m; Y/ i7 ~ m4 S/ s/ K- r. p& _
5、选定两个圆形对象，选择菜单“修改|组合路径|打孔”命令，选取工具箱的“缩放”工具对生成的路径对象进行缩放操作，如下图所示。
! M9 p9 @3 G! l' P0 A4 o: p. m7 ?8 d' F7 M
: E7 y ^- k# ~+ s6 b4 |5 O1 w+ p1 o% c& {) ~/ d4 A
6、在属性面板上对该路径对象进行设定，填充类型为“实心”，颜色设为黑色，边缘为“羽化”，数值大小为35左右，描边设为“无”，将透明度设为50左右。具体设置如下图所示。
6 _4 D, m$ X9 a4 z3 S0 _$ M4 r) _/ Z% i2 y6 {$ n
 1 G. {) ~9 [/ d0 ~8 B6 U; [
. A$ b( t0 l( l, w9 n4 O 7、双击“层3”，在弹出的层的属性设置中，勾选“共享交叠帧”。 8、锁定“层3”，解除“层1”的锁定，选定圆形路径对象，在属性面板上对其进行效果设置。选择效果菜单中的“阴影和光晕|发光”命令，具体的设定如下图所示，其中发光的颜色设为“#00CCFF”。0 w) d: w! i" }$ D( G
5 t' Q2 M |. \& [# U6 v) @' u- r
 * s y) M( V5 Z0 ]
6 E/ S3 n/ R0 l; T( A 这样，总体的图形修饰也就基本完成了，如果需要添加一些文字的话，就在“层3”里面直接添加即可了。 希望通过这篇教程的学习，大家对于辅助线在实际图形制作中的功能有一个更深入的了解，当然蒙版动画的知识想必大家都了解了不少了，本文对于蒙版的使用也算是一个具体的实例展示吧！好了，本文讲解到此全部结束，欢迎您的批评指正，欢迎您与我们交流！( ~9 n/ ^, r& t& _7 A w' B9 ?
- z6 p0 x4 \7 o* M- J2 G3 `5 H* ~ |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
在线客服（工作时间:9:00-22:00）
