按钮动画的制作
一、制作按钮
Flash的按钮会通过鼠标的动作而改变形状,可启动跳跃到所指定的URL或帧的Action。
1、按钮的状态
在按钮里共分为弹起、指针经过、按下、点击等4种状态,根据设置在按钮的动作,会显示出绘制在各个状态里的图形。各个状态的图形,必须在按钮的编辑画面里,在各种状态下先插入关键帧,在进行绘制。
2、制作按钮
例13:
(1)首先画面上绘制按钮,并将它以“按钮”命名,类型为“按钮”,转换为元件。
(2)选择“编辑|编辑元件”后,会切换到按钮的编辑画面,在“弹起”状态帧会出现所绘制的按钮。
(3)在“指针经过”状态帧中,插入关键帧,将按钮改为较深的颜色。
(4)在“按下”状态帧中插入关键帧,改变按钮的颜色;如果插入空白关键帧,可以绘制别的图形,那么绘制在这个状态下的图形在单击按钮时会显示出来。
(5)在“点击”状态帧中插入关键帧,绘制图形,这个图形将成为鼠标的反应区域。
(6)单击“场景”图标以切换到电影画面,选择“控制|启用简单按钮”命令,即可在电影画面中测试按钮动作。
二、制作会出声的按钮
如果要使按钮能针对鼠标的动作发出声音的话,必须先汇入声音文件,然后再放置声音到按钮中,至于何时发出声音,要看设计者将声音文件放置到按钮的状态而定。
例如:要使单击按钮时发出声音,那么就须将声音文件放置在“按下”状态之中。
例14:
(1)继续上一个例子,选择“文件|导入”命令后,选择声音文件,导入声音文件。
(2)选择制作好的按钮,然后选择“编辑|编辑元件”命令,切换到按钮的编辑画面。
(3)选择“按下”帧,在“属性面板”中的“声音”文本框中选择导入的声音文件,已配置音效的关键帧中会有波形显示。
三、变幻按钮
能对鼠标的动作有所反应而启动动画的按钮称为动画按钮。
例15:
(1)新建一电影文件,设置影片属性:300*300。
(2)执行“插入/新建元件”命令。在弹出的“创建新元件”属性对话框中,名称“hua"
(3)导入一朵花的图片,按Ctrl+B组合键打散图片,用套索工具去掉花周围区域。
(4)执行“插入/新建组件”命令。在弹出的组件属性对话框中,为新按钮输一个名字,比如“anniu”,选择类型为“按钮”,最后按“确定”按钮。进入按钮编辑区,并从库面板中将花元件拖入“弹起”帧中。
(5)新建一个影片剪辑,从库面板中将花元件拖放到编辑区中并在第20帧处插入帧。
(6)新建“图层2”,从库面板中将花拖入到编辑区中与图层1中的元件重合。在图层次2的第20帧处插入关键帧。
(7)将图层2中第20帧中的花缩小,然后将它放置于右下角,点元件在属性面板中将Alpha值设置为“0”
(8)在图层2的第1和第20关键帧间创建动作。
(9)重复6、7、8步的操作,完成右上角、左上角、左下角渐变运动、颜色渐变、大小渐变的动画。
(10)双击库面板中的按钮图标进入按钮编辑区,在“指针经过”帧中插入空白关键帧,从库面板中将影片剪辑“jianji”拖入场景中,将“弹起”帧中的内容分别复制到“按下”帧和“点击”帧中。
(11)切换到场景中,将库面板中的按钮元件拖入到场景中。
四、立体动感按钮
例20:
(1)选择菜单“文件|新建”,创建一个新电影。
(2)选择菜单“插入|新建元件”,弹出“创建新元件”对话框,输入名为“liti”,选择“影片剪辑”,设置完毕,点击“确定”,进入剪辑编辑模式。
(3)选择菜单“查看|网格|显示网格”和菜单“查看|网格|对齐网格”,打开网格和对齐功能。
(4)选择工具栏中矩形工具,填充颜色设置成淡红色。绘制一正方形,去掉边框为如图所示:
(5)将矩形参数栏中的填充颜色设置得深一点,在正方形的上方绘出一长方形,用箭头工具拖动矩形上边的两个端点,使它变成平行四边形。
(6)将矩形参数栏中的填充颜色设置得更深一点,用同样的方法绘制出平行四边形为如图所示:
(7)在第15帧处插入一关键帧,选择正方形图片,调整其位置为如图所示:
(8)在第1帧至第15帧之间创建形状补间动画,设置最后一帧“动作”为stop。
(9)点击图层名称“图层1”,将所有帧全部选中,用鼠标右键点击被选中的任意一帧,从弹出的菜单中选择“拷贝帧”。
(10)选择菜单“插入|新建元件”,弹出新建对话框,输入名称为“liti1”,选择“影片剪辑”项,设置完毕,点击“确定”按钮。
(11)用鼠标右键点击第1帧,从弹出的菜单中选择“粘贴帧”
(12)选中所有帧,用鼠标右键点击图层名称“图层1”,选择菜单“翻转帧”,将动画倒过来。删除第1帧的“动作”,设置最后一帧的“动作”为:stop。
(13)选择菜单“插入|新建元件”,在弹出新建对话框中输入名称为“anniu”,选择“按钮”项,设置完毕,点击“确定”按钮。进入按钮编辑模式,在“弹起”帧中画一个矩形。
(14)切换到场景1,从库中拉入剪辑“liti”和“liti1”,并分别设置它们的实体名称为“liti”和“liti1”,将它们下对齐和左对齐。
(15)新建图层2,从库中拉入图符按钮按钮,适当调整其位置,并将Alpha值设为0。
(16)图层2的第1帧,设置其“动作”为:表示电影一开始播放时,影片剪辑“liti1”不可见,并停留在影片剪辑“liti”的第1帧。
setProperty("/liti1", _visible, "0"); tellTarget ("/liti") { gotoAndStop(1); } stop(); |
(17)为按钮设置动作:表示当鼠标在按钮上时,设置影片剪辑“liti1”不可见,影片剪辑“liti”可见,并从影片剪辑“liti”的第1帧开始播放。当鼠标离开按钮上时,设置影片剪辑“liti”不可见,影片剪辑“liti1”可见,并从影片剪辑“liti1”的第1帧开始播放。
on (rollOver) { tellTarget ("/liti") { setProperty("/liti1", _visible, "0"); setProperty("/liti", _visible, "1"); gotoAndPlay(1); } } on (rollOut) { tellTarget ("/liti1") { setProperty("/liti", _visible, "0"); setProperty("/liti1", _visible, "1"); gotoAndPlay(1); } } |
五、有声有色的按钮
例21:这个范例是一个控制背景音乐的开关,在背景音乐播放时,画面中的喇叭会显现出传播声音的动态效果,按下按钮后,背景音乐就停止播放。再按下按钮,又会开始播放背景音乐。
(1)设计程序背景:新建一个文档,200×200像素,背景#0099cc。
(2)制作基本元件
a、喇叭按钮:新增按钮元件:
b、音波动画:新增影片剪辑元件yuan,每个图层中圆是逐渐变大变淡。
(3)新增一影片剪辑元件:bofang。
a)从“库”中将按钮拖到“按钮”图层中,设定第1帧的按钮的“动作”为:
on (release) { gotoAndStop(10); } |
即按钮被按下时,跳到第10帧,停止音乐的播放。
设定第10帧的按钮的“动作”为:
on (release) { gotoAndStop(1); } |
即按钮被按下时,跳到第1帧,开始播放音乐。
b)在“声音”图层中放的是音乐btn,通过菜单“文件|导入”它,选择图层的第1帧,在属性面板中的“声音”文本框选择“btn.wav”,在“同步”列表框中选择“开始”,在第10帧处插入一关键帧,并在“同步”列表框中选择“停止”。设定“声音”图层第10帧的“动作”为:
stop(); |
c)从“库”中将影片剪辑yuan拖到“播放”图层中,设定第1帧的按钮的“动作”为:
stop(); |
(4)切换到场景1,把库中的“bofang”影片剪辑拖动到工作区中的适当位置。这样,一个音乐控制开关已经制作完成。
练习:
例:anniu_1.swf