中华网通行证
用户名 密码
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  

Advanced Actions
 

  经过一个星期,ONLY又和朋友们见面了,这段时间想必大家还“闪”的可以吧,而且通过网络上的资源一定也学到了很多教程中没有的东西,所以这次我给大家带来的内容也稍微有点难度哟!(相对于初级用户) 不过不用担心,紧跟向导,一定可以成功。

实战放大镜效果

  放大镜是大家非常熟悉的东西,每个人都应该见过、使用过,现在我们就要用Flash 5 来做一个放大镜效果,在这之前你的系统必须安装有 Flash 5 ( 废话!) ,并准备一张图片(风景明星随便什么图片),要求条件达到后我们就可以开始了!

建立基本物件

  运行你的Flash 5 ,建立新文件,选择 Insert 菜单下的 New Symbol 建立一个Graphic Symbol (图形符号)并起名为“图片”,系统自动切换到图形符号工作区,选择File菜单下的 Import (导入)命令导入一张图片。完成后回到主场景 (Scene 1) 。

  按 Ctrl+L打开 Library 库面板。选择图形符号“图片”并拖入场景中。注意图片大小与影片尺寸。完成后将此层Lock (锁定)。并在层名称区点右键选择 Properties项,在弹出的对话框将层名称改为“图片层”。

ONLY提示:要养成对物件命名的好习惯,Flash5默认的命名法则是以数字为顺序在TimeLine中,默认名称为 Layer 1;Layer2 等等,Symbol类似。而当所编辑的影片内容比较复杂时,或者打开 Library 面板里面包含非常多的符号,那么名称就显得非常重要了,如果你不想以后被繁多的层及符号搞昏头,那就时刻注意给对象命名。

  现在,我们需要一个用来做放大镜的圆形符号。建立一个名称为“圆”的Graphic Symbol (图形符号),在“圆”工作区选择工具栏里的  圆形工具,画一个圆,删除边线,然后用箭头工具选中移动,调整位置于工作区中心位置。(中心标记为一个小十字),然后选择工具栏的  填充工具!选择 Windows 菜单下 Panels 子项下的 Fill 命令打开 Fill 面板。在Fill 面板选择填充模式为 Radial Gradient (放射填充), 现在用填充工具对圆形进行填充,填充点在圆中心。完成后你的圆应该是中心白色向四周的绿色过度。

    当然你也可以选择白色与其他颜色搭配。这个园我们等下要做放大镜的镜片,当把透明值设置到一定程度就会有放大镜片的质感,这也是为什么要选择放射填充的原因。

制作放大镜

  我们要求放大镜当鼠标按下后可以被拖动,松开后则停留原处。还记得跟随光标吗?你一定会说用 startDrag 代码可是实现。没错,可是这里还包含有鼠标的两个事件,怎么办?在Flash 5中只有按扭对象可以赋予鼠标事件,那么我们建立按扭。

  选择 Insert 菜单下的 New Symbol 建立一个 Button Symbol 并命名为“按扭”在按扭工作区按 Ctrl+L 打开Library面板,拖入刚才建立的图形符号“圆”。至工作区中心位置。然后选择Windows菜单下Panels 子项下的 Effect 打开 Effect 面版,点面板中的下箭头选择 Alpha 模式,并设置数值为 20%, 完成后锁定此层并建立一个新层,在新层中为镜片画一些装饰性的东西增强效果,完成后应类似下图。

  现在我们要做放大镜了,从Insert 菜单下选 New Symbol创建一个Movie Clip (影片夹子),并起名称为“放大镜”,系统进入“放大镜”工作区,按Ctrl+L打开 Library 面版,将对象“按扭”拖入并调整位置至中心点。

  然后回到主场景,建立一个新层,使之处于图片层之上。将Library 面版中的“放大镜“拖入场景并按  Ctrl+I打开Instance 面板,在面板中赋予“放大镜”一个名称 “ZOOM” ,完成后通过在Library对象列表点右键选Edit进入“放大镜“工作区。然后选中“按扭”点右键选择 Actions ,打开Actions面板。点Actions面板的  加号按扭,在弹出菜单中选择 Actions 下的 StarDrap,然后系统写入拖拽代码,然后点击Actions面板右下方小圆十字Insert a Target path(插入对象路径)按扭。在弹出的对话框中定义对象为“ZOOM” (也就是我们命名为ZOOM的影片夹子)。完成后按 OK 回到Actions 面板,在字符串 on (release) { 上点击光标,Actions面板下方会出现事件选择。我们需要把Event (事件)的事件从默认的 Release 改为 Press (当压下), 然后回到字符串的最后一行,点  加号按扭,在弹出菜单中选择 Actions 下的 StopDrap (停止拖拽),如果操作无误,那么你的 Actions 面板应该如图所示:

所有代码入下:

on (press) {
startDrag ("_root.zoom");
}
on (release) {
stopDrag ();
}

  如果你在操作Actions面板时发现与本文不符合,请点击Actions 面板友上角的右箭头按扭,并选择 Normal Mode (标准模式)

ONLY提示:在Flash 5 中 Actions 面板的编辑状态分为 Normal Mode (标准模式) 和Expert Mode (专家模式),在标准模式下,点击某字符串,那么Actions面板下半部分就出现相应的设置选项,而在专家模式下则转换为代码写入方式,字符串没有任何选项目,类似写字板输出,专家模式适合那些对 ActionScript 代码非常熟悉的用户使用。

  现在回到主场景中,按Ctrl+Enter 测试。如果操作无误,这时影片中的放大镜因该可以被你拖动,而且可以透过它看到下面的图片,只是还没有放大功能! J

建立放大效果

  拖拽已经完成,现在我们需要建立放大后的效果了!其实就是做一个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的圆形区显示的图片内容要比背景图片中的相同内容略大,调整至合适位置,如图:

  图中显示的将Mask的圆拖至放大镜所处图形位置,并与放大镜重合,如果偏移太远会造成放大效果不真实。这个位置就是放大镜的初始位置。

编写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 ,在弹出的对话框中我们可以看到刚才命名的几个影片夹子全在其中。如图:

  在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 设置应该类似下图:

注意层的排列顺序。

  现在你按下 Ctrl+Enter 测试一下,用光标拖动哪个放大镜看看,效果出来了吧。相信你现在已经被 Flash 的强大功能所深深吸引,而且可能会觉得 Actions 有些复杂,由于篇幅限制,这里也不能详细介绍每项 Actions 的详细解释,朋友们可以看下Help 中的内容,如果头疼英文,我这里有一份闪客帝国的朋友翻译的 Actions 中文解释,可以在http://www.nease.net/~onlylove/new/flash/new_study/actions_list.htm看到。同时本文的原文件可在http://www.nease.net/~onlylove/new/flash/new_study/eight/fangdajing.fla 得到!

范例:

原文件 Size:270K | Download

  《ONLY's Art》提供 王超 ONLY/文

  
相关报道




本站检索



中华网推荐

·国家级治脑病新药思维源
·中藏药治疗脑病新突破
·治类风湿,强直性脊柱炎
·养肾·痛风·长寿
·肝病泌尿脑萎缩新药介绍
·强直性脊柱炎康复乐园
·让中医辩证不孕不育
·国医治股骨头坏死一绝
·乙肝为何久治不愈?
·二千元垄断批发做老板
·中医中药专治前列腺
·治牛皮癣白癜风已成现实
·专治痛风病的白衣天使
·不孕不育的杏林奇葩
·专卖店零售管理系统





   

网络教室编辑信箱