收藏本站
 
设为主页
     您的位置:首页资源库动画制作Flash教程
== 资 源 搜 索 ==
 
高级搜索
== 学 习 资 源 ==
操 作 系 统
Windows DOS
Linux Unix
Novell OS/2
办 公 软 件
Word Excel
Access Powerpoint
Outlook Wps
媒 体 处 理
网页制作 动画制作
图片处理 视频处理
媒体播放 音频处理
课件制作 其它……
网 络 工 具
网页浏览 下载工具
FTP 工具 邮件工具
网络安全 服 务 器
联络聊天 其它……
工 具 软 件
压缩工具 系统工具
文件工具 磁盘工具
病毒防治 阅读工具
测试工具 程序设计
== 素 材 资 源 ==
GIF动画 Flash动画
按钮图库 图标图库
线条图库 背景图库
创意图库 音频素材
== 教 程 下 载 ==
 
一步一步学用Flash5

作者:王超 ONLY / 5D多媒体

 

高级Action

实战放大镜效果

  放大镜是大家非常熟悉的东西,每个人都应该见过、使用过,现在我们就要用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 测试。如果操作无误,这时影片中的放大镜因该可以被你拖动,而且可以透过它看到下面的图片,只是还没有放大功能!

建立放大效果

  拖拽已经完成,现在我们需要建立放大后的效果了!其实就是做一个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 设置应该类似下图:


  时间过的真快,不知不觉连载已经发了两个多月,而这一篇也是最后一期,很高兴和朋友们度过愉快的十期连载时间。俗话说“师傅领进门,修行靠自己”以后各位可就得努力学习了,同时也欢迎来信讨论 E-mail : fashion-line@21cn.com , 最后照顾一些没买到报纸的朋友,文章的电子版可在我的网站 http://babyonly.yeah.net/ 或 http://www.5dmedia.com/ 得到。最后祝大家学习进步,身体健康。再见!

[上一页]

 

Copyright © 2001-2002 东莞中学信息技术科 All Rights Reserved
IE4.0 or later / 800*600  For The Best View