Flash实例之弹缩按钮

效果预览图：

图1-1

效果简介：

该例在鼠标效果中是最基本的了，也是一个比较典型的鼠标实例。效果中小人的眼睛会跟随鼠标移动，这时的鼠标也变成了一串香蕉。因此，这个小人也显得垂涎欲滴。

文章简介：

文章中读者将要学到隐藏和替换鼠标的技术即学习拖动影片剪辑的控制语句。鼠标跟随效果的基础方法，即学习_x属性，_xmouse属性等电影剪辑属性使用方法。以及如何导入素材。

制作步骤：

1．设置场景的大小为400px×30px，背景色为#00659C，帧频为12fps。

2．按快捷键Ctrl+F8打开“创建新元件”面板新建一个名为“鬼脸”的图形元件。然后用“椭圆”工具绘制一个垂涎欲滴的鬼脸，然后制作两个小洞用来放眼睛。方法也很简单，用“椭圆”工具画个圆周，然后用箭头工具把小圈内部删除即可。如图1-2所示：

图1-2

3．制作瞳孔。新建一个名为“瞳孔”的影片剪辑元件。如图1-3所示，在“瞳孔”元件的场景中绘制一个深灰色的圆环，一个黑色的圆，几个白色的小圆就可以了。

 图1-3

4．制作眼睛。新建一个名为“眼睛”的影片剪辑元件。先用“椭圆”工具在场景中绘制一个颜色#999999的圆。打开库，把“瞳孔”影片剪辑拖拽到场景中，放置在灰色的圆上。注意：“瞳孔”元件的中心要和场景的中心重叠。如图1-4所示。

图1-4

5．点选“瞳孔”元件，然后在“属性”面板里给它起个实例名称“eye”。如图1-5所示。

图1-5

6．点选中“眼睛”元件场景中的第2帧，按F6键插入关键帧（如果你把第2帧灰色的部分变成黄色等明亮的颜色，还可以看到火眼金睛的效果）。右键单击第1帧，在弹出的菜单中选择“动作”命令后键入如下代码：

//属性_xmouse和属性_xmouse用来获取鼠标在X轴和Y轴方向上的坐标值

//属性_x和属性_x用来获取或设定影片剪辑元件在场景中X轴和Y轴方向上的坐标值

//变量i接受的数据是场景原点到鼠标的直线距离

i = Math.sqrt(_xmouse*_xmouse+_ymouse* _ymouse);

eye._x = 25/i*_xmouse;

eye._y = 25/i*_ymouse;

代码中用到了数学对象Math的方法sqrt()，其功能是计算数的平方根。代码中的数字“25”是“瞳孔”元件在主场景中的大小，这样设置主要是为了不让“瞳孔”飞到眼睛外面去，否则就成了看到美女的迈克老狼了^o^。

7．按快捷键Ctrl+F8打开“创建新元件”面板新建一个名为“香蕉”的影片剪辑元件。然后按快捷键Ctrl+R打开“导入”面板，然后找到一个“香蕉”素材导入，如效果图1-1所示。

8．回到主场景。先从库中把图形元件“鬼脸”拖拽到主场景中。接着再把“眼睛”影片剪辑元件从库中拖拽到主场景中，并复制出一个眼睛。然后把这两个“眼睛”元件放置在眼窝中，如效果图1-1所示。

9．把“香蕉”影片剪辑元件从库中拖拽到主场景中，点选中“香蕉”元件，在“属性”面板中给它起个实例名称“banana”。然后右键点选中“香蕉”，键入如下代码：

onClipEvent (mouseMove) {

Mouse.hide();

startDrag("_root.banana", true);

}

onClipEvent()是一个事件触发器，在前面笔者已经将过，事件mouseMove是在鼠标移动的时候触发事件，执行“{}”中的代码。_root是指定或返回主场景中的影片的引用。如果影片有多个级别，则跟影片时间轴位于包含当前正在执行脚本的级别上。例如，如果级别1中的脚本计算_root，则返回_level1。鼠标对象Mouse的方法hide()可以隐藏场景中的鼠标。影片剪辑控制语句startDrag的功能是可以拖动场景中的影片剪辑。

效果完成了最终效果如效果图1-1所示。，现在读者朋友可以按快捷键“Ctrl+Enter”测试一下，笔者相信你做得那个眼睛更加有神。总之，掌握了这个效果，即掌握了鼠标的基本使用方法。