按钮的制作
教学目标:
1、掌握按钮制作的基本方法。
2、掌握按钮中的动画设计方法。
3、掌握透明按钮的制作
教学重点: 按钮元件的创建,按钮动画的设计。
教学难点: 按钮中的四种状态。
教学过程:
一、按钮元件(可详见课本P111)
按钮用于响应鼠标,即随鼠标显示不同的状态,执行指定的行为。
1、插入按钮元件,执行“插入”-“新建元件”命令(或者按<ctrl+F8>键),在创建新元件对话框中设置元件类型为按钮,即可见如下界面
2、编辑按钮元件:按钮元件有弹起、指针经过、按下和点击四种状态,如图所示:
V 弹起:表示鼠标没有在按钮上时的按钮的状态。
V 指针经过:表示鼠标经过按钮时按钮的状态。
V 按下:表示按下鼠标时按钮的状态。
V 点击:设置按钮响应鼠标的区域。
如果要制作透明按钮,仅在“点击”画出点范围即可。
二、上机操作:制作以下实例
1、基本按钮
分析:
1、弹起:二个图片元件分别放置在文字和边框图层中
2、经过:与弹起时的一个图片元件相同,在此基础上用“按我”的图片元件创建一个影片剪辑元件。
3、按下:用“谢谢”图片元件替换“按我”图片元件
4、点击:延续边框图层的第一帧,代表鼠标进入边框区域后,按钮才会有响应。
弹起帧 指针经过帧
按下帧 点击帧
2、 练习:制作一个带有以下动画效果的按钮(自选一个完成)
提示:将按钮下面的文字放在新的图层上。
三、按钮的点击作用
1、一般按钮点击后均会产生一个动作,如:停止、播放、重放、跳转、超链接,如:(源文件下载)
2、按钮的几个常用动作:
on动作命令
下面我们就详细地向大家介绍一下这八种事件的使用。
(1)press 在鼠标指针经过按钮时按下鼠标按钮。单击press,然后选择动作语句,双击【全局函数】|【时间轴控制】中的play 命令。
完整的action是:
on(press){ //设定鼠标事件为按下,然后执行大括号里面的语句。
play(); //按钮响应后执行play(播放)动作
}
press动作 当然,在大括号里面还可以用其他的语句,比如说,gotoAndPlay(yourframe); //点击按钮后,就会从你设置的帧播放。
(2) release 在鼠标指针经过按钮时释放鼠标按钮。单击选择release然后与第一个事件相同加入play命令。完成的语句如下:
on(release){ //当鼠标按下释放的时候,执行下面的语句动作。
play(); //按钮响应后执行play(播放)动作。
}
release动作 可以看到,当鼠标左键按下按钮的时候,并没有激发播放动作,而是当鼠标左键放开的时候,执行了播放动作。这也是与“press”事件不同的地方。
(3)releaseOutside 当鼠标指针在按钮之内时按下按钮后,将鼠标指针移到按钮之外,此时释放鼠标按钮。 添加语句的方法同上。完整的语句如下:
on (releaseOutside) { //当鼠标在按钮外部释放的时候执行下面的语句。
play(); //按钮响应后执行播放动作。
}
releaseOutside动作
通过这个例子我们知道,当鼠标左键在按钮上按住并移动到按钮以外的地方放开后,触发了按钮的动作。这是一个具有非常想象力的事件,大家可以利用on的这个事件来制作游戏。
(4) rollOver 鼠标指针滑过按钮。制作方法同上,完整的as语句为:
on(rollover){ //当鼠标滑动到按钮上时执行下面的动作。
play(); //按钮执行播放动作。
}
rollOver动作 当鼠标指针从按钮上滑过的时候,动画就开始执行播放动作了,而不需要点击它。我们可以利用on的这个特点来制作一些图示板,非常简单有效
(5)rollOut 鼠标指针滑出按钮区域。制作方法同上,完整的as语句为:
on(rollOut){ //当鼠标滑动到按钮上并离开时执行下面动作。
Play(): //按钮响应播放动作。
}
rollOut动作
滑离与滑过并不是相同的,滑离是指鼠标滑动到按钮上并离开以后开始响应,而滑过是指只要鼠标滑到按钮上,就开始执行动作。
(6)dragOut 在鼠标指针滑过按钮时按下鼠标按钮,然后滑出此按钮区域。完整的as是:
on(Drag Out){ //当鼠标拖过的时候执行下面的动作。
play(); //执行播放动作。
}
dragOut动作
拖离与拖过有所不同,只要在按钮上按住鼠标左键然后移动到按钮外就会相应。他与滑离的区别在于拖离需要按住鼠标左键。
(7)dragOver 在鼠标指针滑过按钮时按下鼠标按钮,然后滑出此按钮,再滑回此按钮。完整的as是:
on (dragover) { //当鼠标指针滑过按钮时按下鼠标按钮,然后滑出此按钮,再滑回此按钮时执行下面的动作。
play(); //执行播放动作
}
dragOver动作
拖过的效果是在按钮上点击并按住鼠标不放,移出按扭区,再移回按钮上释放的事件。注意:此例中是一个文字按钮,在做文字按钮的时候,应在文字的下方用一透明方块,以增加按钮的反应区域,或者在按钮的第4帧绘制一个矩形来增加反映区。
(8) keyPress ("key") 按下指定的键。对于此参数的 key 部分,需指定键控代码或键常量。
我们在(“key”)中键入“k”。完整地as语句为:
on (keyPress "z") { //当按下键盘中的“z”健时执行下面的动作。
play(); //执行播放动作
}
注 意 ——在给动画作品添加按钮的时候应该放到单独一层,这样便于修改。
提 示 ——on为按钮上的动作,所以我们必须首先要选中按钮,以后才可以添加on语句。有的朋友在论坛里面提问,“为什么我的on为灰色不可选状态?”原因就是你没有选中按钮。
技 巧 ——在一般flash作品中,大家不会有意区分这些on的功能的,一般采用默认的语句。如果没有特殊说明,你使用了拖离,滑离等事件来制作“replay”按钮,会让人们摸不着头脑的。
试一试 ——我们了解了on得这么多的功能,利用这些功能可以轻易的制作出flash课件,flash游戏里面的效果,大家不妨试一试。
分 析——on语句的功能与按钮息息相关,有按钮的地方一定会有on语句的使用。而有flash作品的地方,就会有按钮的出现,所以说on的重要作用不可忽视。今天向大家详细地介绍了on的各种功能,我们就可以结合按钮自身的特点,发挥他们的功能。
四、作业
必做题:
1、“按我”
2、move on 或 next and back