Flash交互动画制作技巧:按钮控制动画

作者:网络 来源:佚名 更新时间:2009-12-02 19:58:08 点击:
 按钮是flash动画里的基本元件之一,是帮助我们让动画按照自己的意愿呈现出来的重要元件之一。它的表现形式多样,可以是元件、影片剪辑、文字等等,通过对它的设置可以实现场景的播放、停止、快进、快退、暂停、跟随...... 按钮还可分单控按钮(即只有一个作用或播放或停止)和双控按钮(即可播放可停止)。一般看到大家常用的是单控按钮,并且看到很多朋友将单控的play按钮帧一直延续到动画结束,这是很没有必要的,因为一般单控按钮在点击完成后就没有作用了,也没必要再显示存在了,所以它只需一帧就可以了。如果是双控按钮,它就需要伴随动画直到结束,因为它在此期间随时都要执行对它设置的命令。下面就做个范例,供大家参考。



一、单控按钮:(as3.0)
1.插入---新建元件,类型:按钮,在编辑区内的第一帧上打上文字(play)或画一无笔触,填充色任意的圆都可以,或拖入一喜欢的影片剪辑也行,在第二帧和第三帧添加关键帧,第四帧添加普通帧。分别选中第二帧和第三帧将其改变不同的颜色。(已做好的动画影片剪辑除外)

 

2.回场景,在图层1上拖入一影片剪辑,在属性面板上输入“dh_mc ”,

3.添加图层2,名为按钮层,在第一帧将按钮元件拖入,属性面板内输入实例名“bf_btn”,实例名的字母一定是在英文状态下输入,否则无效。

 

4.添加一新图层as层,选中第一帧,打开动作面板,输入语句:

dh_mc.stop();
function bf(event:mouseevent):void {
        dh_mc.play();
}
bf_btn.addeventlistener(mouseevent.click,bf);



从上个实例中看出play按钮在点击完成后,已无任何意义存在了,影片剪辑会一直播放下去直到结束。所以我们只要将play按钮安置在第一帧上即可,后加空白关键帧。(如有下载进度条的情况下,应将按钮放在第二帧上即可)   下面我还以上个实例为例,再加个停止按钮,让影片剪辑停下来。

1.停止按钮的创建同前所述。

2.回上个实例的场景,在按钮层第一帧,也将停止按钮拖入,在属性面板上输入实例名“tz_btn”。

3.在as层第一帧,打开动作面板接着输入语句:
function tz(evt:mouseevent):void {
dh_mc.stop();
}
tz_btn.addeventlistener(mouseevent.click,tz); 



上一页的例子是用两个单控按钮控制一个动画,现在我要将两个按钮的作用合二为一,也就是说用一个两种作用的按钮控制动画,即“双控按钮”。

二、双控按钮:(as3.0)
1.新建影片剪辑,名为“双控”。用椭圆工具画一圆,可设笔触,颜色任意,并添加图层2,在其第一帧上,点文字工具,在属性面板里选“动态文本”,字型、自号、颜色自定,输入文字“停止”,ab不被选中,居中对齐,实例名sk_txt,其他默认,回场景。

2.拖入动画影片剪辑。在属性面板里输入实例名“dh_mc”。

3.新建图层2,拖入“双控”影片剪辑,在属性面板里输入实例名“sk_mc”。

4.新建图层为as层,在第一帧上打开动作面板,输入语句:

var a:boolean=false;
function kz(evt:mouseevent):void {
if (!a) {
dh_mc.stop();
sk_mc.sk_txt.text="播放";
} else {dh_mc.play();
sk_mc.sk_txt.text="停止";
}
a=!a;
}
sk_mc.addeventlistener(mouseevent.click,kz);



以上的按钮浅谈仅供大家参考,还望互相交流。