关于Flash变速滑动菜单剖析

　　经过本例的学习，您将掌控基本的FLASH菜单的操作步骤。连同用AS来编写变速运动的基本方法。一个例子的学习是次要的，希望大家学习完以后能够掌控这种方法，举一反三，应用到更多的实例中去。

　　实例思路：

　　正如前面所说的，一个例子的学习是次要的，关键是掌控这种方法。在进行我们实例之前，先说一下理论和方法。

　　在这个导航中，有四个Button（按钮，简称：BTN），一个MovieClip（影片，简介：MC）。上面跟随移动的MC实例名为：follow。下面的四个BTN实例名分别为：btn_home，btn_about，btn_news，btn_links。实例的运动方法：当鼠标移动到其中的一个按钮上时，上面的MC（follow）会以逐渐减速的运动慢慢靠近鼠标所指的按钮上。这其中是以他们的X坐标来判断follow的位置的。

　　follow总共需要移动的距离为我们鼠标所指的按钮的X坐标减去他自己的X坐标。follow每次移动一定的距离（假如大家仔细观察的话，应该发现他并不是以匀速进行的，而是以减速进行的）

　　下面我们假设follow的X坐标为40，而我们将鼠标移动到了btn_links的按钮上了（即标有links的那个按钮）。而btn_links的X坐标为280，那么，他们之间的距离为btn_links._x-follow._x（这其中的._x代表这个实例的X坐标）。现在我们需要让follow以减速运动从当前的X坐标移动到btn_links的X坐标上。

　　注意：下面是本例的重点，也就是需要大家掌控的“方法”。

　　我们让follow每次移动他们之间的距离的1/2。因为follow的X坐标是随时改变的，所以他们之间的距离也会随时改变。当follow第一次移动的时候，他的X坐标为40 (280-40)/2=160注：（40（follow的X坐标） (280（btn_links的X坐标）-40（follow的X坐标）)/2=160（移动后follow的X坐标））。当他第二次移动的时候，他的X坐标为160 (280-160)/2=220。他第一次移动的距离为120像素，而第二次移动的距离为60，实现了我们所要的减速运动。假如觉得这样的减速运动太快的话，您能够适应的改变每次移动的比例。如让follow每次移动1/3……

　　实例实践：

　　上面我们已掌控了本例的基本实现思路。下面，我们就按着我们的思路，来一步一步地去实现这个菜单。

　　step1:首先，我们需要制作我们所需要的元素。4个bTN，连同一个MC，把您所需要的栏目，做成BTN，然后制作一个跟随移动的MC。

　　方法：点击菜单

　　插入(insert)>>新建元件(new symbol)

　　在名称(name)上填写名称btn_home。（起名字最好要有个规则，不然假如元件多了，看起来会很乱）

　　

　　（快捷键Ctrl F8）确认行为选择为按钮。

　　点击确认以后，便会进到这个元件的编辑界面。我们会看到这里面的编辑方式不一和主场景不相同，只有四个帧，这是因为这个元件的行为是按钮的原因。这四个帧分别为：up（弹起）、over（指针经过）、down（按下）、activ（点击）。分别代表鼠标不在按钮上，鼠标经过按钮（或在按钮上停留时），鼠标点击时，最后一个是响应鼠标的区域。假如最后一层没有的话，就会以最上面一层的up（弹起）为活动区域。

　　我们在图层1的up帧用文本工具写入HOME，这里颜色为#146270。然后在down(按下)帧，点鼠标右键，选择插入帧（insert frame）。这是为了确保在任何时候都显示home这几个文字。在属性面板中配置X和Y都为0；然后在新建一图层，将图层2拉到图层1下面，用矩形工具在图层2上画一个长方形。在属性面板配置宽为80，高为20，X和Y都为0；配置填充色为#56CCE0，无边框。然后在鼠标经过（OVER）上点鼠标右键选择插入关键帧（insert key frame）。将填充色改为#8ADCEA，然后在最后一帧上，即点击(activ)帧点鼠标右键，选择插入帧（这样是为了让我们的鼠标活动范围增大）。按照此方法，继续制作其他栏目的BTN，只有文字不同，其他地方方法相同。您也能够在库面板（窗口>>库，快捷键Ctrl L、F11），选择建立的元件名，这里是btn_home，然后右击，选择复制，起一个新的好记的名称，然后再双击进入复制好的元件里，对文字进行编辑。把文字改为各个栏目的名称。

　　将四个按钮制作完以后，再新建一个元件，名字为follow，行为为影片剪辑，同样用矩形工具画一个长方形，然后对他用渐变进行填充。高:6，宽:80，X:0，Y:0。

　　step2:回到主场景，打开库面板，将我们的组件拉到主场景来，对他们的位置进行排列。

　　把主场景的大小设为400X40，帧数为25帧，背景色为#006699。把四个按钮拉进主场景，将他们的Y坐标都设为20，X坐标分别为：40，122，204,286（这里能够自由设定）。为了直观，将该层改名为btns。

　　新建一层，将follow影片也拉到主场景，X:40；Y:7，将该层改名为follow。

　　给每个按钮、影片起实例名：先看一下下面的图片

　　

　　为home、about、news、links分别起实例名为btn_home，btn_about，btn_news、btn_links。给上面的跟随移动的MC，起名为follow。

　　注意：这里的实例名和在库中的元件名是两回事。库中的元件名是为了我们能够在编辑的时候，能够很好的区分他们。不在同目录下的元件是能够重名的。而场景中的实例名，则是为了让我们在使用编写as程式的时候，利用实例名来分辨他们。

　　再新建一层，起名为as，在下面键入如下代码。(附注释)

　　//这个符号是FLASH中的注释符

　　//配置两个变量，startX，endX，用来保存follow的运动起始点和结束点。即当前的followX坐标和我们所移动到的BTN的X坐标。这里仅起到初始化的作用。

　　startX = follow._x;

　　endX = 40;

　　//当鼠标移动到不同的按钮上时，follow的结束点X坐标是不同的。以下的语句是用来判断鼠标移动到哪一个按钮上了。

　　btn_home.onRollOver = function() {

　　//配置当鼠标移动到不同的按钮上时，结束点的X坐标为当前鼠标所移动到的按钮的X坐标

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有