|
这一节我们再来学习另一个鼠标跟踪效果,它的出处我记不得了,反正在网上见得也挺多。这个示例比前面我们讲的那个要酷多了,原来一直不敢动手做,以为很复杂,现在才知道原来是这样简单。不信,大家跟我一起动手做一下就明白了。
要实现这样一个效果,还是先让我们来分析一下。这个示例无疑是要用Actions来实现的,Actions说白了就是编程,要编程就要有算法,所以我们先来设计一下实现这一效果的算法。
首先我们为跟着鼠标移动的每个字符,从‘F’到‘S’到省略号,按顺序编上号,从1一直到11。
接下来,我们的思路是当鼠标移动时,让第一个字符‘F’跟着鼠标动,第二个字符‘L’跟着第一个字符‘F’移动,依此类推。为了说明方便,我们定义一些变量:
Vnx,Vny 表示第n个字符当前在x和y方向上的移动速度,换句话说,这两个参数表示第n个字符在x和y方向上每帧的位移(单位时间的位移)。
Xn,Yn 表示第n个字符的x和y坐标,这两个参数用于确定第n个字符当前的位置。
ac 这个参数是加速因子,用于控制字符跟随鼠标的快慢。
de 这个参数是减速因子,用于控制字符的波动。
space 用来使字符之间产生适当空隙,不至于互相重叠。
下面我们直接给出第n个字符的速度和位置计算公式,以帮助大家理解,大家可以先不用考虑这个公式是怎样设计出来的,我们只需要把它看懂理解就行:
Vnx = ( Vnx + (
Xn-1 - Xn + space ) / ac ) / de..............(
1 )
Vny = ( Vny + ( Yn-1
- Yn) / ac) / de.............................( 2 )
Xn = Xn + Vnx...............................................................(
3 )
Yn = Yn + Ynx...............................................................(
4 )
先看公式( 1 ),它用来计算第n个字符在x方向上移动的速度。因为后面的字符总是跟着它前面的那个字符运动,所以我们用Xn-1 - Xn获得相邻字符x方向上的位置差,但要保证字符间的间隙还需要加上space,可以看出,Xn-1 - Xn + space表示的含义是第n个字符到达它的x方向的指定位置还需要移动多长距离。ac这个参数可以调节,不同的值会出现不同的移动速度。de参数将用于调节字符的弹性效果,使字符在到达既定位置后振幅减小并趋于稳定。
从这个公式可以看出:
1.如果相邻两个字符之间分得越开,即Xn-1 - Xn + space越大,则后面的字符就会移动得越快。反之,当两个字符很接近时,字符移动速度就会减慢。
2.如果ac增大,则字符移动减慢,表现为字符迟缓地接近鼠标。
3.如果de增大,则字符在既定位置上振幅减小,稳定得很快。反之,字符振幅加剧,不易稳定。注意,这个参数一定要大于1,否则没有办法稳定,也就是说只有de大于1,这个公式计算出的Vnx才有可能趋于0。
公式(2)和公式(1)类似,因为在y方向上没有间隙,所以没有space这一项。
公式(3)和(4)用于计算第n个字符的新位置,我们说过,Vnx和Vny也可能看成是在单位时间里(一帧)字符在x和y方向上的位移。所以我们用第n个字符的当前在x和y方向上的位置分别加上Vnx和Vny就可以得到在下一帧里该字符的新位置。
就这样,循环调整每个字符的位置就可以得到上面的效果了。下面我们就开始一步一步做吧。
先新建一个文件,设置背景色为黑色。
然后用文字工具在工作区写下“FLASHTIMES”这十个字符,要求每个字符单独去写,且参数相同。接着分别选中每一个字符,按F8把它们分别转化成十个电影片断类图符。
现在来做一个省略号的电影片断,见上面示例中文字结尾部分闪烁的那个。怎样做我就不多说了,只把时间轴提供给大家。
做好后,把它拖出来放在文字后面。
为了实现跟随,我们还需要做一个电影片断,让它的内容为空,这样在画面中什么也不显示,一会儿我们再为它加一些Actions来进行控制。把这个空的电影片断也从图库中拖到工作区放在文字的前面,见下图。
选中所有电影片断类图符实例,按Ctrl-K对齐,然后分别双击每一个实例(包括那个空的电影片断),从左到右设置实例名分别为trace0至trace11。
现在准备工作就绪了,我们来对那个空的电影片断做些修改,这是实现鼠标跟随的关键。进入它的编辑画面。对第2,3帧分别按F6键,使前三帧都成为关键帧。其中第1帧用于对参数初始化,第2帧用于计算并把字符移动到新的位置上,第3帧用于控制循环第2帧的操作。
双击第1帧,设置Actions语句如下:
Set Variable: "n" = 11
Set Variable: "ac" = 1.2
Set Variable: "de" = 2.55
Set Variable: "space" = 12
Loop While(n >= 0)
Set Variable:"/trace"&n&":x" = GetProperty ("/trace"&n,
_x )
Set Variable:"/trace"&n&":y" = GetProperty ("/trace"&n,
_y )
Set Variable:"/trace"&n&":vx" = 0
Set Variable:"/trace"&n&":vy" = 0
Set Variable:"n" = n-1
End Loop
Start Drag("/trace0", lockcenter)
1.前四句变量设置中每个变量的含义我们在上面已经说过了,除了n以外,其余三个都可以修改。
2.接下来的Loop循环中,分别初始化以下几个变量:
将tracen:x(这个变量用于存放第n个字符的x坐标值)设置为tracen的x坐标值。
将tracen:y(这个变量用于存放第n个字符的y坐标值)设置为tracen的y坐标值。
将tracen:vx(这个变量用于存放第n个字符x方向上的速度值)设置为0。
将tracen:vy(这个变量用于存放第n个字符y方向上的速度值)设置为0。
在这里注意两种表示方法,一个是使用连接符号&可以把两个字串或表达式连结起来成为一个新字串或表达式,如上面的变量"/trace"&n&":x",当n = 1时,这个变量名就是"/trace1:x"。另一种表示方法是给变量名后加:,其后再跟变量,表示一种从属关系,有点象C++中类中变量的表示方法。
经过这个循环,所有字符的初始位置都被记录下来,并把初始速度设为0并存入相应变量中。
3.最后一句的设置,把名为trace0的图符实例锁定在鼠标中央,随着鼠标移动。在下一帧的Actions中我们让trace1跟着trace0移动,trace2跟着trace1移动,依此类推,从而完成鼠标跟随。
现在设置第2帧的Actions语句,如下所示:
Set Variable: "n" = 1
Loop While(n <= 11)
Set Variable: "/trace"&n&":vx" = (Eval("/trace"&n&":vx")+(Eval("/trace"&(n-1)&":x")
+space-Eval("/trace"&n&":x"))/ac)/de
Set Variable: "/trace"&n&":vy" = (Eval("/trace"&n&":vy")+(Eval("/trace"&(n-1)&":y")
-Eval("/trace"&n&":y"))/ac)/de
Set Variable: "/trace"&n&":x" = Eval("/trace"&n&":x")
+ Eval("/trace"&n&":vx")
Set Variable: "/trace"&n&":y" = Eval("/trace"&n&":y")
+ Eval("/trace"&n&":vy")
Set Variable: "n" = n+1
End Loop
Set Variable: "/trace0:x" = GetProperty("/trace0", _x )
Set Variable: "/trace0:y" = GetProperty("/trace0", _y )
Set Variable: "n" = 1
Loop While(n <= 11)
Set Property("/trace"&n, X Position) = Eval("/trace"&n&":x")
Set Property("/trace"&n, Y Position) = Eval("/trace"&n&":y")
Set Variable: "n" = n+1
End Loop
因为我们在上面已经把算法给大家分析过了,所以相信理解这段Actions不会有什么问题。
首先,第一句设置变量n的初值为1。
接下来的Loop循环的内容就是把上面我们讲过的计算公式变成Actions语句。这里要用到一个函数Eval(),它用来获取表达式的值。对于简单的变量,我们不需要用到它,但对于复杂一些的组合变量,取值就一定要用它了。
循环结束后的三条语句中,前两条用于把名为trace0(也就是那个被锁定在鼠标中央的电影片断)的实例的x和y坐标分别保存下来,这样就可以不断获得新的鼠标位置,以便其它字符跟踪。第三条语句将n的值重置为1。
最下面的几条语句还是一个循环,它把我们计算出来的每个字符的新位置分别赋给该字符所对应电影片断的相应属性,以此来实现字符位置的变化。
第二帧的设置就是这样。第三帧的Actions很简单,只有一句话:Go
to and Play(2),使得第2帧的Actions被反复执行,这样就实现了字符不断调整位置,不断跟踪鼠标的效果。
好了,所有的Actions都设置好了,按Ctrl-Enter测试一下吧。
|