Flash5跟我学之十
#1 建立基本物件
运行你的Flash5,建立新文件,选择Insert菜单下的New Symbol建立一个Graphic Symbol(图形符号)并命名为“图片”,系统自动切换到图形符号工作区,选择File菜单下的Import(导入)命令导入一张图片。完成后回到主场景(Scene 1)。
按“Ctrl+L”打开Library库面板。选择图形符号“图片”并拖入场景中。注意图片大小与影片尺寸。完成后将此层Lock(锁定)。并在层名称区点右键选择Properties项,在弹出的对话框将层名称改为“图片层”。
ONLY提示:在TimeLine中,默认名称为Layer1、Layer2等,Symbol与之类似。而当所编辑的影片内容比较复杂时,或者打开Library面板,里面包含非常多的符号,那么名称就显得非常重要了,如果你不想以后被繁多的层及符号搞昏头,那就时刻注意给对象命名。
现在,我们需要一个用来做放大镜的圆形符号。建立一个名称为“圆”的Graphic Symbol(图形符号),在“圆”工作区选择工具栏里的圆形工具(^44040201b^),画一个圆,删除边线,然后用箭头工具选中移动,调整位置到工作区中心位置。(中心标记为一个小十字),然后选择工具栏的填充工具(^44040201c^)!选择Windows菜单下Panels子项下的Fill命令打开Fill面板。在Fill面板选择填充模式为Radial Gradient(放射填充),现在用填充工具对圆形进行填充,填充点在圆中心。完成后你的圆应该是中心白色向四周的绿色过度。
当然你也可以选择白色与其他颜色搭配。这个圆我们等下要做放大镜的镜片,当把透明值设置到一定程度就会有放大镜片的质感,这也是为什么要选择放射填充的原因。
#1 制作放大镜
我们要求当鼠标按下后放大镜可以被拖动,松开后则停留原处。还记得跟随光标吗?你一定会说用startDrag代码可是实现。没错,可是这里还包含有鼠标的两个事件,怎么办?在Flash5中只有按钮对象可以赋予鼠标事件,那么我们建立按钮。
选择Insert菜单下的New Symbol建立一个Button Symbol并命名为“按钮”在按钮工作区按“Ctrl+L”打开Library面板,拖入刚才建立的图形符号“圆”,拖至工作区中心位置。然后选择Windows菜单下Panels子项下的Effect打开Effect面版,点面板中的下箭头选择Alpha模式,并设置数值为20%,完成后锁定此层并建立一个新层,在新层中为镜片画一些装饰性的东西增强效果(如^44040201a^1)。
现在我们要做放大镜了。从Insert菜单下选New Symbol创建一个Movie Clip(影片夹子),并命名为“放大镜”,系统进入“放大镜”工作区,按“Ctrl+L”打开Library面版,将对象“按钮”拖入并调整位置至中心点。
然后回到主场景,建立一个新层,使之处于图片层之上。将Library面版中的“放大镜“拖入场景并按“Ctrl+I”打开Instance面板,在面板中赋予“放大镜”一个名称“ZOOM”,完成后通过在Library对象列表,点右键选Edit进入“放大镜“工作区。然后选中“按钮”,点右键选择Actions,打开Actions面板。点Actions面板的加号按钮(^44040201h^),在弹出菜单中选择Actions下的StarDrap,然后点击Actions面板右下方小圆十字Insert a Target Path按钮,在弹出对话框中定义对象为“ZOOM”。完成后按OK回到Actions面板,在字符串on(release){上点击光标,Actions面板下方会出现事件选择。我们需要把Event(事件)的事件从默认的Release改为Press(当压下),然后回到字符串的最后一行,点加号按钮(^44040201h^),在弹出菜单中选择Actions下的StopDrap(停止拖曳),如果操作无误,那么你的Actions面板(如^44040201d^2)。
所有代码入下:
on (press) {
startDrag (″_root.zoom″);
}
on (release) {
stopDrag ();
}
如果你在操作Actions面板时发现与本文不符合,请点击Actions面板右上角的右箭头按钮,并选择Normal Mode(标准模式)。
现在回到主场景中,按“Ctrl+Enter”测试。如果操作无误,这时影片中的放大镜应该可以被你拖动,而且可以透过它看到下面的图片,只是还没有放大功能。
#1 建立放大效果
拖曳已经完成,现在我们需要建立放大后的效果了!其实就是做一个Mask,被Mask的图片比场景的背景图片大,并让它根据放大镜的移动而移动从而产生放大效果。
OK,通过Insert下的New Symbol建立一个Movie Clip并命名为MASK,进入MASK工作区,按Ctrl+L打开Library面板,将图形符号“图片”拖入,并调整大小比场景中背景图片稍大。然后按“Ctrl+I”打开Instance面板,在面板的Behavior项更改属性为Movie Clip,更改后命名为“Pic”。然后建立一个新层使之处于图片层之上,从Library面板中拖入图形符号“圆”的大小要与放大镜的尺寸一致。完成后在层名称区点右键选择Mask,建立遮罩。
ONLY提示:在Flash中,不能为图形符号(Graphic Symbol)命名,也就是说Actions不能对其进行控制,因为Actions是根据对象名称来控制的。那么我们如果要对一个图形符号命名,就需要先转换其属性为影片夹子(Movie Clip),可以通过Instance面板完成。对于物件尺寸的调整,如果光标拖动不够精确,那么可以按“Ctrl+Alt+I”打开Info面板,对物件尺寸用数字精确定义。
建立好遮罩效果后,回到主场景,建立一个新层,使之处于背景图片层与放大镜层之间,从Library面板中将Mask的影片夹子拖入。这时Mask的圆形区显示的图片内容要比背景图片中的相同内容略大,调整至合适位置(如^44040201e^3)。
图中显示的将Mask的圆拖至放大镜所处图形位置,并与放大镜重合,如果偏移太远会造成放大效果不真实。这个位置就是放大镜的初始位置。
#1 编写Actions
在主场景中建立一个新层,使之处于最顶端并赋予层名称为Actions,然后在TimeLine的第一帧点右键选择Insert Blank Keyframe(插入空白关键帧),插入后再点右键选择Actions打开Actions面板。点面板左上角的加号按钮选择Actions下的Set Variable。然后Actions面板下半部出现相应项,在Variable:处写zoomx,在下面的Value处输入_root.zoom:_x,同样设置zoomy。完成后代码应该如下:
zoomx = _root.zoom:_x;
zoomy = _root.zoom:_y;
关闭Actions对话框,选择Actions层的第二帧点右键选择Insert Blank Keyframe,然后再点右键选择Actions打开Actions面板。点左上角加号按钮选择菜单Actions下的SetProperty,Actions面板下半部出现SetProperty设置项。在Property项点下箭头选择_x(X Position)。在Target项点光标键使之处于当前输入项,然后点Actions面板右下角的小十字,Insert a Target Path,在弹出的对话框中我们可以看到刚才命名的几个影片夹子全在其中(如^44040201f^4)。
在Flash中只要包含命名的影片夹子,那么名称都会出现在Insert Target Path面板中。选择mask,然后按OK。系统自动写入代码。然后在Value项写入_root.zoom:_x。同样方法设置其_y(Y Positon)属性。现在设置了Movie Clip mask的XY坐标之后,现在来设置影片夹子Pic的移动坐标。
同样选择SetProperty,设置Property为_x(X Position),Target为Pic。在Value设置Target为Pic,附加属性_x-5/4*(_root.zoom:_x-zoomx),再用同样方法设置其_Y值。最后,点加号按钮选择菜单Basic Actions下的Go To,默认设置不变。关闭Actions对话框。现在,你的所有代码如下:
setProperty (″_root.mask″, _x, _root.zoom:_x);
setProperty (″_root.mask″, _y, _root.zoom:_y);
setProperty (″_root.mask.pic″, _x, _root.mask.pic:_x-5/4*(_root.zoom:_x-zoomx));
setProperty (″_root.mask.pic″, _y, _root.mask.pic:_y-5/4*(_root.zoom:_y-zoomy));
gotoAndPlay (1);
不能写错哟,不然看不到效果。
最后给其他层的第二帧都Insert Frame,不然Actions第二帧的代码控制不到。完成后你的层排列和TimeLine设置(如^44040201g^5)。
注意层的排列顺序。
现在你按下“Ctrl+Enter”测试一下,用光标拖动放大镜看看,效果出来了吧。相信你现在已经被Flash的强大功能所深深吸引。这一篇是最后一期,以后就靠各位自己修行了。