FLASH实例教程：鼠标效果

源文件：点击下载源文件           素材下载：点击下载素材

★★ 一、 新建一个文件，550*400象素 ,背景黑色。                                              

★★ 二、（1）、建组件：

（1）新建电影剪辑“girl”，导入girl.swf文件，在这个文件中，有一个被诱惑的无心学习的小姑娘和烤得金黄流油的烤鸡，嘻嘻，我们再来添油加醋，让这个小姑娘流口水。菜单--修改--取消组合，把这二个图形分开，选取烤鸡--组合，剪切下来备用，新建一个名为水印的图形元件，画个不太规则的白色水印，，再建一个“口水”的图形元件，选取小姑娘--组合--转存为名为“girl”的MC，双击这个MC进行编辑，加二层，一层放置白色水印，让一个口水的水滴挂在小姑娘的嘴角上，一层让小水滴从小姑娘的嘴角流下来，滴到书上的水印中，水滴的大小、透明度、位置、数目请自行设定，不必和我一样。

在最后一帧的时间帧上加指令：gotoAndPlay(1);

（4）建一名为“眼睛”的电影剪辑，画一无边白色圆形，可画的稍大点，参考值：55*55，把瞳孔拖到中心，注意要让瞳孔的中心对准场景中的十字星，实例名：eye，调整瞳孔大小为20*20，在第一帧上加指令：

// 计算鼠标在X，Y轴上的平方值并返给变量i
i = Math.sqrt(_xmouse*_xmouse+_ymouse*_ymouse);
// eye在X,Y轴上的位置为变量i＊鼠标在X，Y的数值再被10除。
// 为了不让眼睛飞出眼眶，你可根据眼睛的大小调整被除数10。
eye._x = 10/i*_xmouse;
eye._y = 10/i*_ymouse;

校长对代码的补充解读：

在“眼睛”的MC里，X，Y的元点（x=0,y=0)在“瞳孔”处，也就是小“+”字处，而在场景里元点是在左上角。
我们可以把鼠标位置看成在大圆的圆周上，瞳孔的位置在小圆的圆周的上。

这里用到圆的方程：

大圆： i*i = _xmouse*_xmouse+_ymouse*_ymouse (i是大圆的半径）
小圆：10*10 = eye._x*eye_x + eye._y*eye_y （10是小圆的半径）

因为，
10/i = eye._x/_xmouse 同理； 10/i = eye._y/_ymouse

所以:
eye._x = 10/i*_xmouse
eye._y = 10/i*_ymouse

在第二帧上按F6加关键帧。

把背景色改成黑色。

★★ 三、设置主场景，主场景中，共三层，最上面放烤鸡，中间是小女孩，最下面是眼睛，把元件“眼睛”分二次拖出来放在小女孩的眼眶里，调整眼睛的大小，点击烤鸡，起实例名：kaoji，加代码：

//onClipEvent 是当发生特定影片剪辑事件时执行大括号里的动作，在这里这个特定事件是鼠标移动，要执行的动作是隐藏鼠标光标和拖曳“kaoji”MC
onClipEvent (mouseMove) {
//鼠标光标隐藏，hide是看不见，默认状态下，光标可见。
Mouse.hide();
//开始拖曳元件“kaoji”，true是锁定鼠标到中央，后面的几个数值是限定鼠标在场景中的左，上，右，下位置，不让它跑到场景外面去。
startDrag("_root.kaoji", true, 50, 50, 500, 370);
}

★★ 四、哈，测试一下，小姑娘的眼睛是不是跟着这只焦黄酥脆，热气腾腾的烤鸡转来转去，馋的直流口水，书都湿了一大片？如果没问题，就存盘吧。

★★ 知识点：

本例我们学习了不用打开源文件就能调用某某文件的库中元件的方法，用Mouse.hide();隐藏鼠标，用startDrag("_root.kaoji", true, 50, 50, 500, 370);这样的句子设置鼠标跟随并设置鼠标在场景中的运动范围，掌握了这些基本方法，您再看网上各种各样的鼠标跟随效果您就可以自己设置鼠标跟随效果了，相信您做出的效果一定比我做的更酷。

★★  知识发散：

    在沙龙中，我们经常可以听到初学的朋友提问：“老师，我做的动画为什么不能动？”这里面的原因很多，有可能是动作指令加错了对像，有可能是没起实例名，也有可能是路径指向错误。

    我们先来看这样几个例句：

     setProperty("_level0.mc1.mc2.mc3", _alpha, "30");
     startDrag("_root.kaoji", true, 50, 50, 500, 370);
     with(mc1.mc2.mc3)

   看看里面的红色字，你会发现它们都是由几个用.分开的部分，这就是我们今晚要谈的路径。

  1.什么叫路径

  在flash中，不管我们是设置变量还是设置属性，都必须指向一个目标，这就是我们说的路径--path。

    路径是影片中影片剪辑实例名称、变量和对象的分层结构地址。Action命令通过层（Level）一级一级传递，Level是变量数据传输的最高级别，我们通常默认的Level是“Level0”，还可以有 “Level1”、“Level2”……，最多可以到65535。在flash的主场景中，常常有不止一个MC，这个MC对应于路径就是Level0中的下一级对象了。呵呵，如果问题到此为止那就简单了，但为了丰富作品的表现能力或减少工作量，一个父MC中又常常嵌入一个又一个子MC，这些嵌入的MC就是主场景Level0对应的二级对象或父MC的一级对象了。如此类推……，

   2.实例名、帧标签和帧注释

呵呵，是不是很抽象？要说明这个问题，我们先要谈谈实例名，要控制影片剪辑、加载的影片或按钮，必须首先给影片剪辑或按钮指定一个实例名称，才能为它们指定目标路径。 Flash还不会自动识别MC的名字，不先起个实例名，数据就会因为找不到目标而无法传递。加载在level N层上的影片并不需要实例名称，因为它的层号将用作实例名称（如 _level5）。实例名可以与MC在库里的名字不一样，当然为了您的查找和修改方便，还是推荐您保持一致性。加实例名的方法我们在前面已不止一次的谈到过了，但请新学的朋友注意，不要把实例名加成帧标签了，下面我们来列表区分实例名和帧标签及注释:

帧标签为红色三角小旗加所加的文字

帧注释为//加所加的文字

帧注释提供提示备忘记录，在MTV中可用来记录歌词出现的位置

帧标签用于标识时间轴中的关键帧。

   3.相对路径和绝对路径

    在网上，我曾看到有的教程中称路径是action语句中最重要，也是最难掌握的部分，细究之，大概是在一个flash文件中，可以任意组合mc,同一个mc，有不同的组合就有不同的路径，同一组合中，它指向的方向不同，路径又不同，其实，路径并没有这么复杂，下面我们就来具体的谈谈，在层次的概念路径有二种情况，在level0中路径又有二种情况，路径大致可分为绝对路径和相对路径二种，下面我们给出了这二种的概念和示例。

        Level N ,在这里只有加载的mc，不用起实例名。如上节所讲：this["mc" add i]._x -= i*60;

路径 <

        Level 0 ,在这里要起实例名，并有绝对路径和相对路径之分。

    绝对路径：以影片加载到的层名开始，一直延续到显示列表中的目标实例。常见的有：“＿level0”、“_root”、“/”等。

    相对路径：取决于控制时间轴和目标时间轴之间的关系。相对路径只能指定在 Flash Player 中与它们在同一层的目标。例如，在 _level0 上的某个动作定位 _level5 上的时间轴时，不能使用相对路径。常见的有：this 指示当前层中的当前时间轴。_parent 指示当前时间轴的父级时间轴,还有../等。

在用红色标出的_root、_parent、this这三个最常用的路径表示方法中，比较难掌握的是this，因为它的用法比较活，在flash mx的帮助教程中，是这样写的：

    关键字；引用对象或影片剪辑实例。在脚本执行时，this 引用包含该脚本的影片剪辑实例。在调用方法时，this 包含对包括所调用方法的对象的引用。 在附加到按钮的 on 事件处理函数动作中，this 引用包含该按钮的时间轴。在附加到影片剪辑的 onClipEvent 事件处理函数动作中，this 引用该影片剪辑自身的时间轴。

    怎么理解这段话呢？我们来做几个实验看看它所引用的对象包括哪些。

    新建文件，在主场景中建一个名为“主场景”的mc，再在主场景中画一个园，把它转成mc1，双击mc1,在mc1内把刚画的圆转成mc2,在mc1内再拖入一个按钮，在主场景中的情况如右图上。

在插入目标路径面板上情况如右图下。

在主场景时间帧上加入：

startDrag(this,true);这时我们看到的是整个场景中的元件做鼠标跟随运动。

删除这行语句，双击场景中的mc1元件，进入mc1的内部，把下面的语句加在mc2上：

onClipEvent (load) {
startDrag(this,true);
}这时，我们看到，只有mc2做鼠标跟随运动。

删除上面的语句，单击按钮，把这行语句加在按钮上：

on (release) {
startDrag(this,true);
}点击按钮后，我们看到mc2和按钮同时做鼠标跟随运动。

4.通过实例来加深理解 

    呵呵，可能您还会说我讲的太抽象了，那好，我们再来举一个路径的例子，我先给出下面的swf文件中的a,mc1,mc2,mc3在场景中的相互嵌套关系。从右图中我们可以看出，mc3嵌套在mc2中，mc2嵌套在mc1中，mc1和a并列于主场景的_root根目录下。

    这是一个并不复杂的嵌套，更复杂的嵌套在一个场景中可以有多个mc并列，每个mc中又有数个子mc嵌套，每个子mc中又有孙mc嵌套，我们先从简单的入手，明白了以后，在分析复杂的嵌套里，您就不会困惑，因为复杂只是简单的一次次堆砌。

     如果我们用文字来表示这个嵌套，那就是下面目标中所显示的。这里我们用的是点语法和绝对路径表示，斜杠语法目前已渐被点语法淘汰了，我们就不讲了。

           a

_root <

          mc1-->mc2-->mc3

    在这个swf文件中，左边的三个运动的小球从上向下，分别位于第一，第二，第三MC中，右边的文字是相应的按钮按下后路径的具体描述。点击六个按钮，可以观看效果及动作路径，点击刷新，可以恢复初始状态。本例的源文件下载请点击这里。

下面是几个路径例子的详细解释。

同级别，指是同一级别下的另一个实例名叫mc2的电影剪辑。

5.动手试试

下面我们通过动手，当堂完成一个小作业来进一步体会路径并认识插入路径面板：

     新建文件，建立二个名为“mc1”,“mc2”的影片剪辑,在主场景和mc2分别放入按钮，mc2放一个，主场景中放二个，把mc2放入mc1中，实例名mc2，把mc1放入主场景中，实例名mc1。路径关系如右图。

    我们利用插入目标路径面板来设置语句：

    在主场景中的二个按钮上设置语句：

     在mc2的按钮上设置语句：

    on (release) {
setProperty("_parent", _alpha, "20");
}

测试效果，呵呵，恭喜，现在你已经能自己写一个简单的代码了，有了今天的第一步，你就会有明天的第二步。

关于路径问题，我们很难在一次讲课中讲的非常明白，因为在实际应用中，有100个人就可能有1000种路径出来，但基本的原则是不变的，不要太在意非得弄明白是相对路径还是绝对路径，我们学习的目地是应用，做出来的东西达不到预想的结果是非常正常的，再高明的老师也会出现这种情况，碰到问题细心一点，反复调试是个不错的主意,也可以参考时间轴面板下面的提示，如下图：