|
我们在第二章第十三节曾经讲过一个放大镜效果的示例,这一节中我们来介绍一种更实用的技术,可以用鼠标来控制放大镜的位置,并在不同位置显示放大效果。大家可以试着移动上面示例中的鼠标,体会一下这种效果。这个示例.swf文件有67KB大小,幸运鸟没有做预装动画,如果上面没有显示,等一会应该就可以了。
下面来介绍这个示例的做法。先新建一个文件,设置文件尺寸为900X800,背景色为黑色。
这里我们要用到一张图片,按Ctrl-R导入图片,我在这里选用的是Kitty猫的一张壁纸。图片导入后按Ctrl-L打开图库窗口应该能看到。现在把主场景中的Kitty猫图片删掉。
按Ctrl-F8新建一个电影片断类图符image。用矩形工具在编辑区画一个不带边线的矩形。按Ctrl+Alt-I打开对象监控面板,选中刚才画的矩形,在对象监控面板中作如下设置:
|
|
现在这个矩形长900,宽800,中心位于(0,0)点。接下来从图库中把我们刚导入的图片拖出来,选中它再用对象监控面板进入如下设置: |
|
这样这个图片的中心也位于(0,0)点,且被压缩为700X500大小。然后我们可以在图片周围用文字工具添加一些文字,象我上面显示的那样。现在这个图符就做好了,应如下图所示(显示比例40%):
|
|
下面我们来做另一个电影片断类图符zoom。进入编辑画面后,从图库中把图符image拖出来,用对象监控板调整它的位置,使它的中心与编辑区中心重合。新建一个层,在这个层中画一个不带边线的正圆,它将作为放大镜的镜片。大家应该可以想到了,这一层将作为遮罩层,下面的那一层为被遮罩层。是的,就照这样设置好。另外,我们还需要绘制放大镜的手柄等部分以增加效果。为了节省时间,我们可以借用第二章第十三节已经做过的手柄图符,见下图。 |
|
在菜单中选Open打开lesson2-13-1.fla文件,按Ctrl-L打开图库,最小化这个文件,回到zoom图符的编辑画面,新建一个层,从新打开的图库中把图符Magnifier拖进来,这时正编辑文件的图库中会增加这个图符,现在可以把lesson2-13-1.fla关闭了。注意上图中十字定位符的位置。现在适当放缩并移动这个图符,使遮罩层中的正圆正好与镜框完全吻合,并把它们都移动到编辑区中心。做好后的这个电影片断类图符zoom应如下图所示(显示比例40%): |
|
为了实现对放大镜位置的控制,我们需要加入Actions语句,还在这个图符的编辑画面中,在时间轴上新建一个层,双击第1帧设置Actions如下:
Set Property("image", X Position) = (225 -
_x) * 2
Set Property("image", Y Position) = (200 - _y)
* 2
关于这两条语句的解释我们将在稍后的时候讨论。设置好后,在选中第1帧的情况下,按Ctrl+Alt-C复制这一帧,点选第2帧,按Ctrl+Alt-V粘贴,这样第2帧和第1帧的内容一样。
然后我们还需要在其它层的第2帧都按F5键。 设置好后的时间轴如下图所示:
|
|
现在回到主场景。把图符image拖到工作区,选中它,用对象监控板作如下设置,即使它的大小为图符zoom中实例名为image的图符的四分之一。
|
|
把图符zoom也拖出来,用对象监控板设置如下。注意w和h部分不一定如下图所示。双击这个图符实例,设置实例名为zoom。
|
|
最后,我们双击主场景第1帧设置Actions为Start
Drag("/zoom", lockcenter)。这样放大镜就会随着鼠标移动了。按Ctrl-Enter测试一下效果,怎么样,还不错吧。
可能大家还有许多疑问,做是做完了,可是还不大明白。我现在就几个重要的问题再详细解释一下。
首先,要做放大镜效果,我们先要做好一个包含有图片的电影片断类图符。用它产生两个实例,一个原来大小,用作放大后的效果制作,一个缩小一些,用作放大前的图片。原来大小的实例用在含有放大镜的图符中作被遮罩层,缩小了的实例用在主场景中作背景图。
然后,我们需要明白的一点是,因为单独的遮罩层(放大镜)不能做成电影片断,所以为了实现鼠标拖动的效果,必须把遮罩层(放大镜)和被遮罩层(放大后的图片)一起做成电影片断。在主场景中,把这个电影片断拖进来,这时由于遮罩的技术,只能显示出放大镜镜片里的内容,从而实现了放大效果。但要注意的是,因为属于同一个电影片断,遮罩层和被遮罩层将同时移动,所以不加控制的话,放大镜中将始终显示同样的内容。因此我们要在这个电影片断移动时,把被遮罩层(放大后的图片)向回移动一段距离,这样放大镜中的内容才能有所变化。
最关键的问题是,到底被遮罩层该移动多少距离呢。我们来看下面这幅示意图。下面左图所示为主场景中放大前的小图,注意因为主场景中原点的位置在左上角,这与我们在图符zoom中原点在中心是不同的。在最初时两图的中心是重合的,也就是小图的(225,200)点与zoom中的(0,0)点重合。我们可以想像当放大镜移动到小图的(0,0)点即左上角时,zoom中的放大图的左上角也必须位于放大镜的镜片下,也就是说zoom中大图的中心必须相对于放大镜移动到(450,400)位置。注意到zoom中放大图的中心位置坐标是相对于图符zoom或者说是放大镜而言的,因为这种移动是线性的,我们可以根据上面的已知条件列出下列方程:
|
|
设X,Y为拖动放大镜时,zoom中放大图中心点相对于放大镜的坐标位置,x和y为放大镜的位置坐标,则有:
X = ax + b (1)
Y = cy + d (2)
根据上面的分析,有x = 225时,X = 0;x = 0时,X = 450;代入公式(1)解得a = -2,b
= 450,故有X = (225-x)*2。同理,可求得Y的表达式为Y = (200 - y)*2。这两个表达式就是我们刚才在zoom中设置的Actions语句的原型。
现在大家应该对上面的制作过程有了明确的认识了吧,大家也可以尝试制作放大不同的倍数的效果。这里是这个示例的源文件。
|