注:此教程参考书本,所有图片均来自书本,本人经过练习并反复研究后把自己的体会和制作过程用自己总结的语言发表,版权归编者所有

这个教程是延续上一个教程表达式范例_之变脸效果 之后的又一个针对AE表达式的练习,在做之前,还是再先介绍一下什么是表达式

从After Effects 5.0开始,程序加入了Expression(表达式),这是一种建立在JavaScript1.2基础上,内置于AE的程序语言.Expression在很多情况下对于动画制作有很强的控制能力,如果你学过Macromedia Flash,那一定知道在它之中内置一种语言:ActionScript,其实AE的程序语言原理也是类似的,所以,学好Expression(表达式),对制作动画会有很大帮助,可以预见,AE内置的语言在以后的升级版本中将会更强大(ActionScript2.0是一个例子)

这个例子我将详细说明,一边做练习一边捉图发教程,整个过程可能会比较长,除了书上的一些内容简介之外,还包括大量自己在学习过程中摸索出来的的总结性语言

需要用到的知识点:1.表达式的灵活运用 2.3D图层的参数设置 3.Camera参数的设置障碍 4.Split Layer(分离层)命令的使用

首先还是新建一Comp,这次使用的场景设置为768X576,别的几个参数和以前的教程相似

从外部导入5个EPS文件,可以直接将文件夹导入

选择"红桃A"和"红桃2",将其选择,然后拖至Timeline中

分别选择"红桃A"和"红桃2"的三维图层按钮,将它们处于打开状态

我们先把Anchor Point定位于扑克牌下方正中央(默认状态为中心点),选择"红桃A"层,展开Transform,将Anchor Point的Y轴设置为248,同时将Position 的Y轴设置为412,使其轴心位于图形底部

设置一个扑克展开的效果,我们对Z Rotation设置关键祯来添加动画效果,单击其前面的码表,分别在0:00:00:01和0:00:02:00处添加关键祯

查看一下效果,可以发现红桃A以Anchor Point为中心点旋转,并露出了后面的红桃2

再来设置"红桃2"的参数,你是否注意到了,在Project窗口中有5张不同牌面的扑克牌,很显然,我们想做的效果之一就是将5张扑克牌一张张展开,但是如果要一个个设置参数,势必会非常麻烦,如果一不小心就会设置错参数,造成前功后弃,这时候AE中的表达式就能帮我们解决很多问题,比如说,先不说了,继续看下面,你会慢慢发现Expression的优点的 选择"红桃2",展开Transform,按住Alt键单击其Anchor Point前的码表,这时候表达式输入框就出现了,这是一种快速打开表达式输入框的方法,再来总结一遍:首先按住Alt键不放,然后找到你要设置的相关参数前面的码表,用你的鼠点中它,然后就出现了表达式输入框,自己先试一下吧

当然,你也可以使用另外一种方法来打开表达式输入框:使用菜单中的命令,它们最后的效果是一样的 接下来就用钢材学的方法来给Anchor Point来添加一个表达式,打开表达式输入框后,用鼠按住表达式拾取按钮(右排三个按钮中的第二个蜘蛛网图案样式的按钮)不放,拖至"红桃A"的Anchor Point上

这时候你会发现右侧自动出现了一行表达式代码:

这段代码的含义是:当前层的Anchor Point参数与被连接层("红桃A")的Anchor Point数值保持一致

查看一下效果

好象没有保持一致啊,怎么一张牌在上面而另外一张牌在下面呢?请仔细看图中的Anchor Point位置,发现它已经移至扑克牌下部中央位置,其实已经保持一致了,回到"红桃A"的Anchor Point去看看,是否发现它的Anchor Point也在扑克牌的下方吗?至于为什么两张扑克牌位置不重叠,那是因为我们钢材仅仅是设置了Anchor Point的表达式,而Position的参数没有更改过,下面设置Position参数以及表达式,使其位置和"红桃A"的Position保持一致

用钢材介绍的方法打开Position的表达式输入框,输入以下代码:

下面仔细介绍这段代码的含义:
a,b,c是三个变量,它们分别代表着Position中的三个参数X,Y,Z,
(1)在a=this_comp.layer(this_layer,-1).position[0]+3; 这句代码中,

黑体部分 a=this_comp.layer(this_layer,-1).为当前层("红桃2")的上一层,此时的"红桃2"位于Timeline的第二层,所以这儿所指的上一层就是"红桃A"层了,这儿的关键部分在于"-1","-1"就代表着当前层的上一层

蓝体部分 暂时跳过

红体部分 a在这儿是X的变量,因此a=this_comp.layer(this_layer,-1).position[0]+3的含义是:当前层的X的变量的数值等于上一层的X的变量的数值加上3后相同,或者换一种说法,"红桃2"层的X变量的数值与"红桃A"层的X变量的数值加上3后相同也就是说,在Anchor Point不变的情况下,Position的X轴的位置向右移动3个单位的位置

(2)在

这句代码中,

黑体部分 同上,即:a=this_comp.layer(this_layer,-1).为当前层("红桃2")的上一层,此时的"红桃2"位于Timeline的第二层,所以这儿所指的上一层就是"红桃A"层了,这儿的关键部分在于"-1","-1"就代表着当前层的上一层

蓝体部分 钢材前面没有介绍,现在看了第二句代码,你应该看出规律来了,我也看出来了,虽然书上没有介绍,但是我们同样可以总结出来,position[ ] ,中括号里面的数值代表着代码在层中的位置,越前面的代码数值越小,所以会看到第一句代码a=this_comp.layer(this_layer,-1).position[0]+3; 中括号里面的数值为0,而第二句中括号里面的数值为1,同理第三句中括号里面的数值为2,现在应该理解了

所以这句代码的含义是:Y的变量值即b ,数值与上一层(红桃A)相同

(3)

这句代码中,

黑体部分 同上,即:a=this_comp.layer(this_layer,-1).为当前层("红桃2")的上一层,此时的"红桃2"位于Timeline的第二层,所以这儿所指的上一层就是"红桃A"层了,这儿的关键部分在于"-1","-1"就代表着当前层的上一层

蓝体部分 同上

红体部分 先来看一下这张图

这是三维空间中各轴的一个模拟图,在c=this_comp.layer(this_layer,-1).position[2]-0.1;中,c就是Z轴的一个变量,Z轴指向着我们,就好象这张图:

我们肉眼所看到的Z轴的物体就是从对面射过来的箭,位置越近(z的数值越小)物体就越大,位置越远(z的数值越大)物体就越小,

当两样同样大小的物体所处同一个位置时,离我们近的那个物体就被我们的肉眼所先看到,这样理解后,我们再来看这段代码

c为Position中Z轴的数值与上一层中的减去0.1,这样在同样大小的情况下,谁的数值小,谁就能把数值大的物体挡在后面,位于另一个物体的上方,所以在这儿,我们可以看见"红桃2"挡住了"红桃A",这儿的关键部分在于"-0.1","-0.1"就代表当前层的图形可以遮挡住上一图层

再次用同样方法打开Orientation表达式输入框,用鼠按住表达式拾取按钮(右排三个按钮中的第二个蜘蛛网图案样式的按钮)不放,拖至"红桃A"的Orientation上,这时候自动生成代码:thisComp.layer("红桃A.EPS").orientation

在书中,代码为"thisComp.layer("this_layer,-1").orientation ",其实这是一样的,如果不理解请看前面

以同样方法打开Z Rotation的表达式输入框,用鼠按住表达式拾取按钮(右排三个按钮中的第二个蜘蛛网图案样式的按钮)不放,拖至"红桃A"的Z Rotation上,

在当前自动生成的代码后面手动添加"*index",表示当前表达式的值乘以当前的序号值,当前的序号值为2,所以当前的数值即为Z Rotation上一层("红桃A")的2倍,我们在最前面设置了Z Rotation在0度至10度之间旋转,因此在这儿Z Rotation为0度至20度之间旋转,如图:

为了使效果更明显,我们多复制几个层来观看小规模,方法,选择"红桃2",Ctrl+D三次

下面要做的是把复制出来的"红桃2"替换成别的牌面的扑克牌,方法:先选择你要替换的层,然后按住Alt不放,将Project中你想替换的牌拖至其上面,便可自动替换当前层

我们想做的效果是:将5张扑克牌展开,同时位于最上面牌面朝下的扑克牌翻开,前面半个效果我们已经完成了,现在来做后面半个效果,展开牌面向下的扑克牌

将时间轴移至第2秒处,然后分离图层,使它在2秒处产生断点,方法:Edit/Split Layer(Ctrl+Shift+D) 按住Alt再次点选带有表达式参数码表,将其表达式取消,然后按照第5层的参数设置第6层,使其刚好能够重叠,另外将Position的Z轴数值更改为-0.5,使第6层能挡住第5层

现在来做翻牌动画效果,选择第6层,将时间轴移至2秒处,打开Orientation前的码表,添加一个关键祯 Orientation: 0:00:02:00/0.0dgr,0.0dgr,0.0dgr 0:00:02:11/180.0dgr,0.0dgr,54.0dgr 现在有了翻牌效果,但是不逼真,我们新建一个Camera,设置相关参数,使它们有透视效果

看一下Comp窗口的变化

不错,感觉好多了,但是又一个问题出现了,在翻牌的过程中,红桃5会和红桃4叠在一起!

所以,要不使这种现象出现,只能将牌移开一点,可以移下面的4张牌,也可以移上面的红桃5,很显然,移红桃5比较方便,因为只需要设置一次,而如果移动上面4张牌,需要设置4次,同时位置也比较难控制

现在不会叠在一起了

现在来添加扑克背面花纹效果,选择第5层,分别添加Effect/Render/Cell Pattern和Effect/Image Control/Tint,设置相关参数

看一下效果,如果感觉不对,微调一下参数

将Effect/Render/Cell Pattern和Effect/Image Control/Tint效果复制到第6层上,使其间断层之间有一个平滑过渡

将时间轴移动至扑克牌翻转过程中处于正面和背面转换处的位置,将第6层分离成两个层,Edit/Split Layer(Ctrl+Shift+D)

然后将分离后的第7层(也就是层分离的后半部分)的Effect去掉,这样,当牌翻过来的时候,背面花纹就不见了

好象快做完了,但是你有没有发现一个错误,红桃5的牌面反了!这不合逻辑了,现在我们将牌翻过来

选择Project中的"红桃5.eps",将其拖至新建Comp按钮上,生成一个合成层

然后改变Scale值

这下好象更不对了,这儿的牌也反了

没关系,先不去管它,回到总的合成中,按照钢材的方法,选择要替换的层,然后按住Alt键将钢材设置好的"红桃5 Comp1"替换这下牌总算正了,钢材我们把"红桃5 Comp1"里的Scale设置为"100.0,-100.0",表面上看起来是反的,可是负负得正,最终的效果仍然是正的

最后来看一下效果截图:

如果你觉得场景太大,可以将Composition Setting相关参数调整得小一些

最后是Aep和扑克牌文件:
点击浏览该文件

这个例子稍微烦了一点,不过自己多做做,熟悉了就好了