学习笔记之“按钮组件实例”

          学习笔记之“按钮组件实例”

这次的学习笔记，是一个关于按钮组件的。Flash内置的组件能满足我们做课件的大部分需求。组件，其实也是一种影片剪辑，就是带参数的影片剪辑。我们通过修改和利用组件的参数，可以做出很多交互性很强的课件。比如弹出菜单、单选题、多选题、加载图片、下拉框等等，实在是太多。它的功能是如此的强大，但是，很抱歉的说，你需要知道了解并记住它的参数和各种设置，才能用到得心应手。

   很惭愧的是，我也就会那么一点点。不过写一则学习的笔记，可以让和我一样的新手了解一些知识，而且我写了，自己也能加深印象，一举两得，倒也不负恩泽…….我怎么听到“废话！滚粗去…..”的声音？{:soso_e140:}{:soso_e113:}

    在学习这个实例之前，需要先知道一个条件语句——“swithch”，如果不了解它，在这个实例里，可能会有点晕晕的。所以先大概的说明一下。
     我们知道if语句是常见的可以实现多分支选择的语句。但是如果分支比较多，程序代码将会变得冗长，阅读起来烦死了。在这样的情况下，使用swithch语句可以轻松地进行多分支处理。

switch..case 语句提供对多个分支，分别进行不同的处理功能。它的条理灰常的清晰，使用很方便。
一般的形式如下：

                  switch(表达式){
                      case 值1;
                      语句组1;
                       break;
                      case 值2;
                      语句组2;
                       break;
                      .....
                      case值n;
                      语句组n
                      break；
                      default:
                      语句组n+1;
                      break；
                      }

     看起来很抽象啊，貌似不好理解。举个例子说明：一个箱子里有红球、绿球、蓝球和白球4种颜色的球若干个。你用手在箱子里随机摸一个球出来。如果是红球，那么中了一等奖；绿球，二等奖；蓝球，三等奖；白球，神马都木得中！那么用switch语句来表达这个过程，就是：
                              switch（摸出来的球){
                                   case"红球"
                                   trace("恭喜！你中了一等奖")
                                   break;
                                   case"绿球"
                                   trace("恭喜！你中了二等奖")
                                   break;
                                   case"蓝球"
                                   trace("恭喜！你中了三等奖")
                                   break;
                                  case"白球"
                                   trace("抱歉！啥都木得中")
                                   break;
                                   
                                   default:
                                   trace("我去....居然放了和抽奖无关的东东在抽奖箱里！")
                                   break;

      接下来开始做这个实例。
    一、从组件里拖一个Button组件到舞台。
    二、选择一张图片，比如PNG格式的，导入到舞台，然后转换为影片剪辑，在影片剪辑里做个补间，让它从小到大的变化。影片剪辑里只是一层，亲。

    三、把舞台上的组件和影片剪辑都删除掉。

   四、右键影片剪辑，选择属性，比如你这个影片剪辑是朵花，那么选择“为ActionScript导出"在类里命名为"Hua",然后点确定，这时候弹出一个警告，无视，点确定。
  五、回到主场景，然后选择图层一，第一帧，第一部分的代码如下：
       import fl.controls.Button;
       //导入按钮组件的类。凡是fl开头的包，你都需要导入。
       var an_btn:Button=new Button();
       //声明一个变量an_btn属于Button这个类，
        addChild(an_btn);
      //让这个an_btn显示在舞台上
       an_btn.x = 440;
       an_btn.y = 370;
      //以上设置它的坐标，舞台是550*400
       an_btn.useHandCursor = true;
       //鼠标划过按钮的时候显示为手形
       an_btn.emphasized = true;
       //让按钮组件的周围显示边框

   接着上面，第二部分代码：
   var hua_mc:Hua=new Hua();
   addChild(hua_mc);
   hua_mc.x = 200;
   hua_mc.y = 200;
   hua_mc.stop();

这部分不写注释，相信你参照刚才的第一部分代码能理解的。这样我们来做的时候，就不会觉得自己只是在打酱油了。

       第三部分代码：

an_btn.label = "增大";
//按钮组件有一个属性是label，意思是标签，首先我们让它显示为“增大”

an_btn.addEventListener(MouseEvent.CLICK,dj);
//事件侦听

function dj(event:MouseEvent):void
//定义函数

{
switch (an_btn.label)
{
  case "增大" :
   hua_mc.play();
   an_btn.label = "暂停";
   break;
  case "暂停" :
   hua_mc.stop();
   an_btn.label = "旋转";
   break;
  case "旋转" :
   hua_mc.rotation +=  90;
   an_btn.label = "停止";
   break;
  case "停止" :
   hua_mc.gotoAndStop(1);
   an_btn.label = "增大";
   break;
}

}

按钮组件.swf(858.48K)


   以上是源文件和SWF，文件，自己琢磨下，就学会了这个实例。这里提醒下，如果你愿意，尽可以结合影片剪辑的一些属性，充分发挥想象和创意来展开和改变这个实例的。