- 精华
- 1
- 帖子
- 4167
- 威望
- 0 点
- 积分
- 4170 点
- 种子
- 5 点
- 注册时间
- 2004-1-12
- 最后登录
- 2016-12-2
|
楼主 |
发表于 2004-2-8 00:24 · 北京
|
显示全部楼层
10，Advanced Actions
实战放大镜效果
放大镜是大家非常熟悉的东西，每个人都应该见过、使用过，现在我们就要用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/n ... dy/actions_list.htm看到。同时本文的原文件可在http://www.nease.net/~onlylove/n ... ight/fangdajing.fla 得到！ |
|
川公网安备 51019002005286号
变成了现在的
，注意：Motion 过度在TimeLine 以淡青色显示，回忆下 Shape 变化是什么颜色。这时你可以按回车键测试效果，文字从第一帧移到了第十帧你拖动到的位置。一个最基本的 Motion 变化已经在你的聪明智慧下产生了。当然，还有一种更快捷的方法产生 Motion 变化。
来表示当前的编辑项，建立完符号内容后可点击 Scene 1 标签回到影片工作区。
虚线。同样，一个打散的对象设置 Motion 变化，TimeLine 显示 Motion 失败的
虚线。
工具选中工作区的物件，然后选择绘图工具栏最下面的
Scale 工具, 这时，刚才选种的对象四周就由六个方块包围。光标移动到任一方块都会变成一个两边指向的箭头，这时你就可以拖动鼠标来调整物件大小了。
默认为 100% ，我们可以对其数字进行调整，把数字设为0%，刚才选种的物件只剩下一个表示被选中的外框，而文字已经不见了，按下回车键或Play按扭测试，哈哈！物件慢慢消失了。
其中锁子代表锁定层，要锁定某一层，在层与锁子图标垂直的圆点上按一下，这时圆点上也会出现一个小锁图标
，若为当前层，旁边还会出现一个打叉的铅笔，表示当前层不可编辑。其他两个按扭的功能为：眼睛表示隐藏层 Hide Layer 方框表示以边框 OutLines显示层内物件。
图标出现。
由于音频不在工作区显示，不影响我们常规操作。当按回车或Play 按扭测试影片时，音乐也会随之播放。
不过为了方便操作和便于管理编排，一般建议在空白层加音频。也即建一个声音层。
发表于 2004-2-7 23:01 · 黑龙江
注意与图形符号的区别。
工具选中按扭,然后点右键，在弹出的下拉菜单中选择Actions ，打开 Object Actions 面板。
按扭，在弹出的下拉菜单中选择 Basic Actions 子项下的 Get URL 命令。同样，也可以通过点击左边窗口的 Basic Actions 项，在列出的子项中双击 Get URL命令来完成。
工具，在新层输入文字：ONLY 。完成后按Ctrl+T打开Character面板，调整好字体和大小，完成之后应该类似下图：
铅笔工具划一条曲线,如下图：
光标工具选中飞机，并拖动到曲线的起点在这之前必须点选
磁铁工具，这样做的目的是让物件可以“吸附”在引导线上。在拖动飞机的时候注意观察，在移动到引导线附近后中心位置会出现一个圆圈，当中心圆圈与引导线接近一定距离就会被吸附上去，任何一个物件都有一个中心位置，我们把飞机放大进行观察。如图
矩形工具在工作区画一个长方形，然后选择
填充工具进行填充，选择 Windows 菜单Panels 子项下的Swatches 命令打开样本面板，在其色彩表的最底端一行是 Flash 预设的一组渐变填充
文字工具在场景中输入文字“FLASH”,接着按 Ctrl+T打开Character 面板，设置文字颜色为深篮 (#003366) ,大小96,字体为 Arial Blank.。
箭头工具选种场景中的文字，按 Ctrl+B打散(Break Apart),然后取消场景中打散文字的选中状态（方法为用箭头工具在空白区点一下）：
Ink Bottle 工具,设置工具栏下部Color区的Line色
为白色。然后依次在每个文字上点一下勾勒出文字外边线（轮廓线）。如果操作无误，你的屏幕显示应该和下图相似：
图标下的圆点琐定(Lock)轮廓线层。然后点TimeLine 左下方的
增加层按扭建立一个新层,并拖动新层处于轮廓线层之下。然后选择工具栏的
矩形工具在新层画一个矩形。接着选择工具栏的
填充工具对矩形进行线形过度填充。选择 Windows 菜单下 Panels 子菜单的 Fill 项打开Fill面板，在其下拉菜单中选择 Linear Gradient 模式。然后点中过度色标左边的滑杆拖动至1/2位置，在点中右侧的滑杆，设置一个亮蓝色表示电流。（参考 #393CEF）,完成后Fill面板设置与填充效果应与下图类似：
旋转工具（Rotate）来完成。
Insert Layer 按扭建立一个新层，并将模拟电流的影片夹子拖入其中与对应的文字对齐。是不是又碰到问题了？场景中的电流影片夹子只显示一个小原点，怎么知道中心在那里，更别说对齐了 L 别着急，有解决方法。回到各影片夹子工作区，撤消MASK，这样边框线就显示出来了，在场景中依次排列整齐后，重新做MASK，这样就完成了。
拖至合适位置送开鼠标键就可以了。同样，点选时按Shift可对多个层的TimeLine同时选中，这样可一起调整。
