神奇的导航菜单.doc

1、打开Flash mx，新建一个影片文件，在属性面板中设置影片背景色为灰色，颜色代码为: #999999 ，其余选项均采用默认方式。2、使用椭圆工具，在按下Shift键的同时在主场景中绘制一个无边框的圆，然后按F8键将其转换为影片剪辑元件，命名为mc1，进入元件的编辑区后，把mc1的中心与场景中的+对准，打开混色器面板，点选放射渐变，拖动两个颜色指示器到左右两端，左边的颜色指示器调节为白色，Alpha为100%，右边的颜色指示器调节为 R:153 G: 153 B:153 （与舞台背景色一样） ，Alpha为0%。然后按Ctrl+F3调出属性面板，设置mc1的宽高均为30。按R选取矩形工具画一正方形，填充色为R:239 G:239 B:239，正方形边框颜色为 R:41 G:84 B:79 ，点选属性面板把正方形设置为宽高均为5，最后把这小正方形叠加到mc1上面，注意对准mc1的中心，如图2所示：图23、下面来设置mc1的Alpha渐变过渡效果。在时间轴上点选第15、30帧，按F6各插入一关键帧，点选第15帧的mcl，注意不要连mc1上的小正方形一起选中，按Shift+F9调出混色器面板，把右边的颜色指示器往左移大概1/3，然后在1-15 ，15-30 帧之间作Shape Tweening（形状渐变)，这样就完成了圆形从亮变暗再变亮的效果，此时时间轴如图3所示： 图34、现在有了mc1，接着再做另两个MC，数量根据你网页的栏目来决定，并均让它们和mc一样有Alpha的渐变效果，分别命名为mc2和mc3。5、好了，接下来制作三个button按钮，分别命名为 bt1、 bt2 、 bt3 。然后分别把 mc1 、mc2、mc3 影片剪辑从库中拖放到 bt1、 bt2 、 bt3 的UP 帧，并按F5延长1帧到Over帧，如果想得到更好的效果，你可以在Over帧上下点工夫，做一些漂亮的效果，这里就不多说了。 6、继续新建三个MC，分别命名为 ball1、ball2、ball3 ，接着分别把bt1、 bt2 、 bt3 从库中拖放到 ball1、ball2、ball3中去，这样所有的准备工作就完成了，下面开始组织这些元件并添加相应的Action控制代码 。 下面我们开始ActionScript的编写。ActionScript的编写7、首先，因为我们要求导航的按钮能够拖动，所以先来设置按钮的AS，在元件ball1中点选元件btl1，给它加上如下代码 : on(press) |鼠标按下 startDrag();|开始拖动 drag=true; on(release, releaseOutside)|鼠标释放 stopDrag();|停止拖动 drag=flase; 以上这段代码大家都很熟悉吧，然后复制这段代码，分别加给 ball2中bt2 和ball3中的bt3 ，因为是用来导航的按钮，所以可以给这三个按钮添加连接功能，比如这里bt3的Action设置为： on(press)startDrag();drag=true;on(release, releaseOutside)stopDrag();drag=false;on (release) getURL(mailto:你的邮箱地址); 这样就实现了当浏览者点击按钮后，调用系统默认的邮件程序给自己站长发电子邮件了。8、按Ctrl+E回到主场景，把刚开始作ball1 、ball2、ball3这三个MC从库中拖到主场景，分别命名其Instance Name(实例名称)为：h1、h2 、h3 ，把h1、h2 、h3 在主场景中排好位置，如图4所示：图49、最后使用Flash MX的画线指令把它们用线一一连接起来，在主场景中新建一层，命名为AS ，在第一帧加如下代码： _root.onEnterFrame = function() clear(); |清除以前的填充设置 _root.lineStyle(1.5, 0xcecece); |定义画线的样式 _root.moveTo(_root.h1._x, _root.h1._y); |把线的始端定在h1坐标处 _root.lineTo(_root.h2._x, _root.h2._y); |从h1画一条线到h2 _root.lineTo(_root.h3._x, _root.h3._y); |从h2画一条线到h3 _root.lineTo(_root.h1._x, _root.h1._y); |从h3画一条线到h1 _root.endFill(); | 结束 Fill 接着来设置h1、h2 、h3 的鼠标吸引及缓冲效果，点选主场景中的h1，给其加上如下代码： onClipEvent (load) |初始化变量 x = this._x; y = this._y; onClipEvent (enterFrame) |实现鼠标的吸引效果以及MC（h1）的缓冲效果dis_x = _root._xmouse - x; dis_y = _root._ymouse - y; if(!drag) if (dis_x * dis_x) + (dis_y * dis_y) 1500) |判断鼠标和MC的距离 newvar_x = _root._xmouse; |把_root._xmouse 、_root._ymouse赋给 newvar_y = _root._ymouse; |两个新变量newvar_x 、newvar_y ，此时还没有 else |与MC相联系。 target_x = x; target_y = y; |设置缓冲效果，可以更改一下具体的参数，体会体会缓冲的效果 xspeed = (target_x - this._x)*.8)+(xspeed*.65); this._x += xspeed; yspeed = (target_y - this._y)*.8)+(yspeed*.65); this._y += yspeed; 然后复制上面的代码，分别给 h2 、h3设置。以上鼠标吸引及缓冲效果的代码还隐藏这样的一个效果，即MC只要偏离原来的坐标就会自动回位。这样，只要隔一段时间就改变MC的位置，则可以实现MC 的 痉挛抽动 的效果。 10、接下来将用简单的脚本来实现h1、h2 、h3的 痉挛抽动效果，点选主场景第一帧,添加如下代码：_root.onEnterFrame = function() clear(); _root.lineStyle(1.5, 0xcecece); _root.moveTo(_root.h1._x, _root.h1._y); _root.lineTo(_root.h2._x, _root.h2._y); _root.lineTo(_root.h3._x, _root.h3._y); _root.lineTo(_root.h1._x, _root.h1._y); _root.endFill(); 后面加上如下脚本： setInterval(myball1, 6000); function myball1() if (_root.h1.hitTest(_root._xmouse, _root._ymouse, false) _root.h1._x = _root._xmouse; _root.h1._y = _root._ymouse; else _root.h1._x += 70-random(150); |设置MC的随机坐标 _root.h1._y += 50-random(150); setInterval(myball2, 5000); function myball2() if (_root.h2.hitTest(_root._xmouse, _root._ymouse, false) _root.h2._x = _root._xmouse; _root.h2._y = _root._ymouse; else _root.h2._x += 70-random(140); _root.h2._y += 60-random(150); setInterval(myball3, 4000); function myball3() if (_root.h3.hitTest(_root._xmouse, _root._ymouse, false) _root.h3._x = _root._xmouse; _root.h3._y= _root._ymouse; else _r