AS3基础教程-第27课-按钮切换画面小程序(上)
1、打开flashCS6软件，新建AS3文件，保存为27.fla文件
2、首先，从公用库内找到一个合适的按钮，比如说下图这个。
我们需要使用这个按钮多次，每一个按钮中的文字都要求不同。
故此，需要先将按钮里的文字删掉。方法是用选择工具双击舞台上的按钮，就会进入按钮内部，见下图2，文字位于text图层内，直接删除该图层即可。
3、删除按钮内的文字图层之后，单击 场景 1 进入主场景。
此时舞台上的按钮内不再有文字了。
用选择工具单击这个按钮后，按住Alt键不放，拖动鼠标，会复制出一个按钮，复制结束后，松开Alt键
重复该步骤，一共复制出3个按钮，如此一来，舞台上有4个一模一样的按钮，如下图所示。将图层的名字重命名为 按钮
4、新建一个图层，命名为 文字
然后在四个按钮上面 写上四个文字，代表四个不同功能的按钮。
这里，作为演示，这四个文字我分别设置为
首页、图片欣赏、软件下载、关于本站
5、接下来，给四个按钮分别设置实例名为
shouye_btn tupian_btn ruanjian_btn guanyu_btn
这里有个细节要注意：因为 文字 图层在 按钮图层上面，单击按钮的时候，可能会被文字挡住，可以先锁定文字层，设置完毕后再给文字层解锁
6、我们要实现的目的就是，单击这4个按钮，分别跳转到不同的画面。
故此，还要制作四个画面，分别与按钮的文字一一对应
而且，一打开本程序，出现的就是 首页 的画面，也就是第一帧。
由于我只是演示代码的写法，故此，画面的设计不再讲述，这里简单的使用文字做一下区分即可
7、新建一个图层，命名为 首页，然后继续新建图层，分别重命名为 4个按钮的文字，如下图所示
8、接下来，在新建的这4个图层的第一帧内，分别绘制画面。
这里我用文字简单的做区分
9、然后，需要将这四个图层的关键帧分别错开
首页位于1帧
图片欣赏位于2帧
软件下载位于3帧
关于本站位于4帧
使用如下的技巧对帧进行移位：
单击 图片欣赏 图层的第一帧，向右拖动，拖到第2帧上后松手
其余的同理操作
10、我们需要让按钮的文本一直显示在画面上，因此，需要延长一下 按钮和文字图层的时间轴。在这两个图层的第4帧分别按一下F5键
11、至此，画面布置结束。接下来我们书写代码
1、首先，给按钮加代码。仍然使用代码片段功能，给4个按钮分别添加按钮单击的命令。让然是将自动生成的注释都删掉。
由于时间轴共有4帧，所以自动生成的代码也在第4帧。但是我们需要代码都在第1帧，故此将自动生成的Actions图层的第4帧拖放到该层的第1帧
2、接下来，就是给4个按钮的相应函数内分别添加跳转时间轴的命令
这里，要求跳转到相应的帧后停止播放头，故此需要使用gotoAndStop(n)命令
按照4个按钮的从左到右的顺序，它们的命令分别是
gotoAndStop(1)
gotoAndStop(2)
gotoAndStop(3)
gotoAndStop(4)
3、测试影片，发现画面频闪，原因是 默认情况下，时间轴是重复播放的，由于我们没有添加stop命令，所以一直播放
打开Actions图层的第1帧，在所有代码的最上面添加一行代码：
stop()
4、下面给出本例的完整代码：
stop()
shouye_btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void
{
gotoAndStop(1)
}
tupian_btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);
function fl_MouseClickHandler_2(event:MouseEvent):void
{
gotoAndStop(2)
}
ruanjian_btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_3);
function fl_MouseClickHandler_3(event:MouseEvent):void
{
gotoAndStop(3)
}
guanyu_btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_4);
function fl_MouseClickHandler_4(event:MouseEvent):void
{
gotoAndStop(4)
}
1、我们发现，四个按钮实现的效果都是类似的，代码也如出一辙。
那么是否有更加简易的书写方式呢？
答案是肯定的。
我会在下节课揭晓
2、请大家保存好本例的fla文件，下节课要在本例的基础上修改代码
3、另外，你可以将四个画面分别绘制一下，而不是和我演示的那样，只是弄上几个文字说明一下就拉倒了