效果图:
01 Ai文件导入Ae的两种方式
第一种方式就是常规的导入方法,直接将保存好的Ai源文件导入Ae之中;第二种就是用overlord插件直接导入。
演示下这两种导入方式。大多数情况下,在Ai中绘制的角色都在同一个图层里面。
而Ai中的图层与Ae中的图层是对应的,如果的角色都绘制在同一个图层里面,导入ae后也是只有一个图层,所以为了方便后面的动效绑定,需要在Ai中对角色进行图层整理,不同的元素要放在不同的图层并且命好名字。
整理完成后,将Ai源文件拖入Ae中,导入类型选为合成。
选中所有的图层,右键,从矢量图层生创建图形,然后将原来的文件删除,这样就正确的导入到Ae中了。
第二种方法就是使用overlord插件直接导入,在Ae中新建一个与Ai画布大小相同的合成。
在Ai中选中要导入的元素,点击导出按钮,选中的元素就就像复制粘贴一样导入到Ae之中了,而且图层名称和位置都不会发生改变。
02 Duilk 和Joysticks_n_Sliders插件的绑定原理
duilk是一个功能非常全面的角色绑定插件,里面有骨骼Ik,控制器很多好用的功能;Joysticks_n_Sliders这个插件是专门做控制器帮定的小插件,使用起来简单高效。
首先了解下二维控制器,控制器中间的小圆点是控制滑块,拖动滑块来控制绑定对象的运动,外边的方框是控制器的外边框,用来限制中间滑块的运动范围。
以控制器中心为原点画一个二维坐标,坐标每个轴向分别与控制器产生两个交点,包括原点在内一共五个点,在用二维控制器进行绑定的时候,至少需要设置好这五个点的姿态,然后拖动滑块的时候就可以在这五个点的姿态间自由切换,并且通过不同的两个点之间的姿态强度叠加,来产生新的姿态。
JS插件的绑定在时间轴上直接设置五个连续的关键帧,分别代表控制器的原点、右、左、上、下五个点,设置完成后,就可以直接绑定了。
duilk插件控制器是将X轴和Y轴分开绑定的,需要先设置好三个点分别带表原点、左、右位置,将其绑定到x轴向上;然后再设置三个点,分别代表原点、上、下三个位置,再将其绑定的y轴向上。
分别用两个插件来绑定下小球的位置属性,首先打开JS插件,打开小球的位置属性,从第零帧开始依次设置五个位置关键帧,第零帧是原点位置,也就是初始状态,后面四帧分别代表右、左、上、下四个位置。
五个关键帧设置好后,点击创建控制。JS插件会根据设置的五个关键帧自动生成控制器。
拖动控制器滑块,小球位置就成功绑定到了控制器上。
用Duilk来做同样的绑定,Duilk绑定是将x轴和y轴分开的,所以在绑定之前,打开小球的位属性,右键,选择单独属性,将x轴和y轴分开,在duilk中点击归零器,将坐标位置归零,方便后面进行参数话的调整。
进入Duilk连接器模块,这里进行控制器绑定的主要功能区,第一步,新建一个二维控制,对控制器大小进行简单调节。
首先来绑定x轴运动,在第10帧对x坐标打关键帧,代表原点位置。左边第0帧向左移动小球,代表左边位置,右边向右移动小球代表控制器右边位置。
设置完成之后,选中设置好的关键帧,选择轴向为x,点击链接到属性。
左右拖动滑块,小球x轴就绑定到控制器上了。
继续来绑定y轴,同样在第10帧对y轴坐标打关键帧,左边第0帧向上移动小球,代表控制器上面的位置,右边第20帧向下移动小球,代表下边位置,选中设置好的关键帧。
选择轴向为y,点击链接到属性,拖动滑块,小球位置的绑定就完成了。
到这里两个插件的绑定原理就讲完了,其实绑定流程和原理都大同小异,两个插件也各有优劣,所以在本次的角色绑定案例中才会结合两个插件一起使用。下面是表情姿态分析和角色绘制技巧。
01 表情姿态参考的搜集与分析
在Ai中绘制角色的时候,需要找一些表情参考,根据自己需要的风格选择合适表情参考,分析这些不同的表情参考可以总结出不同情绪下五官的不同形态,有助于进行角色的绘制和后期绑定。
不同情绪下嘴巴的状态,嘴巴会张大,合拢,表示消极的情绪时会向上弯,表示积极的情绪会向下弯,所以我们在绑定的时候尽量要能实现这些姿态,其他五官也需要经过类似的分析,后面做动效绑定的时候 才有方向,还可以将不同的五官状态单独绘制出来。
02 Ai角色绘制的隐藏技巧
在Ae中要模拟出角色头部转动的伪3D效果,第一个难点就是如何实现头发和胡子左右转动时的三维效果。
在绘制的时候需要使用一点小技巧,这里头发和胡子部分我分了好四个图层,最下面一层是头发的整体形状,脸部发际线部分用了两个单独的形状图层来模拟,后面在Ae中通过添加合并路径来模拟头部左右转动时发际线的运动。最上面还有一个遮盖层,来遮住头发漏出来的描边。
胡子的绘制跟发际线一样的道理, 底部是胡子整体形状,然后用两个图层来模拟胡子与脸部交接的地方,用一个不带描边形状遮胡子漏出来的描边。
将头发和脸部图层导入到Ae中,将用来模拟发际线的两个图层合并为一个图层。点开合并后图层的下拉三角,选中内容,点击添加“合并路径”,点开合并路径。
模式改成相减,调换下上下顺序,这样发际线就简单模拟出来了。
打开减去部分的位置属性,左右拖动,就模拟出头部左右转动的效果了。
其他五官的绘制没有特别的技巧,按照平时的方法来绘制就可以。绘制完成后,对文件图层进行简单整理,下个部分正式开始绑定。
正式开始绑定
开始前,先来看一下绑定的逻辑,这里用一个主控制器来控制头部整体的转动,角色头部所有元素都要绑定到这个控制器上,而眼睛、嘴巴和其他五官我们再用另外的控制器单独进行绑定。
01 简单模拟头部旋转,头发胡子的绑定技巧
将绘制好的角色导入到Ae之中,对图层整理命名,可以用颜色标签对图层进行分类整理。
首先来绑定发际线的部分。找到用来模拟发际线的两个图层,将其合并为一个图层,打开图层内容,添加合并路径,模式改为相减,调整图层顺序得倒正确的效果。
打开剪去部分的位置属性,需要通过剪去部分的左右移动来模拟头部左右转动的效果。
Duilk的绑定是x轴和y轴分开的,而这里无法将图层的位置单独分开,所以需要新建一个空白图层,将其位置属性先绑定到空白图层上。新建一个空白对象,命名,打开空白对象的位置属性,右键,单独尺寸,点击归零器,将空白对象的位置坐标就归零。
需要把头发剪去部分的位置坐标绑定到空白对象上,这里会用到一个简单的表达式。按住alt键点击小秒表图标,英文输入法下,在右边的表达式编辑区中输入:var空格x空格=空格。
然后将左边的小蚊香图标拖动到,空白层的x位置上,然后用分号结束这句语法。
按Enter键换行,同样输入var空格y空格=空格,将左边的小蚊香图标拖动到空白图层y位置上,然后用分号结束。
按两次enter键分行,输入[x,y],就完成表达式的绑定了。来拖动空白对象的位置就可以控制头发剪去部分的位置了,而且,x轴和y轴是分开的,方便用Duilk来进行绑定。
首先绑定X轴的运动,在第10帧对空白层的x位置打关键帧,在左边第0帧,向左移动发际线到合适的位置,在右边第20帧向右移动发际线到合适的位置。
进入Duilk连接器模块,点击控制器的滑块,点击选择控制器,选中刚刚设置好的三个关键帧,选择轴向为x轴,链接至属性,左右拖动控制器滑块,发际线就跟着一起运动了。
同样的原理,来做抬头和低头的绑定,在第10帧对空白层的y位置打关键帧,左边第0帧向上移动发际线到合适的位置,右边第20帧向下移动发际线到合适的位置。选中三个关键帧,选择轴向为y轴,点击链接至属性,发际线部分就绑定完成了。
继续绑定头发底部形状,头部左右转动的时候,鬓角的头发也会根据角度的变化改变形态,用同样的方法对头发鬓角做绑定。
头发底部图层绑定完成后,还要对头发遮盖部分进行绑定,发现在某些角度下,脸部图层的描边会穿帮,所以要对头发遮盖的形状路径做绑定,让它匹配每一个角度。
02 其他五官的绑定
接着来做耳朵的绑定,头部在左右转动的时候耳朵也会一起转动,而且耳朵与头发之间还会产生前后的遮挡关系。
需要对耳朵的位置和透明度进行绑定,在第10帧,对耳朵位置和透明度打关键帧。在第0帧,头部向左转动,左耳向右移动,并逐渐被头部遮盖,所以位置向右移动,透明度为零。右耳则向左移动,并且从头发后面跑到前面来,透明度为100。
在右边第20帧的时候,头部向右转动,左耳从后面跑到前面来,右耳则移动到头部后面,并被头发遮挡,所以左耳向右移动,透明度为100;右耳向左移动,透明度为零。
将耳朵复制一份,移动到最前面。来模拟耳朵在没有头部遮挡时的运动。选中透明度的关键帧,右键,切换定格关键帧。
拖动滑块,根据效果,再次调整前后耳朵不同位置透明度的数值,直到得倒正确的效果。
这里用joysticks_n_Sliders插件来做绑定,切换到钢笔工具,直接在Ae中进行绘制。
对上下牙齿添加设置遮罩,遮罩图层选择嘴巴填充,保证牙齿在嘴巴之内。
准备完成后,打开joysticks_n_Sliders插件,来开始绑定,joysticks_n_Sliders插件需要设置连续的五个关键帧来代表控制器的中右左上下五个位置。
调整完成之后点创建控制器,对控制器大小颜色进行简单调整,拖动控制器滑块,嘴巴的绑定就完成了。
完成