荔园在线

荔园之美,在春之萌芽,在夏之绽放,在秋之收获,在冬之沉淀

[回到开始] [上一篇][下一篇]


发信人: gary (~心静自然凉~), 信区: Homepage
标  题: 一步一步学flash 5--高级Action
发信站: 荔园晨风BBS站 (Sat Jun  2 21:44:41 2001), 转信

http://www.5dmedia.com/5dmedia/web/flash/basic/20001121/00000599.asp

《一步一步学用 Flash 5 》
            ------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 得到!

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

--
   I Believe I Can ...
_____________________________________________________
欢迎光临我的主页          Netdreams!
Http://netdreams.yeah.net

※ 来源:·荔园晨风BBS站 bbs.szu.edu.cn·[FROM: 192.168.28.85]


[回到开始] [上一篇][下一篇]

荔园在线首页 友情链接:深圳大学 深大招生 荔园晨风BBS S-Term软件 网络书店