应用思考-教育技术论坛

标题: 学习笔记之“按钮组件实例” [打印本页]

作者: 清灯竹影 时间: 2014-5-19 13:59
标题: 学习笔记之“按钮组件实例”

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

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

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

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

作者: 清灯竹影 时间: 2014-5-19 14:14
switch..case 语句提供对多个分支，分别进行不同的处理功能。它的条理灰常的清晰，使用很方便。
一般的形式如下：

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

作者: 清灯竹影 时间: 2014-5-19 14:43
   看起来很抽象啊，貌似不好理解。举个例子说明：一个箱子里有红球、绿球、蓝球和白球4种颜色的球若干个。你用手在箱子里随机摸一个球出来。如果是红球，那么中了一等奖；绿球，二等奖；蓝球，三等奖；白球，神马都木得中！那么用switch语句来表达这个过程，就是：
                           switch（摸出来的球){
                                 case"红球"
                                 trace("恭喜！你中了一等奖")
                                 break;
                                 case"绿球"
                                 trace("恭喜！你中了二等奖")
                                 break;
                                 case"蓝球"
                                 trace("恭喜！你中了三等奖")
                                 break;
                              case"白球"
                                 trace("抱歉！啥都木得中")
                                 break;

                                 default:
                                 trace("我去....居然放了和抽奖无关的东东在抽奖箱里！")
                                 break;

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

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

作者: 清灯竹影 时间: 2014-5-19 14:57
四、右键影片剪辑，选择属性，比如你这个影片剪辑是朵花，那么选择“为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;
   //让按钮组件的周围显示边框

作者: 清灯竹影 时间: 2014-5-19 15:00
接着上面，第二部分代码：
var hua_mc:Hua=new Hua();
addChild(hua_mc);
hua_mc.x = 200;
hua_mc.y = 200;
hua_mc.stop();

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

作者: 清灯竹影 时间: 2014-5-19 15:03
第三部分代码：

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;
}

}

作者: 清灯竹影 时间: 2014-5-19 15:05
按钮组件.swf(858.48K)

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

欢迎光临应用思考-教育技术论坛 (http://etthink.com/)